Divi Tutorial deutsch – einfach Ihre eigene professionelle Website erstellen

Herzlich Glückwunsch, mit Divi haben Sie sich mit Sicherheit für eines der besten WordPress Themes entschieden. In unserem Divi Tutorial auf deutsch zeigen wir Ihnen Schritt für Schritt und mit vielen Screenshots die Grundlagen für die Nutzung von Divi. So können Sie bereits in nur ca. einer halben Stunde Ihre eigene professionelle Website mit Divi erstellen. Sie können unser Divi Theme Tutorial am Ende der Seite auch als PDF herunterladen.
Divi WordPress ThemePartnerangebot Elegant Themes

Als praktisches Beispiel für unsere Divi Theme Anleitung dient die WordPress Landingpage für unser regelmäßiges WordPress Seminar in Hamburg. Unser deutsches Divi Theme Tutorial haben wir als kompakte Zusammenfassung in Anlehnung an das sehr gute original Divi Tutorial von Elegant Themes erstellt. Dieses finden Sie im nachfolgenden Video. Das Divi Theme Tutorial in deutsch finden Sie im Anschluss unter dem Video.

Divi Theme Tutorial auf deutsch

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.

Wie der Divi Page Builder funktioniert

Um den Divi Page Builder zu nutzen, müssen Sie ihn als erstes kurz 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.

Divi Tutorial deutsch

Beispielseite Divi Tutorial deutsch (Frontendansicht wphamburg.de)

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

Divi Tutorial deutsch

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 Zeilen und 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.
Module einfügen - Divi Theme Tutorial
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.
Modul Einstellungen - Divi Tutorial

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

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:

Divi Slider einfügen - Divi Tutorial

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

 

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.

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

Tipps zu Divi, WordPress und Online Marketing erhalten

Wenn Ihnen unser kostenloses Divi Theme Tutorial gefallen hat, abonnieren Sie doch unseren Newsletter oder folgen Sie SkillDay auf Facebook, Twitter oder Google+.

Kostenloser Newsletter für Tipps zu WordPress, Divi und SEO

Wenn Ihnen unser Divi Tutorial auf deutsch gefallen hat, dann abonnieren Sie doch unseren kostenlosen Newsletter. Wir geben Ihre Daten nicht weiter. Eine Abmeldung ist jederzeit möglich. Zur Anmeldung:

Das könnte Sie auch interessieren:
Lernen Sie die Tools und Methoden zur Online Wettbewerbsanalyse kennen und verstehen Sie, was Ihre Wettbewerber erfolgreich macht.

Seminartermine & ausgewählte Tipps

Tragen Sie sich in unseren kostenlosen Newsletter ein und erhalten Sie unsere aktuellen Seminartermine für WordPress, Online Marketing, Excel, Zeitmanagement sowie weitere Themen und Tipps. 

Sie haben sich erfolgreich eingetragen. Bitte klicken Sie noch auf den Link in der Bestätigungsmail, um Ihre Eintragung abzuschließen.