Divi CSS und Code Snippets Teil 3

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

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

Um die Höhe gleichmäßig auszurichten, vergeben Sie dem Modul eine eigene CSS-Klasse, z. B. cta-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:

Um die Tabs gleichmäßig auszurichten, vergeben Sie dem Modul eine eigene CSS-Klasse, z. B. tab-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:

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.

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