Style Guide erstellen

Ein Style Guide bestimmt Richtlinien, wie bestimmte Elemente auszusehen haben, damit sie ein einheitliches Erscheinungsbild ergeben:

style guide vorschau

So sollte z.B. der Button immer exakt gleich aussehen. Genau dafür sind Standard Styles und Globale Styles da. Theoretisch brauchst du also keinen Style Guide und kannst alles „on the fly“ machen.

Aber ein eigenständiger Style Guide ist wegen der Übersichtlichkeit und einem besseren Workflow sinnvoll. Denn hier legst du z.B. bequem fest, wie ein Button auszusehen hat, wenn du ihn neu reinziehst.

Ein Style Guide in Chimpify bezieht sich also in erster Linie auf Standard Styles. Kann bei Bedarf aber gerne um Globale Styles erweitert werden, wenn du z.B. ein weiteres Button-Styling anlegen möchtest.

Beachte beim Erstellen deines Style Guides jedoch, dass du evtl. bereits Elemente auf Seiten und Templates deines Themes umstylst.

Schritt 1: Lade eine Style-Guide-Vorlage

Erstelle zuerst eine neue Seite, suche nach „Style Guide“ und lade eine passende Vorlage:

style guide vorlage waehlen

Schritt 2: Verändere die Basis Styles

Klicke in der Breadcrumb Navi auf Seite bzw. Template. Wähle danach explizit den Standard Style „Seite/Template“ aus:

standard style seite template waehlen  

Damit bearbeitest du jetzt das Styling von allen Seiten und Templates.

Starte jetzt mit dem Hintergrund. Welchen Hintergrund sollen alle deine Seiten und Templates haben? Hell oder dunkel? Ändere diesen wie hier beschrieben um:

standard style hintergrund aendern  

Kümmere dich danach um die Schrift. Welche Schrift (Art, Farbe, Stärke usw.) sollen deine Text-, Überschrift-, Text-Link-, Button-Elemente usw. standardmäßig haben? Ändere diese um (wie du eine Schriftart einbindest erfährst du hier):

standard style schrift aendern  

Wie du siehst ist das sehr praktisch, wenn du mit wenigen Klicks die Schrift für alle genannten Elemente verändern kannst.

Im nächsten Schritt kannst du die Basis Styles überschreiben und z.B. einer Überschrift eine andere Schriftart geben.

Schritt 3: Verändere die Standard Styles

Willst du für deine Überschriften vielleicht eine andere Schriftart, -farbe oder -stärke als für deine Texte?

Welche Farbe sollen deine Buttons haben? Sollen die Ecken abgerundet sein? Falls ja, wie stark abgerundet? Was ist mit dem Mouseover (Hover) für deine Buttons?

Gehe hier von oben nach unten entlang. Wähle explizit den Standard Style für jedes Element und verändere das Styling nach deinen Wünschen:

standard styling style guide von oben nach unten

Wenn du jetzt ein Element in deine Seite oder Template ziehst, sieht es genau so aus, wie in deinem Style Guide festgelegt.

Falls du in deinen Seiten und Templates Elemente hast, bei denen die Werte aus deinem Style Guide nicht angegeben sind, wurden diese jetzt automatisch anhand deines Style Guides angepasst.

An dieser Stelle kannst du auch weitere Elemente hinzufügen (z.B. ein Eingabefeld) und die Standard Styles dafür festlegen.

Schritt 4: Füge Globale Styles hinzu

Im letzten Schritt kannst du bei Bedarf gerne noch Globale Styles hinzufügen. Wie wär’s z.B. mit einem weiteren Button-Style?

Kopiere dafür das bestehende Element und bearbeite es einfach. Es wird automatisch ein Globaler Style dafür angelegt:

style guide globalen style erstellen

Diesen Globalen Style kannst du in Zukunft bei Elementen in deinen Seiten und Templates auswählen.

Brandneu

LinkedIn Unternehmensseiten

Chimpify

Plattform

Powered by Chimpify