Speichern und mehrfach verwenden: Divi Bibliothek, Importieren & Exportieren von Elementen und Selective Sync
Kennst Du das? Du sitzt seit einiger Zeit an Deiner Divi Website z.B. an einem Text? Der Text ist geschrieben und Du feilst noch an der Formatierung. Alles sieht gut aus. Du bist zufrieden mit Deiner Arbeit. Großartig! Doch dann fällt Dir ein, dass das nicht der einzige Text ist, den Du in nächster Zeit einpflegen wolltest. Es steht ja noch ein neues Zusatzpaket zu Deinem Angebot an. Und Du denkst nur noch: Mist! Nicht schon wieder alle Designelemente neu einfügen und von vorne formatieren.
Warum gibt es nicht eine Funktion, mit der ich alles, was ich mache, auch auf anderen Unterseiten verwenden kann und nicht immer wieder neu anpassen muss??? Quasi Copy und Paste.
Gute Nachricht. So etwas gibt es tatsächlich. Und es ist auch gar nicht schwer, es umzusetzen.
Wie Du einfach eigene Elemente, sei es Module, Zeilen, Abschnitte (Sektionen) oder gar ganze Seiten kopieren kannst oder als globale Elemente nur ein einziges Mal speicherst und dafür mehrfach verwenden kannst, das zeigen wir Dir hier in diesem Tutorial.
Dabei geht es um diese Themen:
- Divi Bibliothek: Was ist das und wie verwende ich die Divi Bibliothek?
- Globale Elemente in deiner Divi Bibliothek speichern
- Selective Sync: was ist das?
- Vollständige Unterseiten im Divi Builder duplizieren
Was ist die Divi Bibliothek?
Um all die gewünschten Funktionen aus der Einleitung (kopieren und einfügen) nutzen zu können, beschäftigen wir uns heute mit der Divi Bibliothek.
Die Divi Bibliothek ist ein cleveres Werkzeug, um Module, Zeilen und Abschnitte für eine spätere Verwendung abzuspeichern. Das ist nicht nur hilfreich, sondern spart eine Menge Zeit bei der Erstellung von Unterseiten, indem man auf gleiche Inhalte zugreifen und diese an einer neuen Stelle einfügen kann. Also „Copy & Paste“ im großen Stil. Wie genau du von der Divi Bibliothek profitieren kannst, erklären wir Dir hier.
Divi Bibliothek korrekt nutzen
Um Dir zu zeigen, wie Du die Divi Bibliothek korrekt nutzen kannst, ist es wichtig, dass Du Dich im Divi Visual Builder auf einer Unterseite befindest. Als Beispiel haben wir hierfür einen Abschnitt (Sektion) mit einer zweispaltigen Reihe, in der ein Bild, ein Textmodul und ein vorformatierter Button enthalten ist, erstellt. Das Ganze sieht im Divi Visual Builder so aus:
Und so in der Drahtgitteransicht (grünes Icon unten rechts):
Bislang ziemlich einfach.
Hinweis: Das alles wurde für dieses Tutorial erstellt und formatiert. Wenn Du bereits eine Website besitzt, dann kannst Du die Divi Bibliothek mit jedem x-beliebigen Abschnitt (Sektion), jeder Reihe und jedem Modul, welches Du für Deine Website erstellt hast, nutzen. Für diejenigen, die Divi zuerst noch installieren und einrichten müssen, zeigen wir dir hier wie du das Divi Theme in nur 3 Schritten installieren kannst. Hier erklären wir Dir, wie Du Divi für Dich einrichten kannst.
Es geht fröhlich weiter im Text.
Alles ist fertig erstellt und wartet nun darauf, an einer anderen Stelle zum Einsatz zu kommen. Um einen ganzen Abschnitt (oder eine Zeile oder ein einzelnes Modul) in der Divi Bibliothek zu speichern, gehen wir mit Klick auf das Zahnrädchen im blauen Rahmen in die Einstellungen des jeweiligen Abschnitts (Sektion).
Es öffnet sich ein neues Fenster. Hier klicken wir auf die drei senkrechten Punkte oben rechts und ein Menü öffnet sich. Du ahnst es schon. Einfach auf „In der Bibliothek speichern“ klicken.
Hier kannst Du nun einen Namen für Deinen Abschnitt vergeben. Wir nennen diesen Abschnitt beispielhaft „Textbox_rechts“. Einfach, weil es sich hier um eine rechts ausgerichtete Textbox handelt. Falls Deine Website sehr groß sein sollte und viele unterschiedliche Designelemente beinhaltet, empfiehlt es sich eine neue Kategorie zu erstellen. Später brauchst Du nur noch den Abschnitt in der richtigen Kategorie suchen.
In unserem Beispiel nennen wir die Kategorie „Allgemeine Textboxen“, da sie im allgemeinen Teil unserer Website verwendet wird und nicht im Blog, oder Shop-Bereich. Sowohl beim Layoutnamen als auch beim Kategorienamen sind Dir keine Grenzen gesetzt.
Ein Tipp für die Divi Bibliothek: Versuche einen Namen/Kategorietitel zu wählen, der später einfach zu finden ist und das Element relativ gut beschreibt. So sparst du dir im Nachhinein eine Menge Sucharbeit in deiner Divi Bibliothek.
Was das Häkchen beim Feld „Dies zu einem globalen Element machen“ bedeutet, dazu kommen wir später in diesem Beitrag. Eins nach dem anderen.
Um diese Textbox nun genauso an einer anderen Stelle auf Deiner Website einzufügen, empfehlen sich die folgenden Schritte.
1. Als Erstes gehen wir auf die Unterseite, auf der der zuvor gespeicherte Abschnitt mit dem Namen Textbox_rechts erscheinen soll und öffnen die Seite im Divi Visual Builder. Wir navigieren zur gewünschten Stelle.
2. Fügen mit Klick auf das blaue Plus-Symbol einen neuen Abschnitt (Sektion) hinzu. Es öffnet sich ein neues Fenster. Mit Klick auf den Tab „Divi-Bibliothek“ erhältst Du Zugriff auf Deinen zuvor gespeicherten Abschnitt.
3. Einfach auswählen und voilà der Abschnitt wurde erfolgreich aus deiner Divi Bibliothek eingefügt.
Jetzt hast Du gelernt wie Du einfach ein Element kopieren und an anderer Stelle auf Deiner Website einfügen kannst.
Wenn Du wissen möchtest, welche gespeicherten Divi Bibliothekselemente in WordPress enthalten sind, so kannst Du diese als Liste im Divi Menü finden.
Dazu gehst Du lediglich aus dem Visual Builder heraus und navigierst zum WordPress Dashboard. Im rechten Menü unter Divi findest Du einen Reiter namens „Divi-Bibliothek“.
Hier findest Du nun alle jemals gespeicherten Bibliothekselemente.
Hinweis: Du kannst Deine gespeicherten Bibliothekselemente auch in anderen WordPress Installationen verwenden oder von anderer Stelle importieren. Dazu diese in der Liste auswählen und per Klick auf den Button links oben „Import & Export“ importieren oder exportieren. Zum Exportieren erhältst Du dann eine sogenannte json-Datei, die Du in eine andere WordPress Installation importieren kannst und umgekehrt.
So weit, so gut, aber wie lässt sich ein Element nicht nur kopieren, sondern auch über alle Seiten so verändern, dass man später beispielsweise nicht an fünf verschiedenen Stellen bei einer kleinen Änderung z.B. der Schriftgröße diese fünfmal anpassen muss. Hier kommen die globalen Elemente ins Spiel, die wir dir im nächsten Abschnitt weiter erläutern. Übrigens, die Liste Deiner Divi-Bibliothek im Divi Menü zeigt Dir auch die globalen Elemente an.
Globale Elemente in der Divi Bibliothek
Was sind globale Elemente? Dazu schauen wir uns mal das Handbuch von Divi genauer an. Divi beschreibt globale Elemente nämlich folgendermaßen: „Ein globales Bibliothekselement ist ein Modul, eine Zeile oder ein Abschnitt, das auf allen Seiten, auf denen es hinzugefügt wird, genau gleich erscheint.“
Du kannst ein einzelnes, globales Modul zu mehreren Seiten hinzufügen. Wenn Du das globale Modul auf einer Seite änderst, wird es auch auf allen anderen Seiten, denen es hinzugefügt wurde, sofort aktualisiert. Wenn ein einzelnes Modul auf mehreren Seiten wiederholt wird, ist es sinnvoll, dieses Modul global zu machen. Auf diese Weise musst Du nicht jedes Mal jede einzelne Seite bearbeiten, wenn Du eine Änderung an einem globalen Bibliothekselement vornehmen möchtest.
Globale Elemente erkennst Du relativ einfach an dem grünen Rahmen, im Gegensatz zu gespeicherten Bibliothekselementen. Auf dem folgenden Bild siehst Du beispielsweise den grünen Rahmen bei einem Element in der Fußzeile.
Hier ist die komplette Fußzeile ein globales Element. Du kannst nun einem Bibliothekselement die Auszeichnung „global“ vergeben. Einfach ein fertig formatiertes Element Deiner Wahl als Bibliothekselement zur Divi Bibliothek hinzufügen und das Häkchen bei „Dies zu einem globalen Element machen“ machen. Das war es auch schon.
Nun sind alle Elemente, die mit diesem globalen Element verknüpft sind, absolut identisch.
Vorsicht bei Änderungen! Änderst Du ein globales Element ab, ändern sich auch alle anderen damit verknüpften Elemente.
Doch wie ist es möglich, bestimmte Optionen, z.B. innerhalb eines designten Textmoduls, nicht über alle verknüpften globalen Elemente zu kopieren. Anders ausgedrückt, Du hast ein Textmodul, indem Du die Schriftfarbe, Schriftgröße, den Hintergrund, etc. vorformatiert hast. Du erstellst aus diesem Textmodul nun ein globales Bibliothekselement und fügst es aus der Divi Bibliothek an mehreren Stellen auf Deiner Webseite ein. Doch dann fällt Dir ein, dass Du zwar alles identisch haben möchtest, aber bitte nicht den Inhalt Deines Textes. Es soll alles gleich aussehen, doch der Text soll individuell sein.
Selective Sync bei globalen Elementen nutzen
Hier kommt Selective Sync ins Spiel. Selective Sync bedeutet auf Deutsch „selektive Synchronisierung“. Mit Selective Sync kannst Du bestimmte Optionen innerhalb von globalen Elementen einheitlich vervielfachen. Dort, wo Selective Sync nicht verwendet werden soll, also in unserem Beispiel innerhalb des Texteditors, bleibt der Inhalt individuell und wird nicht mitkopiert.
Dafür klickst Du einfach auf das Synchronisierungssymbol, bis es in Rot erscheint. Rot bedeutet, Einstellungen werden nicht über alle verknüpften Elemente dupliziert. Im folgenden Kurzvideo siehst Du, wo sich das Icon zum Anklicken in einem globalen Element befindet.
So sieht das Synchronisierungssymbol aus:
In anderen Worten, wenn Du ein globales Modul bearbeitest, siehst Du anhand des grünen Synchronisierungssymbols links neben jeder Option leicht, welche Optionen gerade synchronisiert werden.
Optionen mit dem grünen Synchronisierungssymbol sind Optionen, die derzeit innerhalb des globalen Moduls synchronisiert werden. Mit grünen Synchronisierungssymbolen bearbeitete Optionen werden von allen Instanzen des globalen Elements geteilt.
Um die Synchronisierung einer Option aufzuheben, klickst Du, wie oben beschrieben, einfach auf das grüne Synchronisierungssymbol und das Symbol wird rot. Optionen mit dem roten Synchronisierungssymbol werden NICHT mitkopiert.
Jetzt hast Du erfahren, wie einfach es ist Elemente auf verschiedenen Unterseiten mittels globaler Elemente aus deiner Divi Bibliothek clever zu spiegeln. Aber Divi kann noch mehr.
Komplette Unterseiten in Divi duplizieren
Das geht. Und es ist auch gar nicht mal so schwer. Dafür bietet Divi von Haus aus eine Import/Export Funktion für ganze Unterseiten an. Dadurch kannst Du Divi-Unterseiten nicht nur innerhalb einer Website duplizieren (wie mit der Divi Bibliothek), sondern auch in eine andere WordPress Website, in der das Divi Theme installiert ist. Alles, einschließlich Bildern, benutzerdefiniertem CSS und erweiterten Designeinstellungen, wird in einer einzigen json-Datei zusammengefasst. Wie das funktioniert, das erklären wir Dir hier.
Exportieren einzelner Unterseiten
Damit Du einzelne Unterseiten in Divi duplizieren oder genauer gesagt exportieren kannst, navigierst Du auf die gewünschte Unterseite innerhalb des Divi Visual Builders nach unten, bis Du das Icon mit den beiden Pfeilen siehst.
Bei Klick darauf öffnet sich ein neues Fenster mit dem Titel „Portabilität“ mit zwei Tabs. Uns interessiert erstmal der erste Tab „Export“. Hier kannst Du einen Namen für Deine Unterseite, die kopiert werden soll, vergeben. Die Unterseite wird Dir bei Klick auf den unteren Button als json-Datei zur Verfügung gestellt. Datei auf Deinen Rechner herunterladen. Fertig. Du hast nun eine Kopie Deiner Unterseite erstellt.
Damit Du diese Kopie an anderer Stelle wieder zum Leben erwecken kannst, erstellst Du einfach über WordPress Dashboard – „Seiten“ – „Erstellen“ eine neue Seite in WordPress und öffnest diese mit dem Divi Visual Builder (hier: „Verwenden Sie den Divi Builder“).
Es öffnet sich ein neues Fenster. Du hast nun die Möglichkeit, eine neue Seite komplett neu aufzusetzen oder wenn bereits Unterseiten bestehen, so kannst Du diese einfach klonen. Für unser Beispiel klicken wir auf „Neu aufbauen“.
Es öffnet sich eine neue Seite und gleich als Erstes zeigt sich ein Fenster mit dem Titel „Zeile einfügen“. Dieses schließen wir getrost, da wir Deine gespeicherte Unterseite im json-Format importieren und in unserem Beispiel keine neue Zeile einfügen möchten. Du navigierst nach unten, klickst auf das Icon mit den drei Punkten und dann auf das bekannte Icon mit den beiden Pfeilen.
Ja, das haben wir ja schon gesehen. Genau. Du gelangst wieder zum Fenster „Portabilität“. Nur diesmal klickst Du auf den Tab „Importieren“ und lädst Deine zuvor gespeicherte json-Datei hoch. Da diese Seite leer ist, kannst Du getrost, das Häkchen bei „Vorhandenen Inhalt ersetzen“ setzen. Wenn Du das Häkchen nicht setzt, kopiert Divi die neue Unterseite in ein bestehendes Layout ohne dieses zu löschen, falls denn eines existiert.
Hier in unserem Beispiel spielt das keine Rolle, da wir auf einer leeren Seite arbeiten. Solltest Du Dein Layout in eine bereits bestehende Unterseite kopieren wollen, so empfiehlt es sich hier das Häkchen bei „Vorhandenen Inhalt ersetzen“ nicht zu setzen und vor dem Import ein Backup herunterzuladen („Backup vor Import herunterladen“).
Kleiner Hinweis zu den Presets
Falls Du zuvor bereits mit Presets gearbeitet hast, so kannst Du diese auch mit „Import Presets“ hier importieren, aber Vorsicht, diese Presets überschreiben bestehende Presets. Also setze dieses Häkchen nur dann, wenn Du genau weißt, dass der Import von Presets keine großen Auswirkungen auf andere Unterseiten haben könnte. Presets sind ein eigenes Thema und würden dieses Tutorial sprengen. Wenn Du dennoch mehr dazu erfahren möchtest, dann findest Du weitere Informationen in englischer Sprache auf der Website von Elegant Themes.
Fazit zur Divi Bibliothek
Mit Hilfe der Divi Bibliothek, dem Export & Import von Designelementen sowie Selective Sync kannst du dir bei der Erstellung und Gestaltung deiner WordPress Website nicht nur Zeit, sondern auch viel Mühe sparen. Getreu dem Motto „Work Smart not Hard“ empfehlen wir dir, die im Tutorial beschriebenen Funktionen zukünftig zu nutzen.
Du möchtest Divi kostenfrei ausprobieren? Dann registriere dich hier für unser kostenloses Hosting inklusive vorinstalliertem Divi Theme!
Wir hoffen, dass Dir dieses Tutorial weitergeholfen hat? Schreib uns gerne in die Kommentare, wie Du die Tipps zur Divi Bibliothek für Dich nutzt. Oder möchtest Du noch gerne etwas ergänzen? Immer her damit.
