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 Templates und Seiten.

Alle Styles, die du hier festlegst, brauchst du nicht jedes mal beim Erstellen eines Templates oder einer Seite 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 Templates und Seiten automatisch. Ziemlich cool, oder?

In diesem Beitrag erhältst du eine Übersicht des Style Guides und lernst, wie er funktioniert.

Bevor du anfängst, mache dich mit unserem Builder vertraut, damit du die Styles anpassen kannst: Einführung in den Builder

Architektur verstehen

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

Style Guide > Template / Seite > Element > Unterelement > ...

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

Machst du jedoch in einem Template oder einer Seite 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 im Template oder der Seite 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 20 06 18 15 45

Jetzt öffnet sich der Builder 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 Builder-Elemente, die du aus der Sidebar per Drag and Drop reinziehen kannst.

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