Vorwort
In meinem letzten Beitrag habe ich die drei populärsten Page Builder vorgestellt und Vor- und Nachteile präsentiert. Dieser Beitrag soll die Vorteile von Divi detaillierter präsentieren und eine grundlegende Anleitung zur Nutzung von Divi liefern. Sie werden immer wieder meinen Affiliate Link in diesem Beitrag finden. Wenn Sie sich über diesen Link zum Kauf von Divi (*) entscheiden, verdiene ich eine Provision an jedem Verkauf. Verschiedene Theme-Entwickler bieten Affiliate Marketing an, doch ich habe mich gezielt auf Divi (*) spezialisiert, da es meiner Meinung nach das aktuell fortschrittlichste WordPress Theme ist, mit dem sich nahezu alle Projekte umsetzen lassen. Zudem ermöglicht die visuelle und einfach verständliche Bedienoberfläche meinen Kunden nach einem kurzen Coaching ihre Webseite selbst zu verwalten. Das spart langfristig Kosten.
Einführung
Nachdem wir Ihr Webhosting eingerichtet, WordPress und alle nötigen Plugins installiert haben, haben Sie je nach Vereinbarung schon die Möglichkeit, selbst am Aufbau der Webseite teilzunehmen. Vorab will ich erwähnen, dass alle Screenshots auf Englisch sind, da ich es persönlich bevorzuge, mit der Englischen Version von WordPress, den Themes und den Plugins zu arbeiten. Die Software wurde in dieser Sprache entwickelt und ungeeignete Übersetzungen können schnell zu Missverständnissen führen. Außerdem gibt es im Englischen viel mehr Ressourcen, auf die man zurückgreifen kann, sofern sich beim Aufbau einer Webseite Fragen ergeben.
Neue Seite erstellen
Wenn Sie sich im WordPress Backend befinden können Sie durch oben gezeigte Schaltflächen eine neue Seite erstellen. Nachdem Sie auf eine der Schaltflächen geklickt haben, werden Sie zu einer anderen Seite weitergeleitet, auf der Sie der Seite einen Namen geben können. Ist das erledigt können Sie die Änderungen speichern und „Mit Divi Builder (*) bearbeiten“ aktivieren oder die Seite anzeigen und dort den Divi Builder (*) starten.
Nun wird Ihnen folgende Ansicht angezeigt, in der Sie wählen können, ob Sie Ihre Seite ohne Vorlage bzw. Template aufbauen wollen, ein Template auswählen wollen oder eine bestehende Seite duplizieren wollen.
Divi (*) bietet sehr viele Layouts bzw. Templates an, die zu vielen Unternehmensbereichen passen. Falls Sie Ihre Webseite selbst gestalten aber nicht zu viel Zeit dafür investieren wollen, ist die mittlere Option für Sie die richtige.
Struktur
Nun will ich Ihnen die Struktur des Divi Page Builders genauer erläutern.
Divi (*) ist in verschiedene Elemente aufgeteilt. Es gibt Sektionen (in den Screenshots hellblau), Reihen (grün) und Module (grau). Außerdem gibt es noch Sonderelemente. Dazu zählen Elemente, die den gesamten Bildschirm ausfüllen (violett) und in der Hierarchie Sektion > Reihe > Modul den Platz der Sektion einnimmt. Orange Elemente hingegen nehmen in der Hierarchie den Platz der Reihen ein. Grüne Reihen bieten Ihnen üblicherweise die Möglichkeit mehrere Spalten anzulegen. Mit den orangen Reihenelementen ist es möglich unterschiedlich große Kacheln mit vertikaler Abstufung anzulegen. Jedoch ist es komplexer orange Reihenelemente für die mobilen Varianten Ihrer Webseite zu optimieren. In den Screenshots habe ich Ihnen Schaltflächen markiert, die Sie wohl am häufigsten verwenden werden.
Sektionen
Sektionen sind das Page Builder Element, das in der Hierarchie ganz oben steht. In eine Sektion kann man mehrere Reihen einbauen, die wiederum mehrere Module aufnehmen können. Über die Sektionen-Einstellungen können Sie beispielsweise Hintergründe einfügen, die sich über die komplette Breite der Webseite erstrecken sollen oder Sie können visuelle Übergangselemente am oberen und am unteren Ende der Sektion einfügen, um Ihrer Webseite mehr Struktur zu verleihen.
Reihen
Sektionen, Reihen und Module besitzen die gleichen grundlegenden Einstellungen. Überall können Hintergründe eingefügt werden, die Größe verändert werden oder Animationen eingefügt werden. Was die Reihen besonders macht ist die Möglichkeit, verschieden große Spalten anzulegen und in diese Module einzubauen.
Module
Divi (*) besitzt eine große Auswahl an nützlichen Modulen mit unzähligen Anpassungsmöglichkeiten. Hier empfehle ich Ihnen sich zu Beginn alle Elemente anzusehen und sich Gedanken über deren Anwendungen zu machen. Die Designoptionen ähneln sich in allen Modulen. Wenn Sie sich in den Einstellungen eines Moduls befinden, können Sie mit der Maus über verschiedene Textbereiche fahren. Dort erscheint ein kleiner Pinsel. Wenn die auf den Pinsel klicken, wird in den Moduleinstellungen automatisch die Option geöffnet mit der Sie die Stil des gewählten Elements anpassen können. Ein sehr nützliches Tool, das viel Zeit spart, da man sich nicht immer durch die gesamten Designoptionen klicken muss.
Module besitzen einen großen Vorteil. Globale Designoptionen sind möglich.
Globale Designoptionen in Modulen ermöglichen es die grundlegende Corporate Identity einer Webseite festzulegen. Wenn Sie beispielsweise die globalen Einstellungen des Textmoduls bearbeiten, können Sie der regulären Paragraphenschrift, sowie den H1-, H2-, H3-, usw. Überschriften unterschiedliche Schriftarten, Schriftgrößen und sogar unterschiedliche mobile Designoptionen zuweisen. Wenn Sie die Einstellungen speichern, werden alle Änderungen, die Sie vorgenommen haben auf alle Textmodule Ihrer Webseite angewendet. So können Sie sicherstellen, dass Ihre Webseite ein einheitliches Design erhält. Für Buttons oder andere Module gilt dasselbe.
Update
Der Button für globale Einstellungen von Modulen wurde durch ein Drop-Down Menü unter dem Modulnamen ersetzt. Die neue Funktion ermöglicht es nicht nur eine Vorlage für ein Modul zu erstellen, sondern mehrere. Will man beispielsweise einen Button designen und benötigt für verschiedene Hintergründe einen hellen Button mit dunkler Schrift und einen dunklen Button mit heller Schrift, so ist das nun möglich. Über das Stift-Symbol gelangen Sie zu den Einstellungen der jeweiligen Vorlage. Über das Dropdown-Menü können Sie das Design wählen, das sie auf das Modul anwenden wollen. Wenn Sie die Designoptionen eines speziellen Moduls ändern, werden diese überschrieben – also nicht von der Vorlage beeinflusst. Auch die technische Umsetzung wurde deutlich verbessert. Bevor es globale Einstellungen oder die neuen Modulvorlagen gab, musste man jedes Modul einzeln designen bzw. die Designoptionen von gleichen Modulen auf neue Module übernehmen. Dabei wurden für jedes Modul CSS-Klassen angelegt. Wenn eine Webseite viele CSS-Klassen laden muss, beeinträchtigt das die Ladezeit der Webseite und damit auch das Suchmaschinenranking. Nun werden durch die neuen Vorlagen CSS-Klassen für jede Vorlage erstellt. Da man die Vorlagen für mehrere Module gleichzeitig verwenden kann, spart man sich damit je nach Umfang der Webseite eine beachtliche Anzahl an Codezeilen, die von den Endgeräten geladen werden müssen und optimiert dadurch die Ladezeiten.
Globale Elemente
Globale Elemente wirken sich wie globale Moduleinstellungen auf die gesamte Webseite aus. Jedoch beeinflussen die Einstellungen nicht alle anderen Elemente der gleichen Kategorie, sondern nur die Elemente, die als globales Element gekennzeichnet sind. Sie können entweder Sektionen, Reihen oder auch nur einzelne Module in globale Elemente umwandeln. Dies ist möglich, indem Sie Ihr gewünschtes Element in der Bibliothek speichern und dabei die Option „als globales Element speichern“ wählen.
Sobald Sie das Element gespeichert haben können Sie es auf jeder möglichen Unterseite Ihrer Webseite aus der Bibliothek einfügen. Ändern Sie das Element auf einer beliebigen Seite, so ändert es sich automatisch auf allen anderen Seiten, auf denen es platziert wurde. Dieses Feature ist besonders praktisch für Call-To-Action Elemente oder Werbeanzeigen. Wenn Sie ein Element ohne die globale Option speichern, können Sie es ebenso auf jeder beliebigen Seite einfügen. Änderungen an diesem Element werden für andere Seiten aber nicht übernommen. Diese Funktion ist hilfreich, wenn Sie sich Vorlagen anlegen wollen, mithilfe derer Sie Ihre Webseite aufbauen. Sie erkennen globale Elemente daran, dass sie hellgrün im Page Builder erscheinen.
Im nächsten Beitrag wird es darum gehen, wie Sie den Divi Theme Builder (*) nutzen können, um noch produktiver und effizienter zu arbeiten.
Sollten Sie Fragen haben können Sie sich gern jederzeit an uns wenden. Wir werden Sie gerne unterstützen.
Provisions-Links / Affiliate-Links
Die mit Sternchen (*) gekennzeichneten Links sind Provisions-Links, auch Affiliate-Links genannt. Wenn Sie auf einen solchen Link klicken und auf der Zielseite etwas kaufen, bekommen wir vom betreffenden Anbieter oder Online-Shop eine Vermittlerprovision. Es entstehen für Sie keine Nachteile beim Kauf oder Preis.
