Erste Schritte mit dem Divi Builder – Komplette Einführung für Einsteiger

Der Divi Builder von Elegant Themes gehört zu den leistungsstärksten visuellen Page-Buildern für WordPress. Er ermöglicht es, Webseiten direkt im Frontend zu gestalten – schnell, intuitiv und ohne Programmierkenntnisse. In dieser Anleitung lernst du die Grundlagen kennen: den Unterschied zwischen Back-End- und Visual Builder, den Aufbau mit Abschnitten, Zeilen und Modulen sowie die wichtigsten Schritte für deinen Start mit Divi.

1. Was ist der Visual Builder?

Der Divi Builder existiert in zwei Varianten: dem klassischen Back-End-Builder (im WordPress-Dashboard) und dem modernen Front-End Visual Builder.

• Back-End-Builder: Wird im WordPress-Dashboard genutzt und ersetzt den Standard-Editor. Er zeigt das Layout in einer blockbasierten Struktur. Diese Ansicht eignet sich für schnelle Änderungen, ist aber weniger visuell.
• Visual Builder: Arbeitet im Frontend, also direkt auf deiner Webseite. Du siehst Änderungen in Echtzeit – genau so, wie sie deine Besucher später sehen. Texte können direkt bearbeitet, Elemente verschoben oder gestylt werden. Das macht den Visual Builder zur bevorzugten Arbeitsweise für Designer und Agenturen.

Vorteil: Was du siehst, ist was du bekommst (WYSIWYG-Prinzip). Änderungen sind sofort sichtbar, keine Vorschau oder Zwischenschritte nötig.

2. Aktivieren des Visual Builders

Der Visual Builder lässt sich mit einem Klick aktivieren – vorausgesetzt, du bist in WordPress eingeloggt und Divi ist aktiv.

• Variante 1: Rufe eine Seite im Frontend auf und klicke oben in der WordPress-Admin-Leiste auf „Enable Visual Builder“ (bzw. „Visuellen Builder aktivieren“).
• Variante 2: Wenn du bereits im Back-End arbeitest, findest du die gleiche Schaltfläche oberhalb des Divi Builder Editors. Klicke darauf, um in den Visual Builder zu wechseln.

Tipp: Falls der Button nicht erscheint, überprüfe, ob du den Divi Builder auf der Seite aktiviert hast. Erst danach steht der Visual Builder zur Verfügung.

3. Aufbauprinzip: Abschnitte, Zeilen und Module

Das Grundprinzip von Divi basiert auf drei Hierarchieebenen:

• Abschnitte (Sections): bilden die größten Layoutblöcke einer Seite (z. B. Header, Content, Footer). Sie strukturieren die Seite in visuell getrennte Bereiche.
• Zeilen (Rows): befinden sich innerhalb von Abschnitten. Jede Zeile enthält eine Spaltenstruktur (z. B. 1-spaltig, 2-spaltig, 3-spaltig) und bestimmt die horizontale Anordnung der Inhalte.
• Module (Modules): sind die eigentlichen Inhaltselemente – Texte, Bilder, Slider, Buttons, Galerien, Videos, Blogfeeds und viele mehr. Es gibt über 40 vordefinierte Module, die du flexibel kombinieren kannst.

Diese modulare Struktur ermöglicht maximale Designfreiheit. Du kannst Abschnitte beliebig kombinieren und komplexe Layouts erstellen, die gleichzeitig klar strukturiert und responsiv sind.

4. Abschnitte: Die Grundlage jedes Layouts

Abschnitte sind der Ausgangspunkt jeder Seite. Sie dienen als Container für Zeilen und Module. Divi unterscheidet drei Typen:

• Standardabschnitte: Enthalten Zeilen mit Spalten. Ideal für normale Inhaltsbereiche.
• Abschnitte mit voller Breite (Fullwidth): Dehnen sich über die gesamte Bildschirmbreite. Perfekt für Banner, Slider oder große Header.
• Spezialabschnitte: Bieten erweiterte Layouts mit Seitenleisten (Sidebar-Strukturen) – ideal für Blogseiten oder Landingpages mit Zusatznavigation.

Erstellen eines Abschnitts: Klicke im Visual Builder auf die blaue (+)-Schaltfläche. Dein erster Abschnitt wird automatisch hinzugefügt, sobald du mit einer leeren Seite startest.

5. Zeilen: Spalten definieren und Inhalte strukturieren

Zeilen werden innerhalb von Abschnitten erstellt und bestimmen die Spaltenaufteilung. Nach dem Hinzufügen einer Zeile kannst du zwischen zahlreichen Layoutoptionen wählen (z. B. 1/2 + 1/2, 1/3 + 2/3, 3/3, 4/4).

So fügst du eine Zeile hinzu:

• Klicke in deinem Abschnitt auf die grüne (+)-Schaltfläche.
• Wähle die gewünschte Spaltenstruktur aus.
• Füge anschließend Module in die Spalten ein.

Du kannst beliebig viele Zeilen mit unterschiedlichen Spaltenstrukturen kombinieren, um kreative Layouts zu gestalten.

6. Module: Inhalte einfügen und gestalten

Module sind die kleinsten, aber wichtigsten Bausteine einer Divi-Seite. Jedes Modul bringt eigene Einstellungen für Inhalt, Design und Erweitert mit. Typische Module sind:

• Textmodul (für Überschriften, Absätze, Formatierungen)
• Bildmodul (unterstützt moderne Formate wie WebP und SVG)
• Schaltflächenmodul (CTA)
• Slider, Galerie oder Video

So fügst du ein Modul hinzu:

• Klicke in einer Spalte auf die graue (+)-Schaltfläche.
• Wähle ein Modul aus der Liste.
• Das Einstellungsfenster öffnet sich, um Inhalte, Design und Verhalten zu konfigurieren.

7. Arbeiten mit dem Visual Builder – Grundlegende Funktionen

• Drag & Drop: Verschiebe Elemente mit der Maus, um das Layout neu anzuordnen.
• Inline Editing: Klicke direkt in Texte und bearbeite sie live im Frontend.
• Design-Tab: Passe Schriftarten, Abstände, Schatten und Animationen visuell an.
• Responsive Ansicht: Teste und optimiere Darstellung für Tablet und Smartphone.
• Rückgängig-Funktion: Nutze die Historie, um Schritte schnell rückgängig zu machen.

8. Speichern & Vorschau

Am unteren Bildschirmrand befindet sich das lila Divi-Menü. Hier findest du die Schaltflächen zum Speichern, Veröffentlichen und Vorschau anzeigen. Änderungen werden sofort übernommen, sobald du speicherst. Achte darauf, regelmäßig zu speichern, besonders bei umfangreichen Layouts.

9. Fazit

Der Divi Visual Builder ist das Herzstück des modernen WordPress-Designs. Durch die direkte visuelle Bearbeitung, die modulare Struktur und die sofortige Vorschau sparst du Zeit und erhältst volle Designkontrolle. Wenn du deine ersten Schritte abgeschlossen hast, kannst du mit erweiterten Themen wie globalen Elementen, der Divi-Bibliothek und Theme Builder-Vorlagen fortfahren.

Bei Fragen oder für individuelle Divi-Schulungen kontaktiere uns unter hello@mikas.at.