Generelle Infos zum Divi Builder Aufbau
Der Aufbau der Seiten mit dem Divi Builder ist gegliedert in:
Abschnitte (blau umrandet) – damit kannst du die Inhalte deiner Seite in Bereiche einteilen. Abschnitte stehen immer untereinander und gehen jeweils über die ganze Breite der Website. Die Abschnitte können (müssen aber nicht!) z. B. unterschiedliche Hintergrundfarben oder -bilder oder einen Rand haben, sodass der Besucher ganz klar sehen kann, dass ein neuer Abschnitt mit neuem Inhalt beginnt.
Zeilen (grün umrandet) – damit kannst du die Inhalte strukturieren, also in eine oder mehrere Spalten nebeneinander darstellen. In jeden Abschnitt kannst du ein oder mehrere Zeilen einfügen, die auch eine unterschiedliche Anzahl und Anordnung an Spalten haben können.
Für jede Zeile kannst du direkt beim Hinzufügen ein unterschiedliches Layout auswählen, um die Inhalte anzuordnen und z. B. kleiner oder größer anzuzeigen. Vielleicht möchtest du mal links ein kleines Foto einfügen und daneben rechts ein großes Textfeld. Oder du benötigst 3 gleich große Spalten nebeneinander:
Standardmäßig nimmt eine komplette Zeile 80% der Bildschirmbreite ein (egal, wie viele Spalten du auswählst), damit der Inhalt linls und rechts noch genügend Raum zum Atmen hat.
Module (dunkelgrau umrandet) – damit fügst du die eigentlichen Inhalte ein – Buttons, Texte, Bilder, Videos usw. In jede Zeile kannst du ein oder mehrere Module einfügen.
Alle 3 Elemente – Abschnitte, Zeilen und Module – lassen sich
- über das Fadenkreuz verschieben
- über das Zahnrad noch weiter anpassen (Inhalte, Farben, Größen, Abstände etc.)
- über das Kopiersymbol kopieren
- über das Downloadsymbol in der Bibliothek speichern (so kannst du es an anderer Stelle auf der gleichen Seite oder auf einer anderen Unterseite wieder einfügen)
- über das Papierkorbsymbol löschen
- über das X Symbol erweitern (um Abstände zu anderen Elementen zu vergrößern)
- über das 3-Punte-Symbol sind noch weitere Funktionen verfügbar, z. B. kannst du das Element auf besteimmten Geräten ausblenden, die Einstellungen kopieren und auf andere Elemente übertragen und mehr
Das Layoutsymbol 
ist nur bei Zeilen verfügbar, damit kannst du auch nachgräglich das Layout der Spalten anpassen.
Einstellungen über das Zahnrad
Bei allen 3 Elementen – Abschnitten, Zeilen und Modulen – kannst du über das Zahnrad weitere Einstellungen vornehmen.
Dabei gliedern sich die verschiedenen Einstellungen immer in 3 Tabs:
Inhalt – Hier kommen die eigentlichen Inhalte je nach Element und Typ rein: Bei einem Bildmodul wählst du das Bild aus, was gezeigt werden soll. Bei einem Textmodul gibst du den entsprechenden Text ein. Du kannst hier ebenfalls ein Hintergrundbild oder eine Hintergrundfarbe auswählen.
Die Einstellungen für eine Zeile zeigen außerdem die Spaltenstruktur und die einzelnen Zeilen an, die du über die einzelnen Zahnräder noch weiter bearbeiten kannst (falls du z. B. unterschiedliche Hintergrundfarben für die Spalten einstellen möchtest).
Vorsicht mit dem Link-Eintrag: Wenn du hier einen Link einträgst, wird der komplette Abschnitt, die komplette Zeile oder das komplette Modul verlinkt. Das macht im Normalfall nur bei einem Button und ggf. noch bei einem Bild Sinn – in fast allen anderen Fällen solltest du an dieser Stelle keinen Link eintragen.
Design – Im Designbereich kannst du je nach Element und Typ die Größe, Abstände, Schatten, Farben und Effekte einstellen.
Erweitert – Im Erweiterttab kannst du fortgeschrittene Einstellungen für Entwickler vornehmen, z. B. eine CSS Klasse hinterlegen, Scrollverhalten festlegen oder bei überlappenden Elementen einstellen, welches oben und welches unten angezeigt werden soll.
Hilfe
Fast überall findest du im Divi Builder das Fragezeichen-Symbol – ein Klick darauf bringt dich zum Divi Builder-Helfer mit (englischsprachigen) Videoanleitungen.
