Custom CSS in Divi nutzen: Die 3 besten Methoden^*

Warum kommt man in Divi nicht ohne Custom CSS aus?

Divi ist unser Lieblings-WordPress-Theme für die meisten unserer Webdesign-Projekte – und es wird immer besser. Die letzten Performance-Updates haben die ehemals aufgeblähten Theme-Dateien optimiert und Divi auch in Sachen Ladezeit nach vorne gebracht. Der größte Vorteil bleibt die einfache Bedienbarkeit des Visual Builders mit zahllosen Design-Optionen.

Dennoch kommen wir bei jeder Seite an einen Punkt, wo wir etwas layouten oder designen wollen, was im Divi Visual Builder (noch) nicht vorgesehen ist – und hier kommt Custom CSS ins Spiel. Ob selbst geschriebene CSS-Grid-Layouts oder Snippets aus dem Netz: irgendwann stellen Sie sich die Frage:

Methode 1: CSS in der Divi Child Theme style.css

Jede Seite, die mehr als eine reine Landingpage ist, braucht ein Child Theme, um die Funktionen von Divi via PHP und JavaScript erweitern oder anpassen zu können. Und es ist auch der perfekte Ort, um eigenes CSS zu hinterlegen.

Nach der Installation Ihres Child Themes können Sie das CSS auf zwei Arten bearbeiten:

• Via Editor (z.B. Visual Studio Code) und FTP-Upload (z.B. FileZilla)
• Via WordPress Backend > Design > Theme-Editor > style.css

Ein typisches Snippet in der style.css sieht so aus:

/* Eigenes CSS im Divi Child Theme */
.et_pb_section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.et_pb_row {
  max-width: 1200px;
}

Methode 2: CSS in den Divi Theme-Optionen / Theme Customizer

Divi hat selbst eine Möglichkeit geschaffen, eigenes CSS seitenweit einzufügen – ohne Vorbereitung, direkt im Backend. Sie erreichen das Feld entweder unter:

• Divi > Theme-Optionen > Eigene CSS (ganz unten auf der Seite)
• Theme Customizer > Zusätzliches CSS

Der Theme Customizer hat den Vorteil des Live-Editings: Sie sehen Änderungen sofort, bevor Sie speichern. Ein typisches Snippet könnte so aussehen:

/* Divi Theme Customizer – Zusätzliches CSS */
.et_pb_button {
  border-radius: 4px;
  font-weight: 600;
}

.et_pb_text h2 {
  font-size: 28px;
  line-height: 1.3;
}

Methode 3: CSS via WordPress Plugin einfügen

Es gibt zahlreiche WordPress-Plugins zum Einfügen von benutzerdefiniertem CSS – jedes mit eigenen Stärken. Manche erlauben eine übersichtliche Bearbeitung von responsiven Breakpoints in separaten Fenstern, die Verwendung von SCSS oder die Auswahl, welches Script auf welcher Seite geladen wird.

Wer z.B. nur auf der Startseite bestimmte Animationen per CSS steuern will, ohne das global einzubinden, greift hier zum Plugin. Ein Beispiel mit CSS-Variablen:

/* Seitenspezifisches CSS via Plugin */
:root {
  --brand-color: #0a3cff;
  --text-dark: #1a1a2e;
}

.hero-section {
  background: var(--brand-color);
  color: #fff;
}

Unsere Empfehlung nach Use-Case

Divi Custom CSS im Detail: der Ratgeber

Hinter der Frage "Wo füge ich CSS ein?" stecken oft tiefere Fragen: Wie ist der Divi-CSS-Aufbau? Welche Klassen gibt es? Was tun bei Specificity-Problemen? Hier der ausführlichere Teil für alle, die verstehen wollen, was unter der Haube passiert.

Wie Divi CSS strukturiert

