Tipps & Tricks für (d)ein besseres Divi

Divi ist ein flexibles und komfortables WordPress-Theme.*

Divi ist ein weit verbreitetes Bezahl-Theme für WordPress vom Hersteller ElegantThemes. In diesem Artikel erhältst du Tipps und Tricks rund um das Divi-Theme.

Divi kaufen kannst du hier bei ElegantThemes*.

Beispiele schöner Divi-Seiten

Hier einige WordPress-Websites, die mit Divi gebaut wurden:

• https://www.flowsummit.net*
• https://goodnews-magazin.de
• Vielzahl an Seiten im Showroom von Elegant Themes*

“

Divi ist einfach und intuitiv zu bedienen,
trotzdem sehr vielseitig einstellbar
und man kann damit tolle Seiten* bauen.

Stefan Seidner-Britting, Gründer von Marketing United

Tipps & Tricks

Wenn nicht anders angegeben, musst du die folgenden CSS-Schnipsel unter "Divi -> Theme-Optionen -> General / Allgemein -> Benutzerdefiniertes CSS" eingeben. Alternativ kannst du den CSS-Code auch in die style.css deines Child-Themes einfügen.

Wenn du in den folgenden Tipps keine Lösung für dein Problem findest, schreibe unten gerne einen Kommentar und ich (Stefan) werde versuchen dir zu helfen.

Header und Logo

• Um das Logo oberhalb der Menüzeile zu haben: Im Designmodifikator (Customizer) unter Header & Navigation -> Headerformat -> Kopfzeilenstil "zentriert" auswählen.
• Um das Logo zu entfernen: Gehe im Designmodifikator auf "Header und Navigation" -> "Primäre Menüleiste" und setze dort das Häkchen vor "Logobild verbergen".
• Um ganz oben eine Benachrichtigung anzuzeigen, die weggeklickt werden kann (auch Promo bar, Promo-Leiste, Notification bar, Hello bar genannt): Lösung mit Theme-Builder ohne Plugin, Mögliches Plugin.
  Wenn du den Theme-Builder benutzt, erstelle eine neue Vorlage und wähle dort aus, dass der Header nur auf der entsprechenden Seite angezeigt wird. Stelle die entsprechende Zeile auf Fixed, damit sie beim Scrollen immer oben bleibt.
• Das Logo durch einfachen Text ersetzen: Anleitung siehe hier.
• Den Header in der fixen Navigation beim Runterscrollen nicht verkleinern: Im Theme Customizer unter "Header & Navigation" den Wert "(Feste) Menü Höhe" sowohl bei "Primäre Menüleiste" als auch bei "Einstellungen für fixe Navigation" auf den gleichen Wert stellen.
• Das Logo unabhängig von der Customizer-Einstellung immer in voller Größe anzeigen:

#logo {
    max-height: none !important;
}

• Den Header auf einer bestimmten Unterseite ausblenden: Baue folgenden Code in das Feld "Benutzerdefiniertes CSS" (im visuellen Divi-Builder unten unter dem Zahnrad -> Fortgeschritten) der Unterseite ein:

#main-header {
	display: none;
}
#page-container { 
	padding-top: 0px !important; 
	margin-top: -1px !important 
}

Divi Theme Builder:

• Seit dem Update auf Divi 4 kannst du mit dem Divi Theme Builder einen komplett eigenen Header bauen. Diesen kannst du entweder global auf der ganzen Seite aktivieren, oder nur auf einzelnen Seiten.
• Um einen Custom Header oben zu fixieren (fixed Header):

header.et-l.et-l--header {
    position: fixed;
    z-index: 999;
    width: 100%;
}

Menü

Tipps zum Menü-Modul (innerhalb des Theme Builders > Globaler Header):

• Um die Menüeinträge rechtsbündig auszurichten: Behalte im Design-Reiter unter Layout > Styles das voreingestellte "Linksbündig", auch wenn es verwirrend ist. Gehe dann darunter auf Menütext > Textausrichtung und wähle dort rechtsbündig aus.

