Das Theme „DIVI“ von Elegant Themes ist wahrscheinlich aktuell eines der bekanntesten WordPress Themes.

Ich habe das Theme bei verschiedenen Kunden sowie auch auf einer meiner eigenen Seite im Einsatz. Im Laufe der Verwendung erhielt ich von meinen Kunden verschiedene Fragen zu Layout-Änderungen, die nicht standardmäßig durch die Theme-Einstellungen geändert werden können. Und auch bei der Gestaltung meiner eigenen Seite kam ich immer mal wieder zu dem Punkt, an dem ich Änderungen über CSS vornehmen „musste“.

In diesem Zusammenhang bin ich auf zahlreiche Ressourcen für CSS-Änderungen für Divi gestoßen, jedoch sind alle nahezu in Englisch.

Aus diesem Grund möchte ich hier eine kleine Übersicht geben, welche Möglichkeiten es gibt, die am meisten nachgefragten Änderungen durch CSS durchzuführen.

Ergänzung: Mit jedem Divi-Update kommen neue Funktionen im ePanel sowie den einzelnen Modulen hinzu. Diese lasse ich in meinem Beitrag generell außen vor!

Welche Änderungen können aber schon im Theme selbst vorgenommen werden?

Über die Theme-Optionen im Divi-ePanel
  • Header/Navigation: Fixed/Not fixed
  • Anzeige Social Media Icons: Facebook, Twitter und GooglePlus
Über Theme-Anpassung im Frontend (Design- und Modulmodifikator)

Der Design- und Modulmodifikator wurde mit den letzten Theme-Update überarbeitet und erweitert. Hier ein Auszug aus den aktuell möglichen Änderungsoptionen:

  • Änderung von Farben: Hintergrundfarbe, generelle Linkfarbe (Akzentcolor), Haupt-Schriftfarbe, Footer-Hintergrundfarbe, Menü-Link-Farbe, Farbe des aktiver Menülinks, Hintergrundfarbe der Navigation
  • Einstellung der Navigation: Vertikal vs. Horizontal
  • Gewünschtes Layout: Boxed vs. Fullwidth sowie einrichten der jeweiligen Breite
  • Anzeige der Social Media Icons: in der Kopf- bzw. Fußzeile
  • Anzeigen des Suchsymbols
  • Optionen für die Anzeige der oberen Seitenleiste: Email, Telefon
  • Einstellung der Schriftarten der verschiedenen Module
  • Anzeige auf mobilen Endgeräten (hier können z. B. Größen und Abstände für Desktop, Tablet und Smartphone verschieden eingestellt werden)
  • u.v.m.

Viele Änderungen müssen aber doch explizit über CSS vorgenommen werden

Um Änderungen über CSS vorzunehmen, gibt es generell verschiedene Möglichkeiten bei WordPress (unabhängig vom gewählten Theme):

Über die Divi Theme Options selbst

Die einfachste und schnellste Möglichkeit: Divi – Theme Optionen (1) – Allgemein (2) – Ihren CSS-Code hier eintragen -> Benutzerdefiniertes CSS (3). Da ich dies auch häufiger gefragt werden: Diese Änderungen bleiben auch bei einem Theme-Update bestehen, werden also nicht überschrieben. Trotzdem ist es ratsam, sich diese Änderungen regelmäßig abzuspeichern.

CSS-Änderungen mit Jetpack

Wer JetPack installiert hat, kann hierfür den CSS-Editor verwenden. Dies ist ebenfalls eine einfache Möglichkeit und durch die farbliche Code-Gestaltung für das Nachvollziehen von CSS-Änderungen sehr vorteilhaft.

CSS-Änderungen im Theme-Stylesheet

CSS-Änderungen in den Dateien des Stylesheets des Themes selbst. Davon rate ich allerdings ab, da diese Änderungen bei jedem Update des Themes wieder überschrieben werden und man schnell einen Überblick über die gemachten Änderungen verliert.

