Der Divi Page Builder ist wohl die interessanteste Funktion im Divi Theme. Auch wenn damit die Gestaltung von interessanten und modernen Seiten erleichtert wird, fällt es vielen zu Beginn oft nicht leicht eine ganze Website von Grund auf neu aufzubauen. Selbst routinierte Anwender möchten nicht immer wieder die gleichen Elemente in ähnlichen Seiten von Grund auf neu konfigurieren. Hier helfen die sogenannten Layouts und die in Divi integrierte Bibliothek.

Was sind Divi Layouts?

Layouts sind fertig gestaltete Vorlagen in denen alle Divi Module bereits mit den passenden Einstellungen und Grafiken integriert sind. Importierst Du ein Layout, stehen Dir die vorkonfigurierten Elemente sofort zur Verfügung. Das kann von ganzen Seiten über Sektionen, Zeilen bis zu einzelnen Modulen gehen. In der Regel sind dann noch ein paar Anpassungen bzgl. Texte, Links, Grafiken und ggf. weiterer Einstellungen wie Farben, Abstände etc. sinnvoll. Das spart oft viel Zeit und hilft auch Personen, die noch kein gutes Auge für Webdesign besitzen.

Was ist die Bibliothek in Divi?

In die in Divi integrierte Bibliothek lassen sich Seitenlayouts oder auch nur Teile eines Seitenlayouts bis hin zu einzelnen Modulen mit ihren Einstellungen speichern. Hat man gute Einstellungen gefunden, müssen diese nicht jedes Mal wieder neu eingetragen werden, sondern die jeweiligen Elemente können in die Bibliothek gespeichert und an anderer Stelle wieder abgerufen werden.

In der Bibliothek finden sich auch eine Reihe an bereits von Elegant Themes erstellten Layouts. Außerdem lassen sich Vorlagen als globale Elemente abspeichern. Während bei normalen Bibliothekselementen nach dem Einfügen die Einstellungen ohne Folgen verändert werden können, werden bei globalen Elementen alle Einstellungen stets angeglichen.

Damit lässt sich z.B. ein „Call to Action“ Aufruf zum Anmelden oder Kaufen gestalten, der an verschiedenen Stellen der Website eingefügt wird. Falls später die Farbe, die Form oder der Text des Buttons geändert werden soll, genügt es dies einmal zu tun und die Änderung wirkt sich auf alle Stellen aus an denen das globale Element eingesetzt wurde. Die Änderung braucht dann nicht an jedem einzelnen Element wiederholt zu werden.

Wie werden Layouts und die Bibliothek verwendet?

Speichern von Layouts

Um Layouts zu laden, muss zunächst ein Layout gespeichert werden. Davon ausgenommen sind nur die bereits vorhandenen Seitenlayouts von Elegant Themes. Die Layouts werden getrennt nach ihrer Komplexität gespeichert. D.h. es lassen sich folgende Elemente speichern:

  1. Module
  2. Zeilen mit mehreren Modulen
  3. Sektionen mit mehreren Zeilen und Modulen
  4. Seiten mit mehreren Sektionen und deren Zeilen und Modulen

Um ein Layout zu speichern gehst Du im Backendeditor in die Einstellung des jeweiligen Elementes und nutzt die entsprechende Funktion gleichgültig, ob es sich dabei um ein Modul, eine Zeile oder eine Sektion handelt.

Die Möglichkeit zum Speichern ganzer Seiten, findet sich oben im Editor.

Im Frontend Visual Builder für Divi erscheint beim Überfahren des jeweiligen Bereiches oben links eine Symbolleiste, deren zweites Symbol von Links das Speichern des Layouts veranlasst.

Es erscheint dann ein Dialog zum Speichern, in dem für die neue Vorlage ein aussagekräftiger Name und eine Kategorie vergeben werden kann. Außerdem lässt sich hier bestimmen, ob es sich um ein globales Objekt handeln soll. Das sind die Elemente bei denen sich die Änderungen der Einstellungen stets anpassen.

Laden von Layouts

Sind bereits Layouts gespeichert, importiert oder willst Du die von Elegant Themes bereitgestellten Layouts nutzen, kannst Du folgendermaßen Layouts laden. Wichtig ist dabei, dass Du weißt welche Typ von Layout Du verwenden willst: Modul, Zeile, Sektion oder Seite. Modul-Layouts lassen sich im Backend über die „Modul einfügen“ Funktion hinzufügen.

Zeilen- oder Sektions-Layouts lassen sich im Backend über die „Zeile hinzufügen“ oder „Aus der Bibliothek hinzufügen“ Funktion erreichen.

Und die Möglichkeit Seiten-Layouts hinzuzufügen findet sich im Backend oben im Editor.

Im Visual Builder im Frontend klickst du einfach im gewünschten Bereich auf das Pluszeichen und kannst im erscheinenden Dialog „Aus der Bibliothek hinzufügen“ auswählen.

