Divi Theme Builder

Andreas Blum

18.04.2020

Mein Name ist Andreas Blum – Freelancer im Bereich Webdesign, -entwicklung und Marketing. Mit meinem Unternehmen finde ich für Start-Ups und bestehende Unternehmen moderne Software-Lösungen passend zu ihren Ansprüchen, damit Prozesse automatisiert und Arbeitszeit gespart werden kann.

Was ist der Divi Theme Builder?

In einem früheren Beitrag habe ich bereits das Divi Theme (*) vorgestellt. Nun möchte ich ausführlich die Vorteile eines speziellen Features des Divi Themes (*) erläutern. Der Divi Theme (*) Builder ermöglicht es individuelle Vorlagen für Ihre Webseite zu erstellen. Diese Vorlagen können wie gewohnt und ohne Einschränkungen mit dem Divi Builder (*), der auch der regulären Bearbeitung der verschiedenen Unterseiten dient, erstellt werden. Sie können beispielsweise eine Vorlage für den Header oder den Footer Ihrer Webseite erstellen. Diese Vorlage können Sie entweder auf die gesamte Webseite anwenden oder aber nur bestimmten Seiten zuweisen. So können Sie auf diversen Unterseiten Ihrer Webseite verschiedene Header oder Footer platzieren. Noch nützlicher ist der Divi Theme Builder (*) bei der Erstellung von Vorlagen für Blog-Beiträge oder Produkte Ihres E-Commerce Stores. Der Divi Theme Builder (*) funktioniert optimal mit WooCommerce. Es können außerdem Vorlagen für die 404-Seite, Archiv-Seiten und die Shop-Seite erstellt werden, die normalerweise nicht so einfach in WordPress bearbeitet werden können. Damit die Inhalte Ihrer Blog-Beiträge oder Produkte auch richtig angezeigt werden, haben Sie die Möglichkeit Ihre Vorlagen mittels dynamischer Inhalte zu gestalten.

Wie erstelle ich eine Vorlage?

Eine Vorlage im Divi Theme Builder (*) kann wie folgt erstellt werden. Navigieren Sie im WordPress Dashboard zu Divi > Divi Theme Builder. Dort finden Sie eines oder mehrere Felder mit jeweils drei Bereichen. Dem Header-, dem Content- und dem Footer-Bereich. Header und Footer können global für die gesamte Webseite erstellt werden. Wenn Sie das wollen werden die Vorlagen in jedes neue Feld, das Sie im Divi Theme Builder (*) anlegen, übernehmen. Wenn Sie keinen Header oder Footer im Divi Theme Builder (*) erstellen, werden der Standard Header und Footer des Divi Themes (*) beibehalten. Der interessanteste Teil des Theme Builders ist der Content-Bereich. Wenn Sie im Divi Theme Builder (*) ein neues Feld erstellen, werden Sie zunächst gefragt, auf welche Seiten Sie die Vorlage anwenden wollen. In diesem Beitrag werden wir eine Vorlage für Blog-Beiträge und für WooCommerce Produkte erstellen.

Wie erstelle ich eine Vorlage für Blog-Beiträge?

