Wie Du benutzerdefiniertes CSS bei Divi verwenden kannst

Divi lässt sich auf viele unterschiedliche Weisen anpassen, was viele Vorteile mit sich bringt. So kannst Du benutzerdefiniertes CSS über mehrere Methoden hinzufügen und wir zeigen Dir in diesem Blog Artikel wie das genau funktioniert. Custom CSS bei Divi ist eine super Sache und bringt deiner Website noch mehr Individualität.

1: Inline-CSS

Du kannst wie auch in anderen Editoren Inline-CSS verwenden um Schriften, Abstände oder andere Eigenschaften festzulegen. Das geht schnell, hat aber auch seine Nachteile.

Besonders bei umfangreicheren Websites würde Inline-CSS die Seite unübersichtlich und aufwändig machen diese zu bearbeiten.
Angenommen die Website hat über 50 Inhaltsseiten und bei Überschriften wird Inline-CSS genutzt um bei Divi die Überschriften anders zu stylen. Dann müsste bei einer gewünschten Design Änderung man nochmals an alle Inline-CSS Sachen rangehen.

Einer der Vorteile von Inline-CSS ist, dass diese vom Caching ausgeschlossen sind. Wenn man auf automatisches Caching stellt, ist das nicht unbedingt ein Vorteil.

Um die Liste möglichst vollständig zu machen, habe ich auf die Möglichkeit mit Inline-CSS trotzdem aufgenommen.

2: Benutzerdefiniertes CSS im Design-Customizer

Diese Variante gefällt mir persönlich sehr gut. Denn hier lässt sich die Website quasi im Livemodus anpassen. Einfach in den Design-Customizer gehen und dann unten auf benutzerdefiniertes CSS klicken. Auf der linken Seite ist dann eine längere Eingabemaske zu sehen, bei der die ganzen CSS Anpassungen eingegeben werden können.

Legt man irgendwelche Anpassungen fest, wird auf der rechten Seite das Resultat live angezeigt. So sparst Du dir lästiges Speichern und Testen.
Bei den Kundenprojekten gehe ich oft so vor und packe die ganzen CSS Anpassungen in den Design-Customer um live arbeiten zu können.

Nach Fertigstellung kopiere ich die CSS Stylings und füge es in der CSS Datei meines Child-Theme ein. Dann noch ein paar schöne Kommentare mit dazu schreiben, damit es noch etwas übersichtlicher ist.

3: Registerkarte „Abschnitte, Zeile und Module“

Du hast das bei Divi bestimmt schon gesehen, dass es oben den Reiter „Erweitert“ gibt und dort hast Du die Möglichkeit eigene CSS Anpassungen direkt einzugeben.

Es gibt mehrere Felder und Du kannst die ID, CSS-Klassen, Vorher, Hauptelemente, After Elemente und auch benutzerdefiniertes CSS bei Divi nutzen. Die Vorher und Nachher Felder eignen sich für die Pseudoelemente die seit CSS3 möglich sind.

Bei den Zeilen kann jede Spalte individuell über CSS angepasst werden. Damit die CSS Anpassungen nur für eine bestimmte Zeile gelten soll, eignet sich diese Methode hervorragend. Was auch gehen würde, dass Du der Zeile eine CSS Klasse gibst und sie dann über die CSS Datei stylst.

4: Auf der Seite oder im Beitrag

Wenn Du den Divi-Builder nutzt, kannst Du bei jeder einzelnen Seite oder auch bei Beiträgen, Projekten und anderen Post-Types die den Divi-Builder zulassen, eignes CSS hinzufügen. Das ist sehr praktisch, wenn es bestimmte CSS Anpassungen nur für eine bestimmte Seite geben soll.

Rechts oben beim Divi-Builder findest Du diese Möglichkeit und nach dem Klicken auf das Einstellungen Symbol öffnet sich ein kleines Fenster. Dort kannst Du dann den CSS Code einfügen.

Leider ist das Eingabefenster sehr klein, sodass man viel scrollen und suchen muss. Daher kann ich diese Methode nicht so empfehlen. Wenn Du hier CSS Anpassungen vornimmst und die Seite exportierst, werden diese Anpassungen leider nicht übernommen.

5: Divi Design Optionsseite

Wenn Du auf Divi Optionen gehst, dann hast Du ganz am Ende eine große Box um dein benutzerdefiniertes CSS eingeben zu können. Nach einem Divi Update werden diese Änderungen nicht überschrieben.

Ein eigenes CSS-Stylesheet zu nutzen ist meiner Meinung nach die beste Möglichkeit. Sehr lange Dateien sind auch dann noch übersichtlich und nach einem Divi Update bleiben diese Änderungen alle erhalten.

Wenn Du wissen möchtest, wie Du einen Child Theme erstellst, dann findest du im Netz einige gute Anleitungen.