WordPress Divi Theme Tutorial auf deutsch

Ganz wichtig bevor Sie mit Divi starten, installieren Sie sich das Plugin Classic Editor!

Was das WordPress Divi Theme so besonders macht, ist der Divi Page Builder. Der Divi Builder ist ein einfach zu nutzender Drag & Drop Page Builder, der den Standard WordPress Editor ersetzt. Dieser Divi Builder ermöglicht Ihnen in einer Art leichter und schneller professionelle Webseiten zu erstellen, das seinesgleichen sucht. Inzwischen können Sie mit Divi Builder Ihre Website sogar nahezu komplett allein vom Front.end aus erstellen. Aktivieren Sie dazu den Divi Visual Builder in der top WordPress Navigation. Aber zuerst zu den Basics:

Wie der Divi Page Builder funktioniert

Um den Divi Page Builder zu nutzen, müssen Sie ihn als erstes aktivieren. Sie entscheiden jeweils für jede einzelne Seite und jeden Beitrag, ob Sie den Divi Builder oder den Standard WordPress Editor nutzen möchten. Um den Divi Builder zu nutzen erstellen Sie eine neue Seite und klicken dann den lila Button „Den Divi-Builder benutzen“.

Aufbau uns Struktur von Divi Layouts

Was Sie nachfolgend sehen, ist ein einfaches mit Divi erstelltes Layout von unserer Website WPHamburg.de.  Alles was Sie mit dem Divi Builder erstellen besteht aus Sektionen, Zeilen und Modulen.

Beispielseite Divi Tutorial deutsch (Frontendansicht wphamburg.de)

Im nachfolgenden sehen Sie, wie die obige Beispiel-Website im Divi Builder aussieht. Wir klicken dazu auf Seite bearbeiten, um in die Backendansicht unserer Seite zu gelangen.

Beispielseite Divi Tutorial deutsch (Backendansicht wphamburg.de)

Sektionen (blau) sind das größte organisatorische Element im Divi Builder. Sektionen beinhalten Zeilen (grün) mit Spalten. In den Spalten befinden sich wiederum Module (grau) Auf unserer Beispielspielseite sehen Sie eine Sektion mit zwei Zeilen. Die obere Zeile besteht nur aus einer Spalte mit einem Textmodul, das die Überschrift für diese Sektion beinhaltet. Darunter sehen Sie eine Zeile mit zwei Spalten. Die linke Spalte enthält wieder ein Textmodul, die rechte Spalte enthält ein Bildmodul und darunter ein Textmodul für die Bildbeschriftung. Divi bietet dutzende verschiedener Module, die Sie in Ihre Website einfügen können. In jede Spalte können Sie beliebig viele Module einfügen, in jede Sektion beliebig viele Reihen und in jede Seite beliebig viele Sektionen. Zudem können alle Elemente auf der Seite per Drag & Drop Steuerung frei bewegt werden, d.h. Sie können z.B. das Bildmodul nach links ziehen und das Textmodul in die rechte Spalte. Dieses Verschieben funktioniert ebenso mit Zeilen und Sektionen.

Eine neue Zeile hinzufügen

Um eine neue Zeile zu einer Sektion hinzuzufügen, klicken Sie einfach auf „Zeile hinzufügen“ in Ihrer Sektion.

Nach dem Klick öffnet sich ein Popup-Fenster mit verschiedenen Spaltenlayouts, die Ihnen zur Verfügung stehen. Wir wählen z.B. ein Layout, das die Zeile in drei gleiche Spalten einteilt.

Als Ergebnis dieses Schrittes erhalten Sie eine Zeile mit drei Spalten, in die Sie nun Module einfügen können.

Module hinzufügen

Wenn Sie nun die Modul Buttons klicken, erhalten Sie ein neues Popup-Fenster mit allen 34 Modulen, die Ihnen der Divi Builder zur Auswahl bietet. Mit diesen Modulen können Sie eine Vielzahl von Funktionen in Ihre Website integrieren. Die Möglichkeiten sind so vielseitig, dass wir Ihnen hier nicht in jedes Modul vorstellen können. Probieren Sie die Module daher selbst einfach aus, um Sie kennenzulernen.

Der Einfachheit halber wählen wir für unser Divi Tutorial drei Bildmodule aus. Nach der Auswahl eines Moduls öffnen sich direkt die jeweiligen Moduleinstellungen. Auf diese können Sie auch später jederzeit wieder zugreifen, indem Sie auf das jeweilige Modul klicken. In den Moduleinstellungen finden Sie im Popup-Fenster stets drei Tabs. Die Allgemeinen Einstellungen, erweiterte Designoptionen sowie einen Tab für benutzerdefinierte CSS Eingaben. Generell finden Sie alles, was Sie zum Erstellen einer professionellen Website benötigen, in den allgemeinen Einstellungen. Die erweiterten Einstellungen bieten Ihnen darüber hinaus mehr Kontrolle über das Erscheinungsbild des jeweiligen Moduls. Dort können Sie z.B. Schriftgrößen und Schriftarten ändern, Abstände anpassen oder Farbeinstellungen ändern. Über den dritten Tab CSS Eingaben können Sie durch Eingabe von Code noch weiter in das Modullayout eingreifen.

