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

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.
  • Mehr Infos zum Slider findest du in der Divi-Doku.

3 Ü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 = Fixed navigation

4 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.
Erzähl's weiter:

Wir freuen uns über deinen Kommentar: