Divi Theme CSS Snippet-Sammlung

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;
}

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.

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;
}

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.

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%;
}
}

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;
}

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;
}
}

Wenn das Menü insgesamt zu lang ist oder viele Unterpunkte hat wird es oft zu lang für Smartphones. Das Standard Menü lässt sich leider nicht scrollen und manche Punkte lassen sich nicht mehr erreichen. Mit diesm Snipppet machst du das mobile Menü „scrollbar“.

Ü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;
}

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;
}
}

Update: Automatisch justierendes Dropdown

Wer keine Lust hat, die Breite manuell einzustellen, kann den nachfolgenden Code anwenden. Damit justiert sich die Breite des Dropdown Menü automatisch nach der Wortlänge.

/*dropdown menu auto width*/
@media only screen and (min-width: 981px) {
.nav li ul {
width: fit-content;
display: flex;
flex-direction: column;
}
.nav li li {
white-space: nowrap;
}
.nav li li a {
width: auto !important;
}
}

Leider lassen sich Module zunächst nur untereinander in einer Zeile ausgeben. Manchmal braucht man aber zwei oder mehr Module nebeneinander und kann dafür keine neue Zeile anlegen. Z.B. zwei Buttons nebeneinander oder auch Text und Bild. Ein einfacher CSS-Snippet hilft. Dieser muss in beide Module eingegeben werden.

Ü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.

Zwar lässt sich die Zeilenhöhe der Listenpunkte individuell verändern. Trotzdem gibt es über und zwischen einer Liste oft unschöne und sehr kleine Abstände. Damit diese nicht über Code im Editor (br oder nbsp) gelöst werden, hilft dieser kleiner Code. Mittlerweile habe ich ihn fast immer im Einsatz und er macht das Lesen von Listen in Divi einfach besser.

Ü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;
}

Mehr ein allgemeiner Tipp, statt Divi bezogen.

Aber wir alle kennen es: Manchmal ist ein langes Wort z.B. in der mobilen Variante so lang, dass es aus dem sichtbaren Bereich fällt oder unpassend getrennt wird.

Im Text-Reiter vom Textmodul kann dann einfach an der gewünschten Trennstelle ein „& shy;“ eingefügt werden. Das Leerzeichen zwischen & und shy; bitte entfernen (Wenn ich es drin lasse verschwindet der Code). Damit trennt sich das Wort automatisch an der eingefügten Stelle.

Oft werden inhalte von Spalten nicht vertikal zentriert und das sieht nicht gut aus. Leider gibt es keine Lösung aus dem Builder.

Eine einfache Lösung ist folgende:
Zunächst im „Design-Tab“ der „Zeile“ unter „Größe“ die Spaltenhöhe ausgleichen auf „Ja“ stellen.

Im Anschluss in den Spalteneinstellungen unter Erweitert den Code zum benutzerdefinierten CSS des Hauptelements hinzufügen:

align-items: center;

Der Standard Hamburger in Divi ist nicht nur langweilig, sondern man erkennt auch immer direkt, dass es sich um eine Divi-Seite handelt. Das finde ich extrem nervig und eintönig.

Mit diesem kleinen Code kann man zumindest etwas daran arbeiten.

Der Code vergrößert zum einen den Hamburger etwas. Außerdem gibt es einen Rotations-Effekt beim öffnen. Und zu guter Letzt wird aus dem Hamburger ein „X“ beim öffnen. Leicht einzubinden, aber mit großer Wirkung!

Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/*change mobile hamburger size, add rotate effect and x*/
.mobile_menu_bar:before {
font-size: 37px;
display: block;
transition: all .6s ease;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: “M”;
transform: rotate(90deg);
}

Auch das Icon des Hamburger lässt sich leicht ändern. Zumindest in ein paar andere verfügbare Icons.

Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/*change mobile hamburger icon*/
.mobile_menu_bar:before {
content: “a”;
}

Dort wo nun das “a” steht kann ein beliebiger Buchstabe eingefügt werden. Hier meine Favoriten:

a= a

b=b

c=c

d=d

e=e

f=f

h=h