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

Aus Marketing United
Wechseln zu:Navigation, Suche

Divi ist ein sehr weit verbreitetes 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:

2 Tipps & Tricks

2.1 Header

  • Um das Logo oberhalb der Menüzeile zu haben: Im Customizer unter Header & Navigation -> Headerformat -> Kopfzeilenstil "zentriert" auswählen.
  • Um ganz oben eine Benachrichtigung anzuzeigen, die weggeklickt werden kann (auch Promo bar, Promo-Leiste, Notification bar, Hello bar genannt): [1]

2.2 Menü

  • Um den grauen Strich unterhalb des Hauptmenüs zu entfernen:
#main-header {
    box-shadow: none;
}
  • fixed navigation deaktivieren: Unter Divi -> Theme Optionen -> General -> "Feste Navigationsleiste" auf Deaktivieren stellen.
  • Mega Menu erstellen: Einfach dem Überpunkt die CSS-Klasse mega-menu geben, siehe [2].
  • Beim Top-Menü ("Sekundäres Menü") Trennstriche zwischen den Menüpunkten einfügen (inspiriert von [3]):
#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 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> [1]. 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.

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: [4]
  • Um den Text "mehr lesen" in einen Button zu verwandeln: [5]
  • Um das Beitragsbild in den Blog-Beiträgen nicht über die komplette Breite gehen zu lassen: [6]
  • 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[2]:
#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-Widges anzeigen.

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

  • Abstand zwischen Content und Footer einfügen bei allen Seiten, die nicht über den Divi-Builder gebaut sind:
#main-footer {
    margin-top: 45px;
}
.et_pb_pagebuilder_layout #main-footer {
    margin-top: 0px;
}

2.8 Sonstiges

  • 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: [7]
  • Portfolio Grid dreispaltig (statt vierspaltig) machen: [8]
  • 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: [9]

3 Layout

3.1 Mobile Design

Diese Breakpoints nutzt Divi:[3]:

  • 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

3.2 Spalten, Zeilen, Ausrichtungen

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

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

5 Sonstiges

  • Wenn man Divi kauft*, erhält man auch Zugriff auf das Extra-Theme, das auch von einigen Nutzern gelobt wird. Außerdem erhält man Zugriff auf alle ElegantThemes-Plugins. Das Plugin "Divi Builder" kann man auch auf Themes nutzen, die nicht von Elegant Themes sind.
  • Es gibt sehr viele Divi-Kunden. Deshalb ist das Netz voll mit Guides, Video Tutorials, und Divi Layouts.

Auswahl von Seiten mit Snippets / Tutorials:

Divi kaufen kannst du hier bei ElegantThemes*.

6 Weiterführendes


Autoren

Jeder Autor hat seine eigenen Passagen zu diesem Artikel beigesteuert. Deshalb muss nicht jeder Autor alle Passagen des Artikels unterstützen.
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.

Einzelnachweise

  1. https://www.elegantthemes.com/blog/divi-resources/how-to-add-a-logo-to-extras-secondary-menu
  2. https://www.elegantthemes.com/blog/divi-resources/how-to-remove-sidebars-from-divi, abgerufen am 14.3.2018
  3. https://www.elegantthemes.com/blog/divi-resources/how-to-identify-divis-responsive-breakpoints-and-fine-tune-your-designs-with-media-queries, abgerufen am 10.4.2018
  4. https://octygon.com/3-ways-to-vertically-align-buttons-in-divi/ -> Methode 1, abgerufen 2017
Erzähl's weiter:

Was sagst du zu diesem Thema?