Tipps zur sekundären Menüleiste (auch "Top-Menü" oder "oberes Menü" genannt):

• Sekundäre Menüleiste ausblenden: Gehe im WordPress-Backend auf "Design -> Menüs -> Positionen verwalten". Wähle dort unter "Sekundäres Menü" den Eintrag "Wähle ein Menü" aus und klicke auf Speichern.
• Beim sekundären Menü Trennstriche zwischen den Menüpunkten einfügen:

#top-header .menu-item:before {
    content: "|";
    position: absolute;
    right: -13px;
}
#top-header .menu-item:last-child:before{
	content: "";
}

• Möglichkeiten das Logo in die sekundäre Menüzeile (obere Menüzeile) einzufügen:
  • Über den Customizer das Logo in der primären Zeile ausblenden, dann im Sekundär-Menü einen benutzerdefinierten Link einfügen mit Linktext <span><img src="url"></span> . Nachteil: Logo und Menüeinträge hängen zusammen.
  • Wenn man das Logo linksbündig haben will und die Menüeinträge rechts, dann geht dies über die Anpassung der header.php im Child-Theme. Das Ergebnis sieht dann zum Beispiel so aus.

Fixiertes Menü:

• "Fixed navigation" deaktivieren: Unter Divi -> Theme Optionen -> General -> "Feste Navigationsleiste" auf Deaktivieren stellen.
• Um die fixed navigation auch in der Mobilansicht zu aktivieren:

@media only screen and (max-width: 980px) {
	.et_fixed_nav #main-header.et-fixed-header  {
		position: fixed;
	}
}

Sonstiges:

• Um in der Mobilversion die Untermenüs standardmäßig einzuklappen ("nested submenus"): [1]
• Um auch in der Desktop-Version das (mobile) Hamburger-Menü anzuzeigen: [2]
• Um auch in der mobilen Version das normale (Desktop)Menü anzuzeigen (und somit nicht das mobile Hamburger-Menü):

@media only screen and (max-width: 980px) {
	#et_mobile_nav_menu {
		display: none;
	}
	#top-menu {
		display: inline-block;
	}
}

• Um den grauen Strich unterhalb des Hauptmenüs zu entfernen:

#main-header {
    box-shadow: none;
}

• Mega Menu erstellen: Einfach dem Überpunkt die CSS-Klasse mega-menu geben, siehe [3].
• Um das Hamburger-Menü links statt rechts anzuzeigen:

@media (max-width: 980px){
    .et_pb_fullwidth_menu--style-left_aligned .et_pb_menu__wrap, .et_pb_menu--style-left_aligned .et_pb_menu__wrap {
        justify-content: flex-start;
    }
}

Slider

• Farbe der Navigationspfeile ändern, die links und rechts neben dem Slider erscheinen: In der Folie selbst (nicht in den Slider-Einstellungen) unter Design -> Navigation -> Benutzerdefinierte Pfeilfarbe.
  Für jede Folie lässt sich eine eigene Pfeilfarbe einstellen. Wenn man in allen Folien die gleiche Pfeilfarbe möchte, kann man einfach die erste Folie duplizieren.
• Die Punkte-Navigation erscheint standardmäßig innerhalb des Sliders. Will man sie unterhalb des Sliders anzeigen, hilft folgender CSS-Code:

.et-pb-controllers {
    position: relative;
    bottom: -16px;
}

• Um die Höhe des Sliders anzupassen, muss man mit dem CSS-Wert padding (oben und unten) der Folie herumspielen. Diesen findet man in der Folie unter Design -> Zwischenraum -> Benutzerdefinierter Abstand.
  Wenn man gleichzeitig nur mit Hintergrundbildern arbeitet, ist folgender CSS-Code sinnvoll um den Slider responsive zu halten:

