Divi Tutorial deutsch einfach Ihre eigene professionelle Website erstellen

Transkript

1 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. 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 Video unter 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.

2 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 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 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.

3 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.

4 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 jedes Modul vorstellen können. Probieren Sie die Module daher selbst einfach aus, um Sie kennzulernen. Der Einfachheit halber wählen wir für unser Beispiel 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.

5 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: In unserer Frontendansicht sieht die gewählte Vollbreite-Sektion (lila Sektion) mit vollbreitem Slider wie folgt aus:

6 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.