Styleguide

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 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:

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

Ändere die Schriftart

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

Ändere die Farbe der Text-Links

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

Ä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:

Ändere den Button

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

Ändere den Innenabstand der Sektionen

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

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:

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.