Theme wählen und bearbeiten

In diesem Beitrag erfährst du, wie du ein Theme hinzufügst und aktivierst sowie dein Style Guide und deine Templates bearbeitest.

Bevor du mit deinem Theme startest, solltest du verstehen, wie alles zusammenhängt. Danach weißt du, was alle wichtigen Komponenten bedeuten und in welcher Beziehung sie zueinander stehen.

Wie hängt alles zusammen?

Theme installieren

Um ein Theme zu installieren, gehst du folgende Schritte entlang:

Klicke auf das große Plus, um ein neues Theme hinzuzufügen:

Fullscreen 25 04 18 12 28

Lass dir eine Vorschau der Themes anzeigen und suche dir ein passendes Theme aus, indem du auf „Installieren“ klickst:

Fullscreen 25 04 18 12 33

Danach landest du direkt im Theme und kannst die Standard-Templates sowie deinen Style Guide bearbeiten.

Style Guide bearbeiten

Bevor du mit dem Bearbeiten deiner Templates anfängst, solltest du deinen Style Guide anpassen. Gehe dafür wie folgt vor:

Navigiere auf Einstellungen > Style Guide > Styles bearbeiten:

Fullscreen 25 04 18 12 44

Ändere zum Beispiel einmal die Button-Farbe, indem du auf das Button-Element klickst und danach in der Sidebar unter Styles > Hintergrund die Farbe änderst:

Fullscreen 25 04 18 12 55

Bearbeite danach alle weiteren Elemente, damit sie zu deinem Design passen.

Wenn du mehr über den Umgang mit unserem Baukasten erfahren möchtest, schaue dir folgenden Link an: Einführung in den Builder

Templates bearbeiten

Nachdem du deinen Style Guide angepasst hast, geht's an die Bearbeitung der Standard-Templates. Gehe dafür wie folgt vor:

Gehe in das Template "Startseite", indem du auf den Namen klickst: 

Fullscreen 25 04 18 13 03

Bearbeite jetzt zum Beispiel den Header. Mache einen Doppelklick auf das Bild und klicke danach auf "Upload", um dein Logo hochzuladen:

Fullscreen 26 04 18 09 42

Nach dem Hochladen musst du eventuell die Breite deines Logos anpassen. Navigiere dafür in der Sidebar auf Styles > Fläche > Breite und gib einen Wert in Pixel an:

Fullscreen 26 04 18 09 45

Bearbeite danach die Navigation. Mache dafür einen Doppelklick auf einen Menüpunkt und verändere den Text:

Fullscreen 26 04 18 09 47

Wenn du mehr über den Umgang mit dem Header-Element lernen möchtest, schaue dir folgenden Link an: Header-Element bearbeiten

Bearbeite abschließend einen Text. Mache dafür einen Doppelklick auf den Text und verändere ihn. Wenn du einen Text markierst, kannst du ihn formatieren:

Fullscreen 26 04 18 09 49

Abschließend speicherst du dein Template, indem du in der Sidebar auf "Speichern" klickst. Mit einem Klick auf "Zurück" landest du wieder in der Übersicht der Templates deines Themes:

Fullscreen 26 04 18 09 54

Schaue danach in das Standard-Template "Beitrag". Wie du siehst, wurden die Änderungen des Headers übernommen, weil es sich um ein globales Element handelt (deshalb die rote Markierung):

Fullscreen 26 04 18 09 51

Nächsten Schritte

Schaue jetzt alle Standard-Templates durch, bearbeite diese nach deinen Wünschen und ändere die Texte. In folgendem Beitrag findest du noch weitere Infos zum Umgang mit unserem Baukasten:
Einführung in den Builder

Hast du noch Fragen?

Noch keine Kommentare vorhanden.

Was denkst du?

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