Einführung in den Builder

Der Builder ist unser Drag-and-Drop-Baukasten. Mit diesem kannst du Templates, Calls-to-Action, Design-Seiten und E-Mails erstellen und bearbeiten.

Du hast damit sehr viele Freiheiten. Aus technischer Sicht kannst du fast alles damit umsetzen, was du dir vorstellen kannst. Leider ist die Handhabung daher etwas kompliziert und der Einstieg etwas schwierig. Aber wenn du dich eingearbeitet hast, geht alles rucki zucki! ;)

In diesem Beitrag erhältst du eine Übersicht über den Builder und lernst, wie du damit arbeiten kannst.

Design Area

Auf der linken Seite hast du eine Fläche, in der du designen kannst:

Fullscreen 25 04 18 17 24

Wenn du mit dem Mauszeiger über ein Element gehst, siehst du eine Markierung. Mit einem Klick darauf wird ein Reiter sichtbar. Hier kannst du das ausgewählte Element löschen oder duplizieren:

Fullscreen 25 04 18 17 26

Rot markierte Elemente sind globale Elemente. Das heißt, wenn du hier eine Änderung vornimmst, wird diese in allen Templates vorgenommen, wo das globale Element ebenfalls vorkommt:

Fullscreen 25 04 18 17 32

Globale Elemente verstehen und verwenden

Generell kannst du in der Design Area des Builders alle Elemente anpacken und per Drag and Drop verschieben:

Apr 26 2018 11 45 27

Mit einem Doppelklick auf ein Bild-Element, kannst du dieses austauschen bzw. ein neues hochladen:

Fullscreen 26 04 18 09 42

Mit einem Doppelklick auf ein Text-Element, kannst du dieses bearbeiten. Wenn du einen Text markierst, kannst du ihn zusätzlich formatieren:

Fullscreen 26 04 18 09 49

Einige Text-Elemente kannst du so jedoch nicht bearbeiten, da es sich um dynamische Elemente handelt. Hier mehr dazu: Dynamische Elemente verstehen und verwenden

Bei manchen Elementen, wie zum Beispiel beim Share-Buttons- oder Kommentar-Element, kannst du ein Element in diesem Element anklicken, indem du einen Doppelklick darauf machst. So hast du die Möglichkeit, dieses eine „Subelement“ zu stylen:

Fullscreen 25 04 18 17 31

Jede Aktion in der Design Area kannst du rückgängig machen. Drücke dafür einfach Strg + Z (Mac: ⌘ + Z). Zum Wiederherstellen drückst du Strg + Umschalt + Z (Mac: ⌘ + Umschalt + Z).

Auf der rechten Seite hast du die Sidebar, in der du sämtliche Styles und Einstellungen vornehmen kannst.

Hier hast du zu Beginn gleich einen Speichern-, Vorschau- und Zurück-Button:

Fullscreen 25 04 18 17 36

Danach hast du einige Reiter, mit denen du zwischen einzelnen Bereichen wechseln kannst. Gleich darunter findest du den Selector. Dort siehst du, welches Element du gerade ausgewählst hast:

Fullscreen 26 04 18 10 52

Siehst du hier ein rotes Viereck mit einem Globus, bedeutet das, dass es sich um ein globales Element handelt:

Fullscreen 26 04 18 10 53

Gehen wir jetzt die einzelnen Reiter mal durch:

Styles

Hier findest du viele Möglichkeiten, um deine Elemente zu gestalten. Am besten spielst du damit ein bisschen herum, um ein Gefühl dafür zu bekommen:

Fullscreen 25 04 18 17 45

Einstellungen

Bei den meisten Elementen hast du die Möglichkeit, einige besondere Dinge einzustellen und somit das Element zu verändern. So könntest du zum Beispiel eine Überschrift dynamisch machen:

Fullscreen 25 04 18 17 46

Elemente

Hier findest du eine Übersicht aller Elemente, Bausteine sowie deine eigenen Bausteine, die du verwenden kannst:

Fullscreen 25 04 18 17 48

Die Elemente sind fest im Builder integriert. Aus diesen besteht dein Template im Endeffekt. Eine Übersicht findest du hier:
Übersicht der Builder-Elemente

Bausteine sind themebezogene Bereiche, die bereits fertig gestaltet sind. Eigene Bausteine sind eigene Bereiche, die du gestaltet hast und öfter verwenden möchtest.

Diese Elemente, Bausteine und eigenen Bausteine kannst du einfach per Drag and Drop in die Design Area ziehen:

Apr 26 2018 11 49 24

Baumstruktur

Hier findest du eine strukturierte Übersicht aller Elemente eines Templates:

Fullscreen 25 04 18 17 50

Diese kannst du per Drag and Drop hin und her schieben. Das ist manchmal ganz nützlich, wenn du in der Design Area zu wenig Platz hast oder nur schwer an die richtige Stelle kommst:

Apr 26 2018 11 52 16

Mini Icons

Weiter unten findest du noch einige kleine Icons:

Fullscreen 26 04 18 10 43

Gehen wir diese mal einzeln durch:

  • Einstellungen - Hier gelangst du immer zu den Einstellungen und Styles des gesamten Templates.

  • HTML-Code - Hier kannst du den HTML-Code deines Templates manuell bearbeiten. Beachte jedoch, dass danach das Drag-and-Drop nicht mehr funktioniert. Außerdem hast du bei allen Elementen die Möglichkeit, das HTML einzeln bearbeiten zu können.

  • Stylesheet - Hier kannst du das Stylesheet des gesamten Templates manuell erweitern.

  • Revisionen - Neben dem Rückgängig machen mit Strg + Z (Mac: ⌘ + Z), hast du hier die Revisionen. Damit kannst du ältere Speicherbestände wiederherstellen.

Responsive

Abschließend findest du unten Icons verschiedener Geräte. Hier kannst du dein Template responsive gestalten:

Fullscreen 26 04 18 10 54

Wichtig ist hier, dass du dabei nur die Styles, nicht die Inhalte veränderst! Die Anpassungen, die du hier vornimmst, gelten für die ausgewählte Bildschirmgröße sowie für alle kleineren Größen.

Nächsten Schritte

Schaue dir jetzt folgende Beiträge an, um noch besser mit unserem Builder umzugehen:
Umgang mit Bereichen und Spalten
Umgang mit Abständen und Positionierung von Elementen

Hast du noch Fragen?

Noch keine Kommentare vorhanden.

Was denkst du?

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