Einführung in den Style Guide

Ein Style Guide bestimmt Richtlinien, wie bestimmte Elemente zu gestalten sind, damit sie ein einheitliches Erscheinungsbild ergeben.

In Chimpify kannst du für jedes Design einen Style Guide festlegen. Dieser dient als Grundlage für Seiten (und Templates).

Alle Styles, die du hier festlegst, brauchst du nicht jedes mal beim Erstellen einer Seite (oder eines Templates) neu zu wählen. Außerdem kannst du, wenn sich dein Design im Laufe der Zeit ändert, das Aussehen der Elemente im Style Guide anpassen. Dementsprechend ändert es sich in allen Seiten (und Templates) automatisch. Ziemlich cool, oder?

Architektur verstehen

Der Style Guide gilt als Design-Vorlage für alle Seiten (und Templates) und steht somit an erster Stelle:

Style Guide > Seite (oder Template) > Element > Unterelement > ...

Alles was du im Style Guide veränderst, wird auf alle Seiten (und Templates) und dementsprechend auf die darin enthaltenen Elemente übertragen.

Machst du jedoch in einer Seite (oder Template) bei einem Element eine andere Angabe zur gleichen Einstellung, wird der Standardwert (der vom Style Guide kommt) überschrieben. Das gilt auch für alle folgenden Unterelemente.

Deshalb ist es wichtig, dass du die Eigenschaften nur im Style Guide veränderst. Du solltest also so wenig wie möglich direkt in der Seite (oder Template) stylen, sondern alles über den Style Guide regeln.

Styles verändern

Um den Style Guide zu bearbeiten, gehe in ein Design und navigiere unter Einstellungen > Style Guide > Styles bearbeiten:

Fullscreen 09 01 19 17 00

Jetzt öffnet sich der Designer und du kannst das Aussehen der einzelnen Elemente und Komponenten wie gewohnt bearbeiten:

Screen Shot 2018 06 20 at 15.47.06

Gehen wir die Bereiche grob durch:

  • Gesamtes Dokument (Body) - Hier bestimmst du den Textstil für das gesamte Style Guide (und dementsprechend für alle Templates und Seiten). Der blaue Rahmen dient nur als Hilfestellung zur Auswahl und verschwindet nach Klick (weil du das gesamte Style Guide bearbeitest).

  • Paragraph - Ein Paragraph (oder auch Absatz) wird immer dann erstellt, wenn du in einem Text-Element im Builder oder im Content-Editor die Return-Taste drückst. Meistens wird hier der Abstand nach dem Absatz (also der Außenabstand unten) festgelegt.

  • Zitat / Blockquote, Ungeordnete Liste, Nummeriere Liste, Überschriften - Diese Elemente kannst du im Content-Editor erstellen, indem du den Text markierst und die bestimmte Formatierung auswählst. Hier im Style Guide bestimmst du das Aussehen dafür.

  • Komponenten - Hier bestimmst du das Aussehen der verschiedenen Elemente, die du aus der Sidebar per Drag and Drop reinziehen kannst.

© 2012-2018 by Chimpify UG (haftungsbeschränkt)