.et_pb_slider .et_pb_slide  {
    background-size: contain !important;
    max-height: 400px;
}

Ersetze 400px mit der Höhe deiner Hintergrundbilder. Erhöhe nun noch den "benutzerdefinierten Abstand" (aus dem ersten Schritt) solange bis das Bild nicht mehr größer wird.
Um nicht jede Folie einzeln bearbeiten zu müssen, kann man die padding-Werte auch wieder per CSS setzen. Beispiel:

.et_pb_slider .et_pb_slide  {
    background-size: contain !important;
    max-height: 400px;
    padding-top: 14%;
    padding-bottom: 14%;
}

• Mehr Infos zum Slider findest du in der Divi-Doku.

Blog

• Um das Datum auf das deutsche Format (also zum Beispiel "25. Februar 2018") zu stellen. In den Theme-Optionen -> Allgemeines -> Datumsformat auf j. F Y stellen. Dies bewirkt, dass das Datum oben in allen Blog-Beiträgen im deutschen Format angezeigt wird.
  Um das Blog-Modul auch in diesem Format anzuzeigen, muss man j. F Y noch extra im Blog-Modul einfügen.
• Um den Text "mehr lesen" in einen Button zu verwandeln: siehe CSS-Code auf dem Secret Wiki-Blog
• Um das Beitragsbild in den Blog-Beiträgen nicht über die komplette Breite gehen zu lassen: [4]
• Um das Beitragsbild in den Blog-Beiträgen gar nicht anzuzeigen: Divi -> Theme-Optionen -> Layout -> Einzelbeitrag-Layout -> "Thumbnails für Beiträge anzeigen" deaktivieren
• Um das Thumbnail in den Beitragsboxen in einem anderen Format als 16:10 anzuzeigen: [5]

Sidebar

• Möglichkeiten die Sidebar zu entfernen:
  • Individuell auf einzelnen Seiten über die Box "Divi Seiteneinstellungen" oben rechts. Dort unter Seitenlayout "Fullwidth" auswählen.
  • Global auf allen Seiten mit diesem CSS-Code:

#main-content .container:before {
	background: none;
}
#sidebar {
	display:none;
}
@media (min-width: 981px){
	#left-area {
		width: 100%;
		float: none !important;
	}
}

• In den Standard-WordPress-Widgets können keine Divi-Module verwendet werden. Wenn man eine Sidebar mit Divi-Modulen haben möchte, muss man sich die Leiste auf den entsprechenden Seiten / Beiträgen mit den Divi-Modulen selbst zusammenbauen. Tipp: Lege die Leiste als globales Modul an. Dann kannst du global Änderungen an deiner Sidebar vornehmen.
  Hinweis: Das Divi-Modul "Sidebar" kann auch nur die Standard-Widgets anzeigen.

Kontaktformulare

• Es ist möglich Benachrichtigungen über neue Kontaktformular-Eintragungen an mehrere E-Mail-Adressen zu schicken. Gib diese einfach durch Komma getrennt unter den Modul-Einstellungen > E-Mail-Adresse > E-Mail-Adresse ein.
• Um eine Kopie des Kontaktformular-Eintrags an den Eintrager zu schicken, siehe hier. Diese Code-Änderung betrifft dann alle deine Formulare, die du auf deiner Website erstellt hast.
• Um das Kontaktformular-Modul zu erweitern, kannst du zum Beispiel mit diesem Zusatzplugin arbeiten.
• Es ist normal, dass wenn du einen Radio-Button angeklickt hast, diesen nicht mehr abwählen kannst.

E-Mail-Optin

Mit dem E-Mail-Optin-Modul kann man schnell Eintrageformulare im Seitendesign erstellen. Stand 11.4.2018 sind folgende Anbieter von Newsletter-Software in Divi integriert:

