zum Videokurs für Einsteiger

Lernen Sie die Grundlagen des Divi Builders in dem englischsprachigen Videokurs von Elegant Themes. Sie erfahren alles über den Aufbau und die Funktionsweise von Divi.

1. Visuellen Builder aktivieren

Stellen Sie sicher, dass Sie auf Ihrer Webseite als Admin oder Redakteur angemeldet sind.

So gelangen Sie zum Adminbereich:
1. Um das Admin-Panel zu erreichen, tippen Sie die URL zu Ihrer Webseite in die Adresszeile – aber rufen Sie die Seite noch nicht auf. Ein Beispiel wäre “meine-homepage.de”. 

2. Hängen Sie dieser URL-Struktur nun den Dateinamen “/wp-admin” an. Mit der exemplarischen URL ergäbe sich dieser Link: “meine-homepage.de/wp-admin”.

3. Loggen Sie sich mit Ihren Nutzerdaten ein.

Während Sie in Ihrem WordPress-Dashboard angemeldet sind, können Sie zu einer beliebigen Seite im Frontend Ihrer Website navigieren und in der oberen Verwaltungsleiste auf die Schaltfläche “Visuellen Builder aktivieren” klicken, um den visuellen Builder zu starten.

Wenn Sie Ihre Seite im Backend bearbeiten, können Sie zum Visual Builder wechseln, indem Sie auf die Schaltfläche “Edit With The Divi Builder” klicken.

 

2.1 Bestehende Inhalte bearbeiten

Im visuellen Builder lassen sich bestehende Inhalte simpel und ohne Programmierkenntnisse bearbeiten.

  • Text
    Einen bestehenden Text können Sie direkt bearbeiten. Klicken Sie an die Stelle, an der Sie etwas ändern möchten und geben Sie Ihren neuen Text ein
    .
  • Medien – Bilder & Videos
    Bewegen sie den Cursor über das Modul, das Sie bearbeiten möchten. Es taucht eine graue Schaltfläche auf, auf der Sie das Zahnrad-Symbol anklicken. Nun öffnet sich eine neue Schaltfläche mit den Modul-Einstellungen. Unter dem Reiter “Bild” bzw. “Video” haben Sie die Möglichkeit, das Objekt neu zu verlinken. Klicken Sie auf das Zahnradsymbol im Vorschaufenster in der Schaltfläche oben rechts, um den Inhalt zu ersetzen. Jetzt können Sie ein neues Bild/Video aus Ihrer Medienübersicht auswählen. Per Drag-and-Drop können Sie hier auch neue Dateien hochladen.
  • Hintergründe
    Bewegen sie den Mauszeiger über das Objekt, das Sie bearbeiten möchten. Es taucht eine Schaltfläche auf, auf der Sie das Zahnrad-Symbol anklicken. Nun öffnet sich eine neue Schaltfläche mit Einstellungen. Unter dem Reiter “Hintergrund” haben Sie die Möglichkeit, eine Farbe, einen Verlauf, ein Bild oder ein Video als Hintergrund zu wählen.

Änderungen speichern:
Klicken Sie auf das violette Dock-Symbol unten auf dem Bildschirm. Dadurch wird die Einstellungsleiste erweitert und Sie können rechts unten auf “Speichern” oder “Veröffentlichen” klicken.

 

Unter 2.4 können Sie nachlesen, wie Sie Objekte genauer konfigurieren. Dazu sollten Sie jedoch 2.2 gelesen haben.

 

 

2.2 Der Visuelle Builder – Grundlagen

Das Baukastensystem Divi basiert auf drei grundlegenden Bausteinen. Das sind Abschnitte, Zeilen und Module.

 

Abschnitte

Die grundlegendsten und größten Bausteine, die beim Entwerfen von Layouts mit Divi verwendet werden, sind Abschnitte. Diese werden verwendet, um große Gruppen von Inhalten zu erstellen. Sie sind das erste, was Sie Ihrer Seite hinzufügen. Es gibt drei Arten von Abschnitten: Regulär, Spezial und Volle Breite.

  • Reguläre Abschnitte beinhalten eine oder mehrere Zeilen.
  • Abschnitte mit voller Breite bestehen aus Modulen mit voller Breite, die den gesamten Bildschirm ausfüllen.
  • Spezielle Bereiche ermöglichen erweiterte Layouts mit Verwendung einer oder mehrerer Seitenleisten.

Zeilen

Zeilen befinden sich innerhalb von Abschnitten und Sie können beliebig viele Zeilen innerhalb eines Abschnitts platzieren. Es gibt viele verschiedene Spaltentypen zur Auswahl. Nachdem Sie eine Spaltenstruktur für Ihre Zeile definiert haben, können Sie Module in eine gewünschte Spalte einfügen. Die Anzahl der Module, die Sie in einer Spalte platzieren können, ist nicht begrenzt.

 

Module

