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

Aus Marketing United
Wechseln zu:Navigation, Suche
Divi Logo
Divi ist ein flexibles und komfortables WordPress-Theme.*

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

Divi kaufen kannst du hier bei ElegantThemes*.

1 Beispiele schöner Divi-Seiten

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

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

2 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.

  • 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): Anleitung siehe hier.
  • 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:[1]
#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)[2]:
header.et-l.et-l--header {
    position: fixed;
    z-index: 999;
    width: 100%;
}

2.2 Menü

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 (inspiriert von [1]):
#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> [3]. 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"): [2]
  • Um auch in der Desktop-Version das (mobile) Hamburger-Menü anzuzeigen: [3]
  • 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 [4].
  • 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;
    }
}

2.3 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.

2.4 Blog

  • Um das Datum auf das deutsche Format (also zum Beispiel "25. Februar 2018") zu stellen. In den Theme-Optionen -> General -> 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" anzupassen: [5]
  • Um den Text "mehr lesen" in einen Button zu verwandeln: [6]
  • Um das Beitragsbild in den Blog-Beiträgen nicht über die komplette Breite gehen zu lassen: [7]
  • Um das Beitragsbild in den Blog-Beiträgen gar nicht anzuzeigen: Divi -> Theme-Optionen -> Layout -> Einzelbeitrag-Layout -> "Thumbnails für Beiträge anzeigen" deaktivieren

2.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[4]:
#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.

2.6 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.

2.7 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:

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

2.8 Footer

  • 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;
}

2.9 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.

2.10 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[5].
  • 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.

2.11 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[6]:
.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.

2.12 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.
  • Wenn man ein bestimmtes fertig designtes Modul auf weiteren Unterseiten verwenden möchte, kann man 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 Modul machen. Mehr Infos dazu findest du hier.
  • Wie man One-Page-Websites (One-Pager) mit Divi aufbaut: [8]
  • Portfolio Grid dreispaltig (statt vierspaltig) machen: [9]
  • Zusätzliche mögliche Animationen (zum Beispiel für den Slider) findest du zum Beispiel hier.
  • Um bei eingebundenen YouTube-Videos nach dem Video keine empfohlenen Videos anzuzeigen: [10]

3 Layout

3.1 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.

3.2 Mobile Design

Diese Breakpoints nutzt Divi:[7]:

  • 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".

3.3 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%".[8]
  • 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.[9]

4 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.

5 Ü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

Um eigene Übersetzungen anzulegen, ist dieser Link hilfreich.

6 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.[10]
  • 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.

7 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 ElegantThemes-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[11]. Deshalb ist das Netz voll mit Guides, Video Tutorials, und Divi Layouts.
  • Browser-Kompatibilität: Divi sollte auf allen Firefox-Versionen der letzten 2, 3 Jahre laufen. Internet Explorer 11 (die letzte Version) und Edge sollten auch funktionieren.[12]
  • 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*.

Auswahl von Seiten mit Snippets / Tutorials:

Divi kaufen kannst du hier bei ElegantThemes*.

8 Alternativen zu Divi

Andere bekannte PageBuilder für WordPress sind zum Beispiel:

9 Weiterführendes

                     


Autoren

Jeder Autor hat seine eigenen Passagen zu diesem Artikel beigesteuert. Deshalb muss nicht jeder Autor alle Passagen des Artikels unterstützen.<br />Zahl in Klammern = Anzahl der Artikel-Bearbeitungen dieses Autors. Eine hohe Anzahl bedeutet nicht zwangsweise, dass dieser Autor auch viel Inhalt zum Artikel beigesteuert hat.

  1. Hide the Divi Theme Header, abgerufen am 12.10.2018
  2. Divi-Support am 27.12.2019
  3. How to Add a Logo to Extra’s Secondary Menu, zuletzt abgerufen am 20.2.2019
  4. How To Remove Sidebars From Divi, abgerufen am 14.3.2018
  5. https://stackoverflow.com/a/40554622/3194543, abgerufen am 21.1.2021
  6. Custom Bullet List Icons in Divi, abgerufen am 29.1.2021
  7. How to Identify Divi’s Responsive Breakpoints and Fine Tune Your Designs with Media Queries, abgerufen am 10.4.2018
  8. Where did the "Make This Row Fullwidth" button in Divi go???, abgerufen am 21.4.2021
  9. 3 Ways to Vertically Align Buttons in Divi -> Methode 1, abgerufen 2017
  10. Divi-Support per Mail am 29.10.2018
  11. Elegant Themes-Newsletter am 10.3.2021
  12. ElegantThemes-Support per Mail am 12.11.2018
Online-Marketing-Quiz
Erzähl's weiter:
Welche Erfahrungen hast du in diesem Bereich gemacht?