• ActiveCampaign
• AWeber
• CampaignMonitor
• ConstantContact
• ConvertKit
• Emma
• Feedblitz
• FeedBurner
• GetResponse
• HubSpot
• iContact
• InfusionSoft
• MadMimi
• MailChimp
• MailerLite
• MailPoet
• Ontraport
• SalesForce
• SendinBlueMailster

Eine Anbindung für den deutschen E-Mail-Marketing-Anbieter Klick-Tipp gibt es hier als Drittanbieter-Plugin von der Firma Intellicon*.

Footer

• Wenn du im Customizer keine "Footer"-Einstellungen siehst (oder diese kurz nach dem Laden verschwinden), dann ist der Footer wahrscheinlich mit dem Theme-Builder erstellt worden. Gehe einfach auf Divi > Theme-Builder um den Footer zu bearbeiten.
• Abstand zwischen Content und Footer bei allen Seiten einfügen, die nicht über den Divi-Builder gebaut sind:

#main-footer {
    margin-top: 45px;
}
.et_pb_pagebuilder_layout #main-footer {
    margin-top: 0px;
}

• Die Einträge eines Menüs in einem Footer-Widget ohne Aufzählungspunkte und nebeneinander statt untereinander anzeigen lassen:

#footer-widgets .footer-widget li {
    float: left;
    padding-left: 0;
    padding-right: 14px;
}
#footer-widgets .footer-widget li::before {
    border: none;
}

Buttons

• Um einen Button auf der vollen Breite anzuzeigen (full-width), einfach folgenden CSS-Code unter Erweitert > Benutzerdefiniertes CSS > Hauptelement einfügen: width: 100%;
• Um unten rechts einen fixierten Kontaktbutton anzuzeigen, kann man zum Beispiel folgenden Code in ein Code-Modul auf der entsprechenden Seite einfügen:

<div style="position: fixed; bottom: 10px; right: 20px;">
  <a href="mailto:deine@e-mail-adresse.de" target="_blank">
  <img src="/wp-content/uploads/mail.png" alt="Mail schreiben" width="40" height="40" />
  </a>
</div>

Um den Kontaktbutton dann noch oberhalb von anderen Elementen anzuzeigen, muss man in der entsprechenden Sektion unter Section Settings -> Advanced -> Main Element den CSS-Code z-index:10; eintragen.

Bilder

• Die empfohlenen Bildergrößen für das Design mit Divi und all seine Bild-Module findest du in diesem Tutorial von Elegant Themes.
• So legst du einen Text über ein Bild (Text-Overlay): Nutze das Informationstext-Modul (Blurb) und füge dort das Bild und einen Titel ein. Füge dann im Reiter "Erweitert" folgendes zusätzliches CSS im Feld "Titel für Informationstext" ein:

position: relative;
top: -68px;
padding-top: 10px;
background-color: rgba(0,0,0,0.5);
pointer-events: none;

