Und hier geht es weiter mit Divi-CSS und Code Snippets – damit es in den anderen Beiträgen nicht so unübersichtlich wird!
Divi Sidebar anpassen
Ehrlich gesagt sieht die Divi Sidebar per Standard ja schon recht langweilig aus. Aber Sie können diese mit nur ein wenig CSS zumindest etwas aufpeppen!

.et_pb_widget ul li /***Hintergrund der Schrifttitel der einzelnen Beiträge***/
{
background-color: #f4f4f4;
padding: 5px;
color: #000
}

.widgettitle { /***Anzeige Widget-Titel farblich anpassen***/
border-bottom: solid 2px #2e74b5;
margin-bottom: 25px;
color: #2e74b5;
}

Eine Trennlinie zwischen den Widgets einfügen

#sidebar .et_pb_widget {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
margin-bottom: 10px; }
#sidebar .et_pb_widget:last-of-type {
border-bottom:0; }

Sie können mit diesem CSS-Snippets schnell und unkompliziert Trennlinien zwischen Ihre Widgets einfügen. Modifizieren Sie einfach die Höhe, Farbe und den Abstand der Linie nach Ihren Wünschen.

Höhe des Call to action einheitlich ausrichten
Standardmäßig wird die Höhe des Call to actions (Handlungsaufruf) durch die Höhe des Textes bestimmt. Möchte man nun z. b. 2 oder 3 Module nebeneinander anzeigen, haben diese dann normalerweise durch die unterschiedliche Textlänge eine unterschiedliche Höhe.

Divi-CTA-unterschiedliche-Hoehe

Um die Höhe gleichmäßig auszurichten, vergeben Sie dem Modul eine eigene CSS-Klasse, z. B. cta-hoehe:Divi-CTA-einheitliche-Hoehe

Anschließend fügen Sie den folgenen CSS-Code für die Ausrichtung wie gewohnt in den Divi-Theme-Optionen ein:

.cta-hoehe .et_pb_promo_description { min-height: 180px !important; }

Variieren Sie die Höhe 180px entsprechend nach Ihren Anforderungen.

Im Ergebnis erhalten Sie die gleichmäßige Ausrichtung der Module:

Divi-CTA-einheitliche-Hoehe-Ergebnis

Breite der Tabs gleichmäßig ausrichten
Standardmäßig werden die Tabs ohne Ausrichtung nebeneinander angeordnet. Dadurch entsteht oft rechts eine unschöne Lücke.

Um die Tabs gleichmäßig auszurichten, vergeben Sie dem Modul eine eigene CSS-Klasse, z. B. tab-ausrichten:Tabs gleichmaessig ausrichten

Anschließend fügen Sie den CSS-Code für die Ausrichtung wie gewohnt in den Divi-Theme-Optionen ein:

.tab-ausrichten .et_pb_tabs_controls li {
width: 20%; /*Ändern Sie die Breite entsprechend Ihrer Tabanzahl. 20% entsprechen 5 Tabs.*/
text-align: center;
}
@media screen and (max-width: 981px){
.tab-ausrichten .et_pb_tabs_controls li {
width: 100%;
text-align: center;
}
}

Im Ergebnis erhalten Sie die gleichmäßige Verteilung von 5 Tabs:

5 Tabs gleichmaessig ausgerichtet

Anzeige des mobilen Menüs anpassen
Divi bietet inzwischen eine weitere Möglichkeit, das Menü über die Einstellung Headerformat (1) anzuzeigen: Kopfzeilen-Stil “Slide in” (2).  Bei dieser Einstellung wird generell das mobile Menü (3) verwendet:

 

Divi-Menu-Slide-In-Mobile-Menu

 

Oft wird aber noch eine Einstellung “dazwischen” gewünscht. Über diseen CSS-Code können Sie steuern, ab welcher Bildschirmbreite, das Menü von der normalen Ansicht auf die mobile Ansicht umschaltet:

@media only screen and (max-width: 1250px) and (min-width: 981px){
#et_mobile_nav_menu {display: block;}}
@media only screen and (max-width: 1250px) and (min-width: 981px){
#top-menu {display: none;}}

Ersetzen Sie den Wert “max-width: 1250px” mit Ihrem Wunschwert, ab welcher Bildschirmauflösung das mobile Menü angezeigt werden soll.

Unteren Rahmen des Headers anpassen

#main-header {border-bottom: 10px solid #2ea3f2;}

#main-header {border: none;}

Standardmäßig ist dem Header ein sehr schmaler unterer Rahmen beigefügt. Mit diesem Snippet passen Sie diesen für Ihre Bedürfnisse individuell an. Varieren Sie 10px entsprechend Ihrer Vorstellung der Dicke sowie #2ea3f2 Ihrer Farbvorstellung.
Mit “border: none;” blenden Sie den unteren Rahmen komplett aus.