In den allgemeinen Einstellungen zu einem Bildmodul können Sie z.B.

• ein Bild aus der Mediathek einfügen (hochladen)
• Bildbeschriftungen hinzufügen
• die Ausrichtung des Bildes festlegen
• Animationen festlegen
• entscheiden, ob das Bild bei Klick in einer Lightbox geöffnet werden soll oder Sie eine Verlinkung erstellen möchten
• unter Admin Label die Beschriftung für die Ansicht im Backend festlegen. Bei einer größeren Seite hilft Ihnen diese Beschriftung sich schneller zu orientieren

Die nützlichsten Module

• Informationstext Modul: Ermöglicht Ihnen einen Text mit Icon über oder neben dem Text anzeigen zu lassen. Ein Beispiel für des Einsatz dieses Moduls finden Sie auf der Website zu unserem Zeitmanagement Seminar.
• Handlungsaufruf: Mit diesem Modul fügen Sie einen Button ein
• Text Modul: Die Allzweckwaffe für Texte und HTML Code, z.B. um iframes einzubinden
• Bild Module: Um Bilder einzufügen
• Newsletter Modul: Um ein Formular für Newsletter einzubinden. Wie dies in der Praxis aussieht sehen Sie auf unserer Newsletter Seite.
• Kontaktormular Modul: Das Divi Formular sieht nicht nur gut aus – es bietet Ihnen auch Captcha Spam Schutz sowie eine Abfrage Logik.

Neben Einstellungen für Modulen, können Sie auch Zeilen und Sektionen über entsprechende Einstellungen individuell anpassen. Sie finden diese Einstellungen für Module, Zeilen und Sektionen stets über einen Klick auf das jeweilige „drei horizontale Striche“ Icon. Schauen sich diese Einstellungen in Ruhe an und probieren Sie sie einfach sukzessive aus. Versuchen Sie doch z.B. über die Allgemeine Einstellungen zu Sektionen, die Hintergrundfarbe der Sektion zu ändern.

Neue Sektionen hinzufügen / einen Slider einfügen

Divi bietet Ihnen drei verschiedene Arten von Sektionen: Die Standard-Sektion in blau, die volle Breite Sektion in lila (ideal für Slider) und die Spezial-Sektion mit Seitenleisten. Um einen Slider einzufügen, wählen Sie Sektion für volle Breite hinzufügen und dann das Modul Vollbreiter Slider.  Dies stellt wie folgt im Divi Builder da:

In unserer Frontendansicht sieht die gewählte Vollbreite-Sektion (lila Sektion) mit vollbreitem Slider wie folgt aus:

Mit Sektionen, Zeilen, Modulen und den jeweiligen Einstellungen haben Sie nun die wesentlichen Elemente des Divi Builders kennengelernt.

Weitere Divi Theme Einstellungen

Divi Theme Optionen

Weitere Divi Theme Einstellungen, z.B. zum Hochladen eines Logos und zum Verknüpfen von Social Media Profilen, finden Sie in Ihrem WordPress Dashboard unter dem mit der Divi Theme Aktivierung automatisch angelegten Menüpunkt Divi und Theme-Optionen. Unter Updates können Sie hier auch Ihren API Code aus Ihrem Elegant Themes Konto eingeben, um automatische Updates zu erhalten.

Beispiel den Headerbereich Ihrer Website gestalten

Theme Anpassungen

Im Dashboard unter dem Menüpunkt Design und Customizer gelangen Sie zu weiteren Divi Theme Einstellungen. Hier können Sie z.B. die Farbe Ihrer Navigation ändern und die Position Ihres Logos verändern.

Wir hoffen Ihnen mit diesem Divi Theme Tutorial in deutsch eine gute Orientierung zu bieten, mit der Sie nun selbst schnell und einfach Ihre eigene professionelle Website erstellen können. Wenn Sie weitere Unterstützung zu WordPress und Online Marketing wünschen, können Sie uns gerne eine Nachricht senden. Wir bieten Ihnen regelmäßige Seminare vor allem in Hamburg aber auch in anderen Städten. Zudem stehen wir Ihnen auch für individuelle Coachings via Skype oder Teamviewer zur Verfügung. In jedem Fall alles Gute und viel Erfolg für Ihre online Ambitionen.

Divi Tutorial deutsch als PDF herunterladen

Über den nachfolgenden Link, können Sie unser Divi Theme Tutorial auch als PDF auf Ihren Rechner herunterladen.

Divi Anleitung als PDF