Wenn du das Bild verlinken willst, füge die Ziel-URL nur in das Feld "Link-URL für den Titel" ein (nicht in das Feld "Link-URL für das Modul". pointer-events: none; sorgt dann dafür, dass das Bild komplett klickbar ist - auch an der Stelle, wo das Text-Overlay ist.

• Wenn dein (Hintergrund)Bild in einem Vollbreiten-Modul (full width) aus irgendeinem Grund abgeschnitten wird, dann prüfe ob der Parallax-Effekt aktiviert ist. Bei diesem wird ein Teil des Bildes oben und unten auf den ersten Blick nicht angezeigt, sondern erst beim Scrollen. Wenn du den Parallax-Effekt deaktivierst, erhältst du weitere Einstellmöglichkeiten und kannst erzwingen, dass das Bild größer oder sogar in der tatsächlichen Größe angezeigt wird.
• Um die Spaltenanzahl beim Gallery-Modul anzupassen, siehe hier.

Icons

• Wie du die eingebauten Divi-Icons an beliebigen Stellen einbauen kannst, siehe hier.
• Um eine Aufzählung mit einem Divi-Icon zu machen: Erstelle ein Text-Modul mit der Aufzählung. Gib diesem Modul eine eigene Klasse mit, zum Beispiel mein-haken. Nutze folgendes CSS:

.mein-haken ul li {
  list-style: none;
  padding-left: 2em;
  padding-bottom: 1em;
}
.mein-haken ul li::before {
  font-family: ETmodules;
  content: '\5a';
  font-size: 1.2em;
  color: #ef6a28;
  margin-left: -2em;
  margin-right: 0.5em;
  padding-right: 0.5em;
  vertical-align: middle;
}

Das Icon legst du über content fest. Nutze hierbei die 2 Zeichen nach dem x in den hier gelisteten Unicodes und füge davor ein \ ein.
Eine Alternative zu diesem CSS-Ansatz: Nutze für jeden Aufzählungspunkt ein Informationstext-Modul und stelle die "Bild-/Icon-Platzierung" auf links ein.

Google Fonts lokal einbinden

Im Hinblick auf die DSGVO möchtest du eventuell, dass die Google Fonts nicht vom Google-Server geladen werden, sondern lokal von deinem Server. Gehe wie folgt vor um das zu bewerkstelligen:

1. Schaue dir an, welche Google-Schriftarten du gegenwärtig benutzt.
2. Deaktiviere die Google Fonts unter Divi > Theme-Optionen > Allgemeines > Allgemein > "Google-Schriftarten verwenden" deaktivieren.
3. Nutze das Tool https://gwfh.mranftl.com/fonts. Suche dir dort die verwendeten Schriftarten heraus, lade sie herunter und dann auf deinen Server hoch. Kopiere dir den CSS-Code und binde ihn in die style.css deines Child-Themes ein.

Sonstiges

• Wenn du auf einer Unterseite, zum Beispiel auf einer LandingPage, in allen Modulen eine bestimmte Schriftart verwenden willst, die sich von der Standard-Schriftart unterscheidet: Gehe im Divi Builder auf Seiteneinstellung -> Fortgeschritten -> Benutzerdefiniertes CSS und füge dort (Beispiel Schriftart "Roboto") Folgendes ein:

body {
  font-family: 'Roboto' !important;
}

Dies überschreibt die Schriftart, es sei denn du hast in bestimmten Module explizit eine Schriftart gesetzt.

• Wie man One-Page-Websites (One-Pager) mit Divi aufbaut: [6]
• Um ein Portfolio Grid dreispaltig (statt vierspaltig) machen: [7]
• Zusätzliche mögliche Animationen (zum Beispiel für den Slider) findest du zum Beispiel hier.

Globalität

Das Divi-Theme erlaubt es dir bestimmte Module global zu machen und (grafische) Presets für Modultypen anzulegen. Außerdem können Farben global festgelegt werden.

Globale Module

• Wenn du ein bestimmtes fertig designtes Modul auf weiteren Unterseiten verwenden möchtest, kannst du das Modul in der "Bibliothek" speichern und es dann über die Bibliothek an den weiteren Stellen laden.
• Wenn Änderungen am Modul sich auf alle Stellen auswirken sollen, an denen das Modul eingebaut ist, dann muss man das Modul zu einem globalen (hellgrünen) Modul machen. Mehr Infos dazu findest du hier.

Presets

Seit Mitte 2020 kannst du mit Presets bestimmte Designs für bestimmte Module speichern. Du kannst zum Beispiel Presets für einen roten, gelben und grünen Button anlegen. Wenn du einen der Button-Presets im Nachhinein bearbeitest, dann ändern sich alle Buttons automatisch mit, die diesen Preset nutzen. Das kann sehr viel Zeit sparen.

“

Classes are to CSS,
what presets are to Divi.

Nick Roach

Du kannst bei jedem Modultyp auch einen Default Preset auswählen. Wenn du diesen anpasst, werden alle Module dieses Typs (zum Beispiel alle Textmodule) auf der Seite gemeinsam angepasst. Mehr Infos zu den Divi Presets in diesem Blogbeitrag von Elegant Themes*.

Unterschiede zu globalen Modulen:

• Presets beeinflussen das Design der Module, aber nicht den eigentlichen Inhalt (Text, Bild, Video).
• Mit einem globalen Modul legst du das Design des Moduls und gleichzeitig den Inhalt fest.

Globale Farben

Seit Februar 2021 kannst du Farben global für deine Website definieren. Nutze dafür bei den Farbeinstellungen den Reiter "Global". Wenn du eine globale Farbe anpasst, werden alle Elemente angepasst, die diese globale Farbe haben. Damit kannst du sehr viel Zeit sparen. Über die Rechtsklick-Funktion "Suchen & Ersetzen" ist es auch möglich alle bestehenden Element einer gewissen (nicht-globalen) Farbe auszuwählen und diesen eine globale Farbe zuzuweisen. Mehr über die globalen Farben in diesem Elegant Themes-Video.

Divi AI

Im Oktober 2023 wurde Divi Code AI vorgestellt. Mit Hilfe von einfachen Prompts, kannst du Divi CSS-, HTML- und JavaScript-Code erstellen lassen um Divi-Module designtechnisch anzupassen. Die Divi Code AI wurde speziell auf den Aufbau des Divi-Codes trainiert und kann so viel präziser auf Prompts eingehen und die entsprechenden Elegant Themes-Klassen anpassen.

Hier erhältst du alle Infos zu Divi AI*.

Individuelle Meta-Description ohne Plugin

Du kannst die Meta-Description und den Meta-Title deiner Posts auch ohne Zusatzplugin ändern. Gehe hierzu folgendermaßen vor:

Schritt 1: Aktivieren der benutzerdefinierten Meta-Description:

• Wähle in der Seitenleiste Divi aus und in der Kopfzeile der Theme-Optionen die Registerkarte „SEO“.
• Wähle nun aus den unteren 3 Registerkarten „Einzelbeitragsseite SEO“ aus.
• Gib im Feld "Benutzerdefiniertes Feld "Name" für die Verwendung im Titel" Folgendes ein: seo_title
• Gib im Feld "Benutzerdefiniertes Feld "Name" für die Verwendung in der Beschreibung" Folgendes ein: seo_description
• Gehe auf "Änderungen speichern".

Schritt 2: Benutzerdefinierte Felder im WP-Dashobard sichtbar machen

• Öffne einen beliebigen Beitrag oder eine beliebige Seite.
• Wähle die drei vertikalen Punkte in der oberen rechten Ecke aus.
• Wähle im Listenmenü „Voreinstellungen“.
• Wähle im Pop-Up-Fenster „Bedienfelder“ und aktiviere den Punkt „individuelle Felder“.
• Aktualisiere die Seite anschließend.

Schritt 3: Erstellen eines benutzerdefinierten Feldes und Hinzufügen der ersten Meta-Beschreibung:

• Öffne einen Beitrag oder eine Seite im Standard-Editor (Gutenburg oder Klassisch).
• Scrolle bis ganz nach unten. Du siehst nun ein Feld für benutzerdefinierte Felder und Meta-Einstellungen.
• Wähle „Neu eingeben“.
• Gib in das Feld „Name“ den Schlüsseltext ein: seo_description
• Gib in das Feld „Wert“ deinen benutzerdefinierten Meta-Beschreibungstext ein.
• Wähle „Benutzerdefiniertes Feld hinzufügen“

Hast du einmal einen Feldschlüssel (hier: seo_description) angelegt, dann wird er automatisch gespeichert und du kannst ihn bei deinen anderen Seiten auch verwenden, indem du Schritt 3 wiederholst und den Wert individuell anpassen.

Schritt 4: Überprüfung
Gehe in den Quelltext und überprüfe ob die Meta-Tags vorhanden sind oder nutze ein Online-Tool um die Tags zu überprüfen.

Layout

Generelle Tipps

• Bevor du anfängst im Divi-Builder gewisse Abstände vor oder nach Überschriften anzupassen, füge am besten generelle Abstände in die custom.css deines Child-Themes ein.
• Bevor du Seiten duplizierst, prüfe ob sie auch in Mobile vernünftig dargestellt werden.
• Um Text ohne Formatierung im Divi-Editor einzufügen, gehe in den Texteditor und füge deinen Text dort ein. Im visuellen Editor werden voreingestellte Formatierungen immer automatisch übernommen, was zu ungewolltem HTML-Code führen kann.

Mobile Design

Diese Breakpoints nutzt Divi::

• Großer Desktop: 1405px und höher
• Standard Desktop: zwischen 1100px und 1405px
• Laptops und Large Tablets: zwischen 980px und 1100px
• Tablets: zwischen 768px und 980px
• Smartphones und small Tablets: zwischen 320px und 768px;
• Smartphones: zwischen 320px und 480px

Sonstige Tipps für das Mobile Design:

• Um die Reihenfolge der Spalten für Mobile zu ändern: Kopiere in diesem Tutorial den CSS-Code unter der Überschrift "2. Changing the Column Stacking Order On Mobile Using CSS Classes".
• Um die Schriftgrößen auf Tablet und Handy anzupassen, nutze den Customizer und dort den Punkt "Mobile Designs".

Spalten, Zeilen, Ausrichtungen

• Eine Zeile full-width (volle Breite) machen, obwohl man keine Full-width-Sektion ausgewählt hat: Gehe in die Zeilen-Einstellungen > Design > Größe einstellen. Stelle dort die beiden Werte "Breite" und "Maximale Breite" auf "100%".
• Buttons auf gleiche Ebene bringen: Reihe duplizieren, alles außer Buttons löschen. Auf Desktop diese neue Reihe anzeigen, auf Tablet und Handy nicht. Bei bestehenden Buttons genau anders rum.
• Inhalt in Spalten vertikal unten ausrichten: Aktiviere innerhalb der Zeile die Option "Spaltenhöhen ausgleichen". Gehe nun in die Spalte, deren Inhalt vertikal unten ausgerichtet werden soll. Setzt dort im CSS folgenden Code ein: align-self: flex-end;

Bedienung

Hier sammeln wir Tipps zur Bedienung des Divi Builders:

• Du kannst mit der rechten Maustaste auf Module klicken um mehr Optionen zu erhalten.
• Mit Strg + S kannst du Zwischenstände speichern.
• Um mehrere Module gleichzeitig zu ändern (bulk edit), markiere die entsprechenden Module einfach mit gedrückter Strg-Taste oder Shift-Taste.
• Seit April 2022 kannst du deine Sektionen in der Divi Cloud* speichern und bequem in andere von dir verwaltete Websites reinladen.

Performance

Mit der Version 4.10 veröffentlichte ElegantThemes im August 2021 ein Performance-Update, das Divi sehr viel schneller machte. Das Update beruht darauf, dass nur der Code geladen wird, der wirklich gebraucht wird. Beispielsweise wird Code von Modulen, die nicht auf einer Divi-Seite eingebunden sind, überhaupt nicht geladen. Außerdem wird alles außer dem above-the-fold-Content erst verzögert geladen und die eine große CSS-Datei wurde auf viele kleine aufgeteilt.

Divi ist also von Haus aus sehr schnell. Trotzdem sagt Nick Roach von ElegantThemes, dass es zusätzlich sehr wichtig ist die Website zu cachen und ein CDN zu nutzen. Man kann auch seine Performance-Plugins weiterhin betreiben, denn die Divi-Optimierungen betreffen nur die Divi-Teile der Website..

Du musst keine bestimmten Einstellungen innerhalb von Divi vornehmen. Die Speed-Up-Einstellungen sind standardmäßig schon aktiviert. Wenn du sie verändern möchtest, findest du sie unter Divi > Theme-Optionen > Allgemeines > Performance.

Das CDN, das Divi für seine Seitentests nutzt, ist CloudFlare. Dort ist auch gleich das Caching mit inklusive.

Divi 5 wird in 2023 erscheinen. Die Version wird eine neue Foundation für den Builder einführen und sich auf die Verbesserung von Leistung, Stabilität, Skalierbarkeit und Erweiterbarkeit konzentrieren.

Übersetzungen

Die deutschen Übersetzungen von Divi sind Stand Februar 2018 zum Teil mangelhaft. Hier einige Hilfen was einige rätselhaften Übersetzungen wirklich bedeuten:

• Abstand = padding
• Begrenzung = margin
• Festgelegte Navigation / Feste Navigationsleiste = fixed navigation
• Thema = theme
• Aktivieren = Aktiviert

Um eigene Übersetzungen anzulegen, ist dieser Link hilfreich.

Was nicht möglich ist

• Man kann in seinem ElegantThemes-Konto nicht sehen, welche Websites man mit Divi erstellt hat (sprich: welche Websites den eigenen API Key nutzen). Diese Übersicht muss man also selbst führen.
• Den Permalink eines Beitrags beziehungsweise einer Unterseite kann man nicht im visuellen Divi-Builder ändern, sondern nur im normalen WordPress-Editor. Es macht also Sinn, erst den Permalink einzustellen und dann den visuellen Builder zu starten.

Sonstiges

• Wenn du Divi kaufst*, erhältst du auch Zugriff auf das Extra-Theme, das auch von einigen Nutzern gelobt wird. Außerdem erhältst du Zugriff auf alle Elegant Themes-Plugins. Das Plugin "Divi Builder" kannst du auch auf Themes nutzen, die nicht von Elegant Themes sind.
• Stand März 2021 gibt es über 750.000 Divi-Kunden. Deshalb ist das Netz voll mit Guides, Video Tutorials, und Divi Layouts.
• Der Hersteller Elegant Themes ist seit 2008 auf dem Markt.
• Falls der Divi-Builder nicht lädt, siehst du eventuell unter Divi > Support Center > System Status entsprechende Fehlermeldungen, die es zu fixen gilt. Zum Beispiel empfiehlt Elegant Themes ein memory_limit von 128 MB und eine post_max_size von 64 MB.
• Den Changelog aller Divi-Versionen findest du hier.
• Seit Februar 2020 bietet Divi eine Vielzahl von Scroll Effekten. Damit kannst du Elemente und Bilder ganz leicht animieren, sobald der User zu ihnen scrollt. Mehr Infos erhältst du in diesem Blog-Beitrag von Elegant Themes*.
• Falls ein Plugin eines anderen Herstellers ein JavaScript-Problem meldet (in der Browserkonsole), dann kann es helfen unter Divi > Theme-Optionen > Allgemeines > Leistung die Option "Verschieben Sie jQuery und jQuery Migrate" zu deaktivieren. Damit wird jQuery von Anfang an zur Verfügung gestellt, was für manche Plugins essentiell ist.

Auswahl von Seiten mit Snippets / Tutorials:

• https://www.elegantthemes.com/blog/
• ElegantThemes YouTube-Kanal
• https://elegantmarketplace.com
• https://quiroz.co
• https://divisoup.com
• und natürlich der Marketing United-Artikel, auf dem du dich gerade befindest 😉

Divi kaufen kannst du hier bei ElegantThemes*.

Alternativen zu Divi

Neben Divi gibt es andere bekannte PageBuilder für WordPress. Es gibt zum Beispiel:

• Elementor
• Beaverbuilder
• Avada
• Gutenberg
• Oxygenbuilder

*

Weiterführendes

• WordPress

                     

• Stefan Seidner-Britting
• Lisa Senft