CSS-Änderungen mittels Child-Theme

Eine sehr professionelle und vor allem bei größeren Änderungen angeratene Variante ist das Anlegen eines Child-Themes. Dies ist jedocheine Alternative für fortgeschrittene WordPress-Nutzer.
Ich selbst nehme die Änderungen in den meisten Fällen das ePanel vor. Bei größeren Umfängen lege ich dann aber auch ein Childtheme an. Die Vorgehensweise ist jedoch individuell Geschmackssache – mein Präferenz soll keine Aussage darüber sein, was am Besten ist ?

Interessante CSS-Änderungen für das Divi-Theme

Anhand von Kundenanfragen und verschiedenen Ressourcen sind folgende Änderungen am meisten nachgefragt:

Höhe des Divi-Logos ändern

@media only screen and ( min-width:981px ) {
/* Set full-size logo height to 200px */
#logo { height: 200px; max-height: 200px !important; padding-bottom:18px; }
/*Set the „shrunken“ logo height to 100px */
.et-fixed-header #logo { max-height: 100px !important; padding-bottom:10px !important; }
/* Set the padding correctly (It should be: full-size height + 36px) */
div#page-container { padding-top: 236px !important; }
}

Diese Einstellung betrifft ebenfalls nur für die Desktop-Ansicht (wide displays). Die Höhe des Logos auf mobilen Endgeräten wird mit diesem CSS-Code nicht geändert.

Größe des Headers ändern

@media only screen and ( min-width:981px ) {
#main-header { min-height: 150px !important; } /* normal */
#main-header.et-fixed-header { min-height: 250px !important; } /* shrunken header */
}

Probieren Sie hier die verschiedenen Pixel-Größen aus, bis Sie Ihre passende Größe gefunden haben. Diese Einstellung ist außerdem nur für die Desktop-Ansicht gedacht. Das Menü auf mobilen Endgeräten wird mit diesem CSS-Code nicht geändert.

Divi Header ausblenden

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

Auf diese Weise blenden Sie den gesamten Header von Divi aus. Ihr Inhalt „rutscht“ dann automatisch nach ganz oben, als wenn gar kein Header vorhanden wäre.

Header-Navigation - die Breite des Untermenüs ändern

#top-menu li li a {
width: 200px;
}

Manchmal kommt es vor, dass Menüeinträge im Untermenü ungünstig in der Zeile umgebrochen werden. Über diesen CSS-Code können Sie die Breite variabel ändern. Ersetzen Sie den Wert width: 200px mit Ihrer individuellen Breitenangabe.

Generelle Schriftgröße ändern

body { font-size:130% !important; }

Über diesen CSS-Code wird die Schrift für alle Haupttextkomponenten geändert – wie z. B. Body, Sidebar und Footer.

Die Größe der Schriftarten kann jetzt auch sehr komfortabel und für die verschiedenen Module individuell über den Design- und Modulmodifikation geändert werden.

Farbe des Footers ändern

#footer-bottom { background-color: #ff0000 !important; }

Passen Sie die Farbe nach Wunsch an, indem Sie #ff0000 mit Ihrem Farbcode ändern.

Header-Navigation ausblenden

#et-top-navigation { display:none; }
@media only screen and ( min-width: 981px ) {
#logo { padding-bottom: 18px; }
.et-fixed-header #logo { padding-bottom: 10px; }
}

Mit der ersten CSS-Code-Zeile wird die komplette Navigations-Bar (Menü) ausgeblendet. Der nachfolgende CSS-Code fügt etwas Abstand unter dem Logo hinzu, damit der Header nach dem Ausblenden der Links nicht zu klein wird.

Schriftart des Untermenüs als 'fett' darstellen

#et-secondary-menu, #top-header { font-weight: bold; }

Passen Sie die Farbe nach Wunsch an, indem Sie #ff0000 mit Ihrem Farbcode ändern.