Module sind die Inhaltselemente, aus denen sich Ihre Website zusammensetzt. Jedes Modul, das Divi bereitstellt, passt in jede Spaltenbreite. Sie können grundlegende Module wie Texte, Bilder und Schaltflächen oder erweiterte Module wie Slider oder Galerien verwenden.

 

2.3 Neue Inhalte hinzufügen

(+) Abschnitte hinzufügen

Bevor Sie etwas zu Ihrer Seite hinzufügen können, müssen Sie zunächst einen Abschnitt hinzufügen. Abschnitte können durch Klicken auf die blaue Schaltfläche (+) hinzugefügt werden. Wenn Sie den Mauszeiger über einen bereits auf der Seite vorhandenen Abschnitt bewegen, wird darunter eine blaue Schaltfläche (+) angezeigt. Wenn Sie darauf klicken, wird ein neuer Abschnitt unterhalb des Abschnitts hinzugefügt, über dem Sie sich gerade befinden.

 

(+) Zeilen erstellen 

Nachdem Sie den ersten Abschnitt hinzugefügt haben, können Sie darin Zeilen hinzufügen. Ein Abschnitt kann eine beliebige Anzahl von Zeilen enthalten. Sie können Zeilen verschiedener Spaltentypen erstellen, um verschiedene Layouts zu entwickeln.
Um eine Zeile hinzuzufügen, klicken Sie auf die grüne Schaltfläche (+) in einem leeren Abschnitt oder auf die grüne Schaltfläche (+), die unter der Zeile angezeigt wird, wenn Sie mit der Maus über eine aktuelle Zeile fahren. Wenn Sie auf die grüne Schaltfläche (+) geklickt haben, werden Sie mit einer Liste von Spaltentypen begrüßt. Wählen Sie die gewünschte Spalte aus und Sie können Ihr erstes Modul hinzufügen.

(+) Module hinzufügen

Module können innerhalb von Zeilen hinzugefügt werden und jede Zeile kann eine beliebige Anzahl von Modulen aufnehmen. Module sind die Inhaltselemente Ihrer Seite. Divi enthält über 40 verschiedene Elemente. Sie können grundlegende Module wie Text, Bilder und Schaltflächen oder erweiterte Module wie Slider oder Galerien verwenden.

Um ein Modul hinzuzufügen, klicken Sie auf die graue Schaltfläche (+) in einer leeren Spalte oder klicken Sie auf die graue Schaltfläche (+) unter einem bestehenden Modul.

Sobald Sie auf die Schaltfläche geklickt haben, werden Sie von einer Liste mit Modulen begrüßt. Wählen Sie das gewünschte Modul aus und es wird zu Ihrer Seite hinzugefügt. Das Einstellungsfeld für das Modul wird angezeigt. Über dieses Einstellungsfeld können Sie mit der Konfiguration Ihres Moduls beginnen.

 

 

2.4 Konfigurieren und Anpassen von Abschnitten, Zeilen und Modulen

Jeder Abschnitt, jede Zeile und jedes Modul kann auf verschiedene Arten angepasst werden. Sie können auf das Einstellungsfeld eines Elements zugreifen, indem Sie auf das Zahnradsymbol klicken, wenn Sie den Mauszeiger über ein Element auf der Seite bewegen.

Dadurch wird das Einstellungsfeld für das angegebene Element geöffnet. Jedes Einstellungsfenster ist in drei Registerkarten unterteilt: Inhalt, Design und Erweitert. Mit jeder Registerkarte können Sie schnell und einfach auf die vielfältigen Einstellungen von Divi zugreifen und diese anpassen. Auf der Registerkarte “Inhalt” können Sie natürlich Inhalte wie Bilder, Videos, und Links hinzufügen. Auf der Registerkarte “Design” sind alle integrierten Designeinstellungen für jedes Element abgelegt. Je nachdem, was Sie gerade bearbeiten, können Sie eine Vielzahl von Designeinstellungen mit einem Klick steuern. Dazu gehören: Typografie, Abstand, Farben und mehr. Die Registerkarte “Erweitert” bietet noch mehr Kontrolle. Hier sollten allerdings Programmierkenntnisse vorliegen.

Klicken Sie auf das Häkchen im grünen Feld, um Ihre Änderungen zu speichern. Mit einem Klick auf das Kreuz unten links, werden Ihre Änderungen verworfen.

 

 

2.5 Speichern und Seiteneinstellungen

Um auf die allgemeinen Seiteneinstellungen zuzugreifen, klicken Sie auf das violette Dock-Symbol unten auf dem Bildschirm. Dadurch wird die Einstellungsleiste erweitert und Ihnen stehen verschiedene Optionen zur Verfügung. Sie können Ihre Seiteneinstellungen öffnen, indem Sie auf das Zahnradsymbol klicken. Hier können Sie Dinge wie Hintergrundfarbe und Textfarbe anpassen. Außerdem finden Sie die Schaltflächen “Speichern” und “Veröffentlichen” sowie responsive Vorschau-Schaltflächen.

Divi Builder Videokurs für Einsteiger