Styleguide

Vladislav Melnik
von Vladislav Melnik

Ein Styleguide bestimmt Richtlinien, wie bestimmte Elemente auszusehen haben, damit sie ein einheitliches Erscheinungsbild ergeben.

In Chimpify hast du einen zentralen Styleguide, der dir eine Übersicht der Styles deiner Elemente gibt und dich bei deinem Workflow unterstützt.

Eine Änderung in dem Styleguide wirkt sich auf alle Elemente, Bausteine, Seiten und Templates aus. Bei Bedarf kannst du aber jederzeit den Style eines Elements, z.B. in einer Seite, überschreiben.

Der große Vorteil an unserem Styleguide ist eine “smarte Wasserfallvererbung”. Diese spart dir viel Zeit. Wenn du z.B. die Farbe eines Text-Links änderst, ändert sich der Text-Link in allen Überschriften, im Beitragstext, in der Navigation usw. gleich mit. Und auch hier kannst du bei Bedarf den vererbten Style, z.B. in der Navigation, einfach überschreiben.

Styleguide öffnen und schließen

Egal, wo du dich im Builder befindest, du kannst den Styleguide mit einem Klick öffnen, eine Änderung durchführen und ihn wieder schließen:

styleguide oeffnen schliessen

Styleguide bearbeiten

Nach dem Öffnen kannst du dich einfach von links nach rechts durch die Reiter klicken und je nach Reiter von oben nach unten deine gewünschten Änderungen durchführen.

Gehen wir mal einige häufige Punkte durch:

Ändere den Hintergrund

Öffne einfach den Styleguide und ändere direkte danach den Hintergrund:

styleguide hintergrund aendern

Zack, es ändert sich der Hintergrund auf allen Seiten und Templates.

Ändere die Schriftart

Häufig möchtest du zuerst die Schriftart ändern:

styleguide schriftart aendern

Ändere die Farbe der Text-Links

Danach möchtest du vielleicht die Farbe aller Text-Links ändern:

styleguide text link farbe aendern

Ändere die Überschriften

Wie du bereits gemerkt hast, hat sich die Schriftart an die Überschriften vererbt. Wenn du das überschreiben und hier andere Schriftart haben möchtest, dann ändere die Schriftart:

styleguide ueberschrift aendern

Ändere den Button

Ein auffälliger, kontrastreicher Button ist immer wichtig. Style diesen wie gewünscht:

styleguide button aendern

Ändere den Innenabstand der Sektionen

Wenn dir der Innenabstand der einzelnen Sektionen zu wenig oder zu viel ist, kannst du diesen einfach ändern:

styleguide sektion innenabstand aendern

Schwups, ändert sich der Innenabstand aller Sektionen in allen Seiten und Templates (die keinen Innenabstand überschrieben haben).

Ändere die Breite des Containers

Wenn du möchtest, dass der Container in Sektionen breiter oder schmaler sein soll, dann gehe wie folgt vor:

styleguide container breite aendern

Allein mit den letzten beiden Layoutänderungen kannst du schnell und einfach das gesamte Look & Feel deines Designs ändern.

Styleguide erweitern

Der Styleguide kann momentan leider noch nicht um Elemente mit eigenen Globalen Styles erweitert werden.

Starte jetzt mit Chimpify

Erstelle schnell und einfach eine geile Webseite. Mache dein komplettes Marketing bequem unter einem Dach. Erhalte abschließend Kennzahlen über deinen gesamten Funnel.
30 Tage kostenlos testen
Keine Kreditkarte erforderlich
© Chimpify UG (haftungsbeschränkt). Powered by Chimpify.