FAQ & News

Deine Wissensquelle für Web & WordPress
Im Blog Archiv findest du sämtliche Beiträge zu Webdesign, Hosting, WordPress-Tipps und digitalen Trends. Durchsuche Themen nach Kategorien oder nutze die Übersicht, um genau das zu finden, was dich aktuell interessiert. 

So erstellen Sie Ihre erste Seite in Divi – Schritt für Schritt erklärt

Mit dem Divi Builder können Sie in wenigen Minuten Ihre eigene, professionell aufgebaute Webseite erstellen – ganz ohne Programmierkenntnisse. Jede Seite besteht aus drei Grundbausteinen: Abschnitten (Sections), Zeilen (Rows) und Modulen (Modules). Diese Struktur gibt Ihnen volle Kontrolle über Layout, Design und Inhalte. In dieser Anleitung erfahren Sie, wie Sie Ihre erste Seite aufbauen, Elemente hinzufügen und anpassen sowie Ihre Arbeit richtig speichern.

1. Aufbauprinzip von Divi verstehen

Der Divi Builder funktioniert nach einem klaren logischen Prinzip:

  • Abschnitte (Sections) – der äußere Rahmen, der große Inhaltsbereiche bildet (z. B. Header, Content, Footer).
  • Zeilen (Rows) – befinden sich innerhalb der Abschnitte und definieren die Spaltenstruktur (z. B. 1 Spalte, 2 Spalten, 3 Spalten).
  • Module (Modules) – sind die eigentlichen Inhaltselemente wie Texte, Bilder, Buttons, Slider oder Galerien.

Diese klare Trennung ermöglicht ein flexibles und zugleich übersichtliches Layoutmanagement – ideal für Webdesigner und Einsteiger gleichermaßen.

2. Hinzufügen Ihres ersten Abschnitts

Bevor Sie Inhalte platzieren, muss zunächst ein Abschnitt erstellt werden. Jeder Abschnitt ist ein horizontaler Inhaltsblock, in dem Sie Zeilen und Module anordnen.

  • Klicken Sie auf die blaue (+)-Schaltfläche, um einen neuen Abschnitt hinzuzufügen.
  • Wenn bereits Abschnitte existieren, wird beim Überfahren eines Abschnitts mit der Maus eine weitere blaue Schaltfläche darunter angezeigt. Durch Klicken fügen Sie dort einen neuen Abschnitt hinzu.
  • Bei einer komplett neuen Seite wird automatisch der erste Abschnitt erstellt – Sie können sofort weiterarbeiten.

Tipp: Verwenden Sie unterschiedliche Abschnittstypen (Standard, Spezial oder Volle Breite), um variierende Layoutbereiche zu gestalten.

3. Hinzufügen Ihrer ersten Zeile

Innerhalb eines Abschnitts können Sie eine oder mehrere Zeilen anlegen. Jede Zeile definiert die Spaltenaufteilung – beispielsweise 1-spaltig für einen Titelbereich oder 3-spaltig für Services.

  • Klicken Sie im Abschnitt auf die grüne (+)-Schaltfläche.
  • Es erscheint eine Auswahl verschiedener Spaltenlayouts (z. B. 1/2 + 1/2, 1/3 + 2/3, 3/3 usw.).
  • Wählen Sie das gewünschte Layout aus, um die Zeile einzufügen.

Sie können beliebig viele Zeilen mit unterschiedlichen Spaltenkombinationen in einem Abschnitt verwenden. So lassen sich flexible, responsive Layouts aufbauen, die auf Desktop, Tablet und Smartphone optimal aussehen.

4. Hinzufügen Ihres ersten Moduls

Module sind das Herzstück jeder Seite – hier entsteht der eigentliche Inhalt. Der Divi Builder bietet über 40 Module zur Auswahl, darunter:

  • Basismodule: Text, Bild, Schaltfläche, Trennlinie
  • Erweiterte Module: Slider, Video, Galerie, Portfolio, Kontaktformular
  • WooCommerce-Module: Produkt-Grid, Warenkorb, Kasse

So fügen Sie ein Modul hinzu:

  • Klicken Sie in einer Spalte auf die graue (+)-Schaltfläche.
  • Wählen Sie das gewünschte Modul aus der Liste aus.
  • Das Einstellungsfenster des Moduls öffnet sich automatisch, damit Sie Inhalte und Design anpassen können.

5. Module, Zeilen und Abschnitte anpassen

Alle Elemente können Sie jederzeit bearbeiten, indem Sie auf das Zahnradsymbol klicken, das erscheint, wenn Sie mit der Maus über das jeweilige Element fahren. Jedes Einstellungsfenster ist in drei Registerkarten unterteilt:

  • Inhalt: Hier fügen Sie Texte, Bilder, Videos und Links ein.
  • Design: Unter diesem Tab passen Sie Typografie, Farben, Abstände, Schattierungen, Rahmen und Animationen an.
  • Erweitert: Für Profis – hier lassen sich benutzerdefiniertes CSS, Sichtbarkeit nach Gerät und Scroll-Effekte einstellen.

Hinweis: Divi unterstützt auch Inline-Editing – klicken Sie direkt in einen Textblock, um Inhalte sofort zu ändern.

6. Speichern, Vorschau und Veröffentlichungsoptionen

Am unteren Bildschirmrand finden Sie das lila Dock-Symbol. Wenn Sie darauf klicken, öffnet sich die Steuerleiste mit den wichtigsten Optionen:

  • Seiteneinstellungen: (Zahnradsymbol) – ändern Sie Hintergrundfarbe, Textfarbe oder Seitenbreite.
  • Speichern: Klicken Sie auf das Häkchen-Symbol, um Ihre Änderungen dauerhaft zu speichern.
  • Veröffentlichen: Wenn Ihre Seite fertig ist, veröffentlichen Sie sie mit einem Klick.
  • Responsive Vorschau: Testen Sie die Darstellung auf Desktop, Tablet und Smartphone direkt im Builder.

7. Tipps für den optimalen Workflow

  • Verwenden Sie Vorlagen (Layouts), um schneller zu starten – diese lassen sich individuell anpassen.
  • Speichern Sie häufig genutzte Abschnitte in der Divi Bibliothek für künftige Projekte.
  • Verwenden Sie globale Elemente für Bereiche, die auf mehreren Seiten gleich bleiben sollen (z. B. Kontaktleisten oder Fußzeilen).
  • Nutzen Sie WebP und SVG für optimierte Ladezeiten Ihrer Medien.

Fazit

Der Aufbau einer Seite in Divi ist logisch, intuitiv und schnell zu erlernen. Mit Abschnitten, Zeilen und Modulen gestalten Sie im Handumdrehen ein sauberes Layout. Sobald Sie die Grundlagen verstanden haben, können Sie eigene Templates entwickeln, globale Elemente verwenden und mit Design-Einstellungen oder benutzerdefiniertem CSS noch professionellere Ergebnisse erzielen.
Wenn Sie Hilfe bei der Umsetzung benötigen, kontaktieren Sie uns gerne unter hello@mikas.at.

 0 0