Divi Theme CSS Snippet-Sammlung
Obwohl ich das Divi-Theme liebe gibt es immer noch einige Anpassungen, die nur per CSS möglich sind. Da viele Probleme immer wieder auftreten, lege ich hier eine kleine Sammlung an, die einfach per CSS Lösungen bietet.
Diese Sammlung ist eher für mich selbst gedacht, damit ich nicht ständig neu nach den Snippets googlen muss. Falls hier doch wer vorbeischaut hoffe ich, euch hilft der ein oder andere Code auch weiter.

Divi Theme CSS Sammlung
Da ich die Snippets meist auf die schnelle brauche gibt es hier leider weder lange Erklärungen noch ganz genaue Anleitungen.
Wenn du Hilfe brauchst oder ich hier ein weiteres Snippet ergänzen soll, schreib mir gern eine Mail!
Die Liste ist fortlaufend und wird regelmäßig erweitert.
Texoptionen (Toolbar) sticky im visuellen Editor
Mein Favorit und must-have unter den Divi CSS Snippets.
Eines der am häufigsten auftretenden Probleme: Man schreibt lange Texte und die Text-Optionen (Headings, bold, link etc.) verschwinden und man muss hochscrollen, um sie zu erreichen.
Mit dem Code machst du diese Toolbar sticky. Und zwar in allen Modulen wo der Texteditor verwendet wird. Zumindest im visuellen Editor. Das spart auf Dauer viel Zeit und Nerven.
Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.
/* divi builder text style container sticky */
.mce-top-part {
position: sticky!important;
top: -60px;
}
Reihenfolge der Spalten in der mobilen Ansicht ändern
Eines der am häufigsten auftretenden Probleme: Die Anordnung der mobilen Reihenfolge ändern.
Auf dem Desktop gibt es zwei Spalten. Links ein Textmodul und rechts ein Bildmodul. In der mobilen Ansicht soll nun aber erst das Bildmodul folgen und dann das Textmodul.
Step 1: In die Zeileneinstellungen gehen und im Reiter „Erweitert“ auf „Benutzerdefiniertes CSS“ und „Hauptelement“ gehen.
Dort folgenden Code einfügen:
display: flex;
flex-wrap: wrap;
Step 2: Nun bei den Spalteneinstellungen im Reiter „Erweitert“ auf „Benutzerdefiniertes CSS“ und „Hauptelement“ gehen und die Reihenfolge festlegen.
Bei Spalte 1 wird nun für „Desktop“ und „Tablet“ „order: 1;“ eingestelt und für „Telefon“ „order: 2;“.
Bei Spalte 2 wird nun für „Desktop“ und „Tablet“ „order: 2;“ eingestelt und für „Telefon“ „order: 1;“.
Speichern und fertig ist die Anpassung der mobilen Reihenfolge für die Spalten.
Schrift der Error- & Erfolgsmeldung vom Kontaktformular ändern
Die Standardeinstellung ist weiß und lässt sich manuell über das Formular noch nicht ändern. Wer nun einen weißen Hintergrund hat, der bekommt bei der Error- oder Erfolgsmeldung keinen Text im Kontaktformular zu sehen.
Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ kann die Schrift gestyled werden. Hier das Snippet.
/* contact form message style */
.et-pb-contact-message {
color: #123456;
font-size: 18px;
text-align: left;
}
Buttons auf volle Breite stellen
Auch hierfür gibt es noch keine Einstellungsmöglichkeit im Theme Builder.
Über „Modul Einstellungen“ – dann Reiter „Erweitert“ – „Benutzerdefinierte CSS“ und „Hauptelement“ das Snippet einfügen:
width: 100%;
text-align: center;
Schon geht der Button über die volle Breite.
Blogmodul mit Bild links und Text rechts auf Desktop
In der Standardeinstellung lässt sich das Bild nur oberhalb des Text ausgeben.
Zunächst geben wir dem Blog-Modul eine Klasse.
Über „Modul Einstellungen“ – dann Reiter „Erweitert“ – „CSS-ID & Klassen“ die CSS Klasse definieren „bl-blog“.
Das Blogmodul Layout muss auf volle Breite eingestellt sein.
Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.
/* blog module image left style */
@media only screen and (min-width: 1080px) {
bl-blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
float: left;
width: 30%;
margin-right: 4%;
}
.bl-blog .et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {
padding-left: 34%;
}
}
White Space zwischen Blogbeitrag und Footer entfernen
Wer mit dem Divi Builder Blogbeiträge schreibt kennt das Phänomen: Unter den Beiträgen taucht auf einmal ein leerer Bereich auf. So entsteht eine unschöne Lücke zwischen dem Beitrag und dem Footer, vor allem wenn der Beitrag farblich abschliesst.
Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.
/* remove bottom padding and margin on posts */
.single .post {
padding-bottom: 0;
margin-bottom: 0;
}
Logo in Tablet- & Mobilansicht größer machen
Wer mit dem Divi Builder Blogbeiträge schreibt kennt das Phänomen: Unter den Beiträgen taucht auf einmal ein leerer Bereich auf. So entsteht eine unschöne Lücke zwischen dem Beitrag und dem Footer, vor allem wenn der Beitrag farblich abschliesst.
Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.
/* logo bigger on tablet and mobile */
@media only screen and (max-width: 980px) {
#logo {
height: 100% !important;
max-height: 100% !important;
width: auto;
max-width: 100% !important;
}
}
Mobiles Menü scrollbar machen
Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.
/* mobile menu scroll */
.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}
Drop-down Menü verbreitern
Das Standard Drop-down Menü von Divi ist leider begrenzt. Lange Wörter werden daher oft abgeschnitten und schlecht umgebrochen. Wer das Menü verbreitern will nutzt dieses Code. Die erste width entspricht der Gesamtbreite. Die zweite des Menüs, diese hat 40px weniger, da dies der Standard Seitenrand ist.
Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.
/* Increase width of drop-down menus */
@media screen and (min-width: 981px) {
.sub-menu {
min-width: 460px;
}
#top-menu li li a {
width: 420px;
/* Reduce padding on list items */
padding: 4px 12px;
}
}
Module nebeneinander ausgeben
Über „Modul Einstellungen“ – dann Reiter „Erweitert“ – „Benutzerdefinierte CSS“ und „Hauptelement“ das Snippet einfügen:
display: inline-block;
Das wars schon. Ggf. müssen danach noch die Zwischenräume angepasst werden. Es lassen sich auch problemlos mehr als zwei Module nebeneinander ausgeben.
Abstand über und zwischen Listenpunkten erhöhen
Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.
/* list margin top */
.entry-content ol li, .entry-content ul li {
margin-top: 15px;
}
Wenn du auch mit Divi arbeitest findest du hier einen umfangreichen Überblick aller Divi Theme Plugins.
Brauchst du Hilfe bei einem Problem mit Divi?
Ich bin Martin und unter Neoseo als Online-Marketer unterwegs. Ich freue mich immer über nette Zuschriften und gebe dir gern (kostenlos) Feedback zu deiner Webseite & deinem Problem.
Interesse? Schreib mir einfach eine Mail an:
martin@neo-seo.de