Divi CSS – die 3 besten Möglichkeiten, benutzerdefiniertes CSS in Divi zu nutzen!
Einleitung
Divi ist unser Lieblings WordPress Theme für die meisten unserer Webdesign Projekte 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! 😉
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
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 🤪
Fragen? Wünsche? Danke sagen?
Kommunikation!
Konnten wir euch helfen? Sind noch Fragen offen geblieben? Schreibt uns! Wir versuchen, so schnell wie möglich zu antworten 🙂