Divi CSS – die 3 besten Möglichkeiten, benutzerdefiniertes CSS in Divi zu nutzen!

Eigenes CSS in Divi einfügen

Einleitung

Divi ist unser absolutes WordPress Theme und es wird immer besser. Die letzten Performance Updates haben es geschafft, die ehemals furchtbar bloatigen Theme Dateien zu optimieren und Divi auch in der Performance ganz nach vorne zu bringen. Der größte Vorteil ist jedoch ganz eindeutig die einfache Bedienbarkeit des Visual Builders, mit zahllosen Design Optionen für die meisten Wünsche.

Dennoch kommen wir bei jeder Seite an einen Punkt, wo wir etwas layouten oder designen wollen, was (noch) nicht im Divi Visual Builder vorgesehen ist – und hier kommt das Custom CSS ins Spiel. Ob es selbstgeschriebene CSS Grid-Layouts oder einfach aus dem Internet kopierte CSS Snippets sind – es stell sich dem Divi Webdesign Anfänger eine Frage:

Wo füge ich mein benutzerdefiniertes CSS in Divi ein?

Wir haben schon hunderte Seiten mit Divi gebaut und haben unseren Workflow immer weiter optimiert. Und weil wir so nett sind, wollen wir nicht damit hinter dem Berg halten 😀 hier also unsere Tipps & Tricks zum Einfügen von CSS in Divi in einer Best of Liste – frei nach unserer Einschätzung und ohne Gewähr! 😉

Eigenes CSS in Divi Child Theme einfügen

CSS in der Divi Child Theme style.css (FTP / Theme-Editor)

Use CSS like a pro

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 sein eigenes CSS zu hinterlegen.

Dein benutzerdefiniertes CSS lässt sich nach der Installation deines Child Theme auf zwei Arten bearbeiten:

Via Editor (bspw. Visual Studio Code) und FTP-Upload (bspw. FileZilla)

Via WordPress Backend > Design > Theme-Editor > style.css

Vorteile

  • Besserer Editor mit Syntaxhervorhebung und -korrektur!
  • Volle Cache-Kontrolle
  • Alle Vorteile eines Child-Themes

Nachteile

  • Cache löschen nach jeder Änderung
  • Syntaxkorrektur im Theme-Editor erkennt teilweise neues CSS (bspw. CSS Grid) nicht und gibt einen Warnhinweis zur Bestätigung aus
Eigenes CSS in Divi Theme Optionen einfügen

CSS in den Divi Theme-Optionen / Theme Customizer

Schnell & unkompliziert

Divi hat selbst eine Möglichkeit geschaffen, dein eigenes CSS seitenweit nutzen zu können. Hier kannst du mit einem immer besser werdenden Editor deine Snippets einfügen oder selbst CSS schreiben.

Du erreichst das Feld entweder unter Divi > Theme-Optionen > Eigene CSS (ganz unten) oder im Theme Customizer > Zusätzliches CSS.

Vorteile

  • Keine Vorbereitung nötig
  • Live-Editing im Theme Customizer
  • Schnelle Änderungen ohne Cache manuell zu löschen

Nachteile

  • Teilweise Caching-Probleme im Zusammenspiel von Divi Cache & anderen Caching-Plug-Ins

CSS via WordPress Plug-In einfügen

Für die, die mehr wollen

Es gibt zahlreiche WordPress Plug-Ins zum Einfügen benutzerdefinierten CSS und jedes davon hat seine eigenen Vor- und Nachteile. Manche erlauben eine sehr übersichtliche Bearbeitung von responsiven Breakpoints in eigenen Fenstern, die Verwendung fortschrittlicher CSS-Varianten wie SCSS oder die Auswahl, welches Script auf welcher Seite verwendet werden soll.

Vorteile

  • Fast immer sehr gute & individuelle Syntaxhervorhebung und -korrektur
  • Spezielle Funktionen & ease-of-life-gimmicks

Nachteile

  • Potentielle Kompatibilitätsprobleme
  • Eigenes Einlernen in den Funktionsumfang
  • Ein weiteres Plug-In 🤪