Webseite mit DIVI bearbeiten

• Seite im DIVI-Builder öffnen
• Aufbau einer DIVI-Seite verstehen
• Text auf der Seite bearbeiten
• Bilder austauschen
• Buttons und Links ändern
• Layout anpassen (Spalten/Reihenfolge/Abstände)
• Response Ansicht prüfen (Desktop / Tablet / Mobil)
• Header und Footer bearbeiten (Theme Builder)
• Best Practise für DIVI-Redakteure

Seite im DIVI-Builder öffnen

Um Inhalte zu bearbeiten, muss zunächst der DIVI-Builder gestartet werden. Öffnen Sie im Frontend Ihrer Webseite die gewünschte Seite. Klicken Sie oben in der WordPress-Adminleiste auf "Visual Builder aktivieren"

Alternativ:

• Dashboard ➟ Seiten
• Seite auswählen ➟ Bearbeiten
• Divi Builder verwenden anklicken

Die Seite lädt anschließend im visuellen Bearbeitungsmodus.

Aufbau einer DIVI-Seite verstehen

DIVI arbeitet immer mit drei Ebenen

SEKTION Größter Container für einen Seitenabschnitt (Blau)

ZEILE Definiert die Spalten innerhalb der Sektion (Grün)

MODUL Das eigentliche Inhaltselement (Text, Button, Bild, etc.) (Schwarz)

Alle Inhalte befinden sich stets in Modulen. Wenn Sie etwas ändern möchten. bearbeiten Sie fast immer ein Modul.

Text auf der Seite bearbeiten

So ändern Sie Texte:

1. Mit der Maus über den Text fahren
2. Direkt hineinblicken und schreiben

ODER

1. Textmodul öffnen (Zahnrad-Symbol)
2. Reiter Inhalt
3. Text bearbeiten
4. Fenster schließen

Änderungen sind sofort sichtbar.

Bilder austauschen

Zum Austauschen eines Bildes:

1. Bild anklicken
2. Zahnrad anklicken
3. Bild auswählen
4. Neues Bild hochladen oder aus Mediathek wählen
5. Speichern

TIPP: Verwenden Sie optimierte Bilder (WebP oder komprimiertes JPG), damit die Seite schnell lädt.

Buttons und Links ändern

So ändern Sie einen Button:

1. Button anklicken
2. Zahnrad anklicken
3. Reiter Inhalt
4. Feld Link-URL anpassen
5. Schließen

Optional im Reiter Design Farben oder Größe ändern.

Layout anpassen (Spalten/Reihenfolge/Abstände)

Module verschieben

Element anklicken und per Drag-and-Drop an neue Position ziehen.

Spalten ändern

Zeile öffnen ➟ Layout wählen oder neue Zeile erstellen.

Abstände einstellen

Element öffnen ➟ Design ➟ Abstand

• Padding = Innenabstand
• Margin = Außenabstand

Response Ansicht prüfen (Desktop / Tablet / Mobil)

Unten im Builder finden Sie die Geräte-Icons:

• Desktop
• Tablet
• Smartphone

Hier prüfen Sie:

• Schriftgrößen
• Zeilenumbrüche
• Abstände
• Bildgrößen

Viele Einstellungen können je Gerät separat gesetzt werden.

Header und Footer bearbeiten (Theme Builder)

Header und Folter werden meist nicht direkt auf der Seite bearbeitet. 

Gehen Sie zu: 

Dashboard ➟ DIVI ➟ Theme Builder

Dort:

• Global Header bearbeiten
• Global Footer bearbeiten

Änderungen gelten normalerweise für die gesamte Webseite.

Best Practise für DIVI-Redakteure

• Häufig genutzte Elemente in DIVI Library speichern
• Vor Änderungen Module duplizieren
• Große Layoutänderungen zuerst auf Testseiten durchführen
• Mobile Ansicht immer kontrollieren