Seiten-Layout-Packs von Elegant Themes

Seit einiger Zeit erstellt Elegant Themes im wöchentlichen Rhythmus im Rahmen der Divi Design Initiative regelmäßig neue Seiten-Layout Packs. Dabei handelt es sich um kleine Pakete an Seiten-Layouts zu verschiedenen Oberthemen. So gibt es z.B. ein Yoga-Layout-Pack, dass 7 verschiedene Seiten-Layouts enthält, die zusammen fast alles beinhalten was man zum Aufbau einer Website für ein Yoga Studio benötigt. Von der Startseite über eine Team Seite, Kursübersicht, Kontakt- und Blogseite. Zu dem Zeitpunkt an dem dieser Artikel verfasst wurde exestierten bereits 22 themenzentrierte Seiten-Layout-Packs mit insgesamt 180 Einzelseitenlayouts und jede Woche kommen neue hinzu.

Mittlerweile braucht man diese Layouts nicht mühsam als Datei von der Elegant Themes Homepage herunterladen, sondern diese lassen sich leicht über die Seiten-Layout laden Funktion importieren.

Hier finden sich alle von Elegant Themes bereitgestellten in Kategorien eingeteilten Pakete inkl. einer Suchfunktion. Klickst du auf ein Paket erscheint ein umfangreiche Dialogansicht.

Du kannst generell zwischen den (1) „Premade Layouts“ und Deinen selbst unter (2) „Your Saved Layouts“ gespeicherten eigenen Seiten-Layouts wechseln. Es existiert eine (3) Vorschau, die zum gerade unter (4) ausgewählten Seiten-Layout gehört. Es kann über den Button (5) „View Live Demo“ eine Vorschauseite angezeigt werden und über (6) „Use This Layout“ kann das Seitenlayout importiert werden. Mit Hilfe der Option (7) kannst Du bestimmen, ob ein bereits vorhandenes Seiten-Layout überschrieben oder ob das neue Seiten-Layout einfach zum vorhandenen hinzugefügt werden soll.

Falls Du nur Teile wie Sektionen oder Zeilen eines Elegant Themes Seiten-Layout verwenden willst, musst Du trotzdem erst einmal das gesamte Seiten-Layout importieren und dann nur den gewünschten Teil verwenden.

Divi-Bibliothek: Übersicht, Verwalten und Bearbeiten von Layouts

Falls Du beim Versuch ein Layout zu laden nicht fündig wirst, kann es gut sein, dass Du z.B. versuchst ein Sektions-Layout über die Zeilenfunktion zu laden. Divi zeigt Dir beim Laden eines Layouts immer nur die passenden Layouts je nachdem, ob es sich um den Typ Modul-, Zeilen-, Sektions- oder Seiten-Layout handelt.

Einen Überblick und die Möglichkeit Deine Layouts zu verwalten findest Du im WordPress Administrationsbereich unter „Divi“ > „Divi-Bibliothek“.

Hier sind alle Layouts zu sehen inkl. der Typenangabe und ob es sich um ein globales Layout handelt. Die Kategorien können bearbeitet werden und im Gegensatz zu früher können Layouts auch nur hier im Administrationsbereich gelöscht werden.

Diese Option „In den Papierkorb legen“ erscheint erst unterhalb des Titels der jeweiligen Vorlage, wenn Du mit der Maus über den Titel fährst. Außerdem findest Du hier die Möglichkeit ein Layout zu bearbeiten und so zu verändern. Denk bitte daran, dass nur bei globalen Layouts die Änderungen sich auch auf alle Stellen auswirken an denen Du dieses globale Layout eingesetzt hast. Bei normalen Layouts passiert dies nicht und Änderungen werden erst bei erneutem Einfügen an einer Stelle übernommen.

Außerdem lassen sich hier alle Layouts auch als Datei exportieren bzw. importieren. Das ist ausgesprochen praktisch um Layouts zu einer anderen Seite zu transferieren oder fremde Layouts zu importieren.

Fremde Layouts laden

Layouts werden nicht nur von Elegant Themes angeboten, sondern auch andere Entwickler bieten kostenlose oder auch kostenpflichtige Divi Layouts an. Diese können über die Importfunktion geladen werden.

Fazit: Divi-Bibliothek und Layouts

Die Layouts und die Bibliotheksfunktionen machen den Aufbau einer Website sehr viel einfacher. Sowohl wenn man als Anfänger einsteigt und sich die fertigen Seiten-Layout-Packs von Elegant Themes zu nutze macht, als auch wenn man als erfahrener Divi Nutzer schon eine eigene Bibliothek an Layouts aufgebaut hat, die man immer wieder verwenden kann. Globale Layouts machen spätere Anpassungen wesentlich weniger arbeitsaufwändig.

Die Idee zu diesem Artikel entstand durch einen Hinweis per E-Mail von Detlev Grolman. Vielen Dank dafür!