# Die DIVI-Oberfläche verstehen

Lernen Sie den Aufbau einer DIVI-Seite sowie die unterschiedlichen Farben, Bedienelemente und Einstellungsbereiche kennen. Das Kapitel zeigt Ihnen welche Bereiche Sie sicher bearbeiten können und bei welchen Einstellungen Vorsicht geboten ist.

# Aufbau einer DIVI-Seite

Eine DIVI-Seite besteht aus ineinander verschachtelten Bausteinen. Diese Reihenfolge ist wichtig, weil Einstellungen eines äußeren Elements auch die enthaltenen Elemente beeinflussen können:

- Sektion: Größter horizontaler Seitenbereich
- Zeile: legt Breite und Spaltenaufteilung innerhalb einer Sektion fest
- Spalte: enthält die eigentlichen Inhalte
- Modul: konkreter Inhalt, zum Beispiel Text, Bild, Button oder Kontaktformular

![Sektion, Zeile, Spalte und Modul bilden die Grundstruktur einer DIVI-Seite](https://hilfe.zachrau-kommunikation.de/uploads/images/gallery/2026-08/scaled-1680-/txZwYVq4cJvPx4is-bild-2.jpg)

<table border="1" id="bkmrk-merksatz%3A-f%C3%BCr-normal" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.880952%;"></col></colgroup><tbody><tr><td><span style="color: rgb(132, 63, 161);">Merksatz:</span>

<span style="color: rgb(132, 63, 161);">Für normale Inhaltsänderungen arbeiten Sie fast immer im dunkelgrauen Text- oder Bildmodul. Blaue Sektionen und grüne Zeilen lassen Sie unverändert.</span>

</td></tr></tbody></table>

# Farbcodes im Visual Builder

- Blau: normale Sektion
- Grün: Zeile
- Dunkelgrau: Modul
- Violett: Vollbreiten-Sektion oder zentrale DIVI-Bedienleiste
- Orange: Spezialsektion mit komplexerer Spaltenstruktur

![Bild 3.png](https://hilfe.zachrau-kommunikation.de/uploads/images/gallery/2026-08/scaled-1680-/vLqYQVeVu8fq54VT-bild-3.png)

# Die wichtigsten Symbole am Modul

Fahren Sie mit der Maus über einen Text oder ein Bild. Am jeweiligen Modul erscheint eine kleine dunkelgraue Bedienleiste. Für die tägliche Pflege benötigen Sie vor allem:

- Zahnrad: Einstellungen des Moduls öffnen
- Kreuzpfeile: Modul verschieben
- zwei Rechtecke: Modul duplizieren
- Papierkorb: Modul löschen
- drei Punkte oder Rechtsklick: weitere Funktionen, etwa Kopieren oder Zurücksetzen

<table border="1" id="bkmrk-vorsicht%3A-papierkorb" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.880952%;"></col></colgroup><tbody><tr><td><span style="color: rgb(224, 62, 45);">Vorsicht:</span>

<span style="color: rgb(224, 62, 45);">Papierkorb-Symbole gibt es auf mehreren Ebenen. Prüfen Sie vor jedem Löschen die Farbe der Bedienleiste: Dunkelgrau löscht ein Modul, Grün eine ganze Zeile und Blau eine ganze Sektion.</span>

</td></tr></tbody></table>

# Einstellungsfenster: Inhalte, Design, Erweitert

![Bild4.jpg](https://hilfe.zachrau-kommunikation.de/uploads/images/gallery/2026-08/scaled-1680-/7ydHVddUEtuZhl9t-bild4.jpg)

Jedes DIVI Element besitzt die Reiter Inhalt, Design und Erweitert

- Inhalt (Content): Text, Bild, Link und inhaltliche Angaben
- Design: Schrift, Farbe, Größe, Ausrichtung, Abstände und Effekte
- Erweitert (Advanced): CSS, Sichtbarkeit, Position und technische Einstellungen

<table border="1" id="bkmrk-kundenbereich%3A-nutze" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.880952%;"></col></colgroup><tbody><tr><td><span style="color: rgb(230, 126, 35);">Kundenbereich:</span>

<span style="color: rgb(230, 126, 35);">Nutzen Sie für normale Inhaltsänderungen hauptsächlich "Inhalt". Im Reiter "Design" ändern Sie nur klar bezeichnete Werte. "Erweitert" bleibt unverändert.</span>

</td></tr></tbody></table>