Sidebar in Project-Category Page ausblenden

.tax-project_category #sidebar, .tax-project_category .container::before { display: none; }
.tax-project_category #left-area { width:100%; }

Standardmäßig wird auf den Kategorie-Seiten der Portfolioseiten die Sidebar angezeigt. Mit diesem CSS-Code können Sie diese ausblenden.

Breite der vertikalen Navigation anpassen

.et_vertical_nav #page-container #main-header { width: 300px; }

Passen Sie die Breite nach Wunsch an, indem Sie den Wert 300px entsprechend Ihrer Breite ändern.

Die Abstände der Pagebuilder 'Sections' ändern

:not(.et_pb_fullwidth_section).et_pb_section { padding-top: 50px !important; padding-below: 50px !important; }

Die Standardeinstellung sind 50px. Passen Sie diese nach Ihren Wünschen an.

Die Abstände der Pagebuilder Zeilen 'Rows' ändern

.et_pb_row { padding-top: 30px !important; }

Die Standardeinstellung des Zeilenabstandes sind 30px. Passen Sie diese nach Ihren Wünschen an.

Suchsymbol in mobiler Ansicht ausblenden

@media only screen and ( max-width: 980px ) {
#et_top_search { display:none; }
}

Auf diese Weise unterdrücken Sie die Anzeige des Suchsymbols (Magnifying Glass) auf mobilen Endgeräten. In der normalen Desktop-Ansicht bleibt das Suchsymbol bestehen.

Öffnen der Social Media Icons in neuem Tab

Divi bringt standardmäßig eigene Social Media Icons mit. Aktiviert, öffnen sich diese aber nicht automatisch in einem neuen Tab oder Fenster. Diese Funktion erreicht man, indem folgender Code in dendes Templates eingefügt wird – Divi Theme Optionen (1) –> Integration (2) –>  Header-Code aktivieren (3) –>
‘Code dem < head > Ihres Blogs hinzufügen’ hinzufügen (4):

<script type=”text/javascript”>
(function($) {
$(document).ready(function() {
$(‘.et-social-icons .et-social-icon a’).click(function(e) {
e.preventDefault();
var url = $(this).attr(‘href’);
window.open(url, ‘_blank’);
});
});
})(jQuery);
</script>

Divi Header-Code aktiveren - Script Social-Media-Tabs

Hierbei handelt es sich nicht um einen klassische Anpassung des CSS-Codes, sondern eine Erweiterung über des Templates.

CSS-Änderungen mit dem Divi-Booster

Der Divi-Booster ist ein ganz neues Plugin, welches einfache Layout-Änderungen über Plugin für viele „Standard-Themen“ möglich macht.

Generelle Funktionen:

  • Mehr als 50 Optionen für Layout-Konfiguration in Divi
    • Höhe Slider ändern
    • Shrinking des Headers stoppen bzw. die Größe anpassen
    • Nur das Layout für eine spezielle Seite ändern
    • Halbtransparenter Hintergrund für Text im Slider
    • Page Builder auch in Beiträgen verfügbar machen (Standard nur in Seiten verfügbar)
  • Einfache Installation und Handhabung über WordPress Backend –> keine CSS-Kenntnisse notwendig
  • Schnell in der Verwendung: Pre-Kompilierung und Minimierung von CSS und JavaScript nach Abspeichern der Konfiguration (Vorteil gegenüber Nutzung von ChildThemes)

Interessante Links für Ressourcen (alle in Englisch):

Hier geht es zu weiteren ausführlichen Informationen zu Änderungen, die für Divi vorgenommen werden können – nicht nur per CSS sondern teilweise auch mit Anpassung verschiedener PHP-Dateien:

Jetzt ganz neu - meine Facebook-Gruppe

“Divi WordPress Theme – Unterstützung und Austausch”

Beitragsbild Header: @Pure Solutions Adobe Stock 77868987