Legen Sie ein neues Feld im Divi Theme Builder (*) an und wählen Sie im Menü der Einfachheit halber „Alle Blog-Beiträge“ aus. Damit wird die Vorlage auf alle Blog-Beiträge angewendet. Damit die Vorlage angewendet wird, müssen Sie jedoch sicherstellen, dass die Blog-Beiträge selbst nicht mithilfe des Divi Builders (*) erstellt wurden. Dies ist nach wie vor möglich, wenn Sie einen Blog-Beitrag ohne Vorlage individuell gestalten wollen. Empfehlenswert ist es aber auf Vorlagen zurückzugreifen. Nehmen Sie zum Beispiel an, Sie platzieren sogenannte „Call to Actions“ auf Ihrer Webseite, die mit Ihrer Telefonnummer oder E-Mail Adresse verknüpft sind. Wenn sich Ihre Telefonnummer oder E-Mail Adresse ändert und Sie jeden Blog-Beitrag individuell mit dem Divi Builder (*) gestaltet haben, müssen Sie die Änderungen in jedem Blog-Beitrag einzeln vornehmen. Es sei denn Sie haben globale Elemente verwendet aber das ist ein anderes Thema und in diesem Fall auch keine optimale Lösung. Die beste Lösung ist es Elemente wie CTAs, die jeder Blog-Beitrag enthalten soll, in der Vorlage zu platzieren. Wenn sich Ihre Telefonnummer oder E-Mail Adresse ändert, müssen Sie diese nur einmalig in der Vorlage ändern. Die Änderungen werden automatisch auf alle Blog-Beiträge angewendet. Bei großen Blogs kann das einige Stunden an Arbeit sparen. Die gleichen Vorteile ergeben sich natürlich auch für die Produktseiten von WooCommerce Shops.

Nachdem Sie die Seiten ausgewählt haben, auf die Sie Ihre Vorlage anwenden wollen, gelangen Sie zur gewohnten Oberfläche des Divi Builders (*). Nun geht es an das Gestalten der Vorlage. Im Gegensatz zur Gestaltung einer WordPress Seite, bei der Sie mit dem Textmodul den Titel der Unterseite anzeigen, haben Sie in der Vorlage die Möglichkeit sogenannten dynamischen Content einzubauen. Dafür gibt es verschiedene Methoden. Um den Seitentitel des Blog-Beitrags einzufügen bietet es sich aber an das dafür vorgesehene Modul zu verwenden. Nachdem Sie es eingefügt haben, haben Sie wie gewohnt die Möglichkeit, die Schriftgröße, Farbe und vieles mehr anzupassen. Speziell bei der Schriftgröße sollten Sie bereits darauf achten, ein Mittelmaß für kurze und lange Überschriften zu finden und das am besten gleich für die Desktop-, Tablet- und mobile Ansicht. Da jeder WordPress Blog-Beitrag aus Titel, Inhalt und Beitragsbild besteht, haben Sie natürlich auch die Möglichkeit diese Elemente als dynamischen Content einzufügen. Das Beitragsbild lässt sich ganz individuell mit dem gewohnten Bildmodul platzieren. Anstatt ein Bild aus der Mediathek auszuwählen müssen Sie hier jedoch auf das kleine „+“-Symbol im rechten oberen Ecke klicken und „Featured Image“ wählen. Den Beitragsinhalt fügen Sie mit dem Post-Content Modul ein. Hier haben Sie die Möglichkeit die Schriften und gegebenenfalls das Design der im Beitrag enthaltenen Bilder anzupassen. Klicken Sie nun auf speichern, schließen Sie das Fenster und speichern Sie auch die Änderungen im Divi Theme Builder (*). Wenn Sie Ihre Blog-Beiträge, die mit dem Standard Gutenberg oder Classic Builder erstellt wurden, laden, wird Ihre Vorlage mit den passenden Einstellungen angewendet. Wurden Ihre aktuellen Beiträge jedoch mit dem Visual Builder (*) und nicht mit dem Divi Theme Builder (*) erstellt, so ist noch das alte Design zu sehen. Lesen Sie sich bitte folgenden Abschnitt durch, um dieses Problem zu beheben, da WooCommerce Produkte ebenfalls mit dem Visual Builder (*) und dem Theme Builder (*) gestaltet werden können. Das Visual Builder (*) dient dazu einzelne Seiten zu gestalten, während der Theme Builder (*) dazu dient, Vorlagen zu entwerfen und diese auf beliebig viele Seiten automatisch anzuwenden.

Visuellen Builder für Blog-Beiträge oder Produkte deaktivieren.

Dynamische Inhalte einfügen (z.B. Beitragstitel).

Essentiell für jedes Blog-Beitrags-Template.

Wie erstelle ich eine Vorlage für WooCommerce Produkte?

Die Erstellung einer Vorlage für WooCommerce Produkte ähnelt sehr der Erstellung einer Vorlage für Blog-Beiträge. Wenn Sie den vorherigen Abschnitt übersprungen haben sollten, empfehlen wir Ihnen daher sich zunächst über die Erstellung von Vorlagen für Blog-Beiträge zu informieren. Der Unterschied liegt darin, dass Sie bei Vorlagen für WooCommerce Produkte zusätzlich auf weitere Module zurückgreifen können, sobald WooCommerce auf Ihrer Webseite installiert ist. Ihre Produktbilder können Sie mit dem Product Image Modul anzeigen lassen. Die Produktbeschreibung sowie die Kurzbeschreibung können mithilfe des Textmoduls eingefügt werden. Löschen Sie hierzu einfach den Beispieltext, der im Textmodul steht nachdem es eingefügt würde. Nun sehen Sie ein kleines „+“-Symbol im rechten oberen Eck des Textfeldes. Klicken Sie darauf, um Ihren gewünschten dynamischen Inhalt anzeigen zu lassen. In der Produktvorlage ist es außerdem möglich das Pop-Up zu gestalten, das Kunden angezeigt wird, wenn Sie ein Produkt zu Warenkorb hinzugefügt haben. Außerdem muss natürlich der Kauf-Button, das Feld zum Wählen der Stückzahl und eventuell Metadaten wie z.B. die Produktkategorie eingefügt werden. Hierfür finden sich in der Menüauswahl relativ weit unten die entsprechenden Elemente, die alle mit WooCommerce gekennzeichnet sind. Wenn Sie Ihre Vorlage fertig gestaltet haben, speichern Sie diese im Theme Builder (*) und schließen das Fenster. Im Anschluss müssen Sie die Änderungen noch im Divi Theme Builder (*) speichern, damit sie angewendet werden. Sollten Ihre Produkte noch genauso aussehen wie zuvor, haben Sie diese wahrscheinlich schon vorher mit dem Divi Builder (*) gestaltet. Navigieren Sie im WordPress Dashboard zu Produkte und Produkt bearbeiten. Klicken Sie nun auf „Zum Standard Editor zurückkehren“. Legen Sie vorher am besten eine Sicherheitskopie an. Nun sollte Ihre Vorlage auf das Produkt angewendet worden sein. Diesen Vorgang müssen Sie für alle bestehenden Produkte wiederholen, damit alle Produkte von der Vorlage und deren Vorteile profitieren können.

Wie erstelle ich eine Vorlage für Archiv-Seiten, die 404-Seite, die Blog- oder Shop-Seite?

Archiv-Seiten, 404-Seiten oder die Blog- oder Shop-Seite können Sie in WordPress ebenfalls mit dem Divi Theme Builder (*) gestalten. Wählen Sie hierzu einfach die passende Seite im Menü aus, wenn Sie ein neues Feld im Divi Theme Builder (*) erstellen. Im Anschluss können Sie den Seiteninhalt gestalten. Bei den Archiv Seiten ist darauf zu achten, dass Sie die Suchfunktion mit dem entsprechenden Modul einbauen. Bei der Blog-Seite haben die Möglichkeit Ihre Blog-Beiträge in verschiedene Kategorien zu splitten. Bei Ihrer Shop-Seite ist das ebenfalls möglich.

Downloads

Über folgende Links können Sie kostenlose Vorlagen herunterladen, um den Designprozess Ihrer eigenen Templates zu beschleunigen. Um den Download-Link möglichst schnell zu erreichen, können Sie die Suchfunktion Ihres Browsers nutzen und nach „Download“ suchen. Sie müssen sich jedes mal, wenn Sie ein Theme Builder Pack downloaden möchten, für den Newsletter anmelden. Erst danach erscheint der Download-Button. Der Divi-Newsletter ist aber tatsächlich einer der wenigen Newsletter, die sich wirklich lohnen, da die Beiträge von Elegant Themes (*) ein tiefergreifendes Verständnis von Webdesign und dem Umgang mit Divi (*) bieten.