Divi erzeugt beim Speichern eines Layouts dynamisch CSS und schreibt es in eine gecachte Datei. Das bedeutet: Änderungen an Theme-CSS oder Custom-CSS sind manchmal erst nach einem Cache-Leeren sichtbar. Das gilt besonders, wenn Sie Divi's eigenen Caching-Mechanismus nutzen oder ein zusätzliches Caching-Plugin wie WP Rocket oder W3 Total Cache installiert haben.

Grundlegende Divi-CSS-Selektoren, die Sie kennen sollten:

/* Sections */
.et_pb_section { }

/* Rows */
.et_pb_row { }

/* Columns */
.et_pb_column { }

/* Module-Wrapper (jedes Modul) */
.et_pb_module { }

/* Spezifisches Modul (z.B. Text) */
.et_pb_text { }

/* Spezifisches Modul (z.B. Button) */
.et_pb_button_module_wrapper { }
.et_pb_button { }

Specificity-Probleme lösen

Divi generiert teils sehr spezifisches Inline-CSS, das Ihre eigenen Stile überschreibt. Die häufigste Lösung ist das Erhöhen der Spezifität oder das Nutzen von !important – wobei Letzteres nur als letztes Mittel taugt.

/* Ohne !important – durch höhere Spezifität */
body .et_pb_section.et_pb_section_custom {
  background-color: #f5f5f5;
}

/* Mit !important – nur wenn nötig */
.et_pb_button {
  background-color: #0a3cff !important;
}

Besser ist es, den Divi Module-CSS-Feldern direkt im Visual Builder eine eigene CSS-Klasse zu vergeben und diese dann in der style.css gezielt anzusprechen. Das ist sauberer und update-sicherer.

Responsive CSS in Divi

Divi hat eigene Breakpoints. Wenn Sie eigenes responsives CSS schreiben, orientieren Sie sich daran, damit es konsistent bleibt:

/* Divi Breakpoints */
/* Desktop: ab 981px */
/* Tablet: 768px – 980px */
/* Mobile: bis 767px */

@media (max-width: 980px) {
  .et_pb_section {
    padding: 30px 0;
  }
}

@media (max-width: 767px) {
  .et_pb_section {
    padding: 20px 0;
  }
}

CSS Grid in Divi einsetzen

Eine der häufigsten Anfragen, die wir bei unserer WordPress-Agentur sehen: Grid-Layouts, die Divi nativ nicht bietet. Über das Child Theme lässt sich das sauber lösen:

/* Custom CSS Grid innerhalb eines Divi-Rows */
.et_pb_row.custom-grid .et_pb_column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 767px) {
  .et_pb_row.custom-grid .et_pb_column {
    grid-template-columns: 1fr;
  }
}

Denken Sie daran: Die CSS-Klasse custom-grid vergeben Sie im Divi Visual Builder unter Erweitert > CSS-Klasse beim gewünschten Row-Element.

Performance: Zu viel Custom CSS vermeiden

Custom CSS ist mächtig, aber zu viel davon macht Ihre Site langsam. Halten Sie folgende Punkte im Blick:

• Schreiben Sie kein CSS, was Divi bereits out-of-the-box anbietet (Farben, Schriften, Abstände über die Design-Optionen steuern)
• Nutzen Sie CSS-Variablen für Farben und Abstände, statt sie überall einzeln zu wiederholen
• Prüfen Sie mit den Browser-Devtools, ob Ihr CSS überhaupt angewendet wird – ungenutztes CSS ist Ballast
• Bei großen Sites: Überlegen Sie, ob ein schlankes Theme oder ein Page Builder mit besserem Performance-Fundament der bessere Weg ist

Häufige Fragen zu Custom CSS in Divi

Joshua Stark

Geschäftsführer STARK Marketing

Joshua hat STARK 2016 gegründet und leitet die WordPress- und SEO-Praxis. Hunderte Divi-Projekte für Mittelstand, Agenturen und E-Commerce. Spezialisiert auf Performance-Optimierung und saubere Theme-Architektur.

Verwandte Artikel

* Dieser Artikel enthält keine Partnerlinks. Alle Empfehlungen basieren auf eigener Projekterfahrung.