Aufgrund des großen Erfolges meines ersten Beitrages CSS Änderungen für Divi Theme habe ich mich entschieden, noch weitere interessante Divi CSS Snippets zur Verfügung zu stellen.

Finden Sie hier jetzt spannende und interessante CSS-Änderungen für Divi, die Sie garantiert von der Konkurrenz abheben. Nutzen Sie diese kleinen Snippets, um Ihrer Divi-Website eine ganz spezielle und einzigartige Note zu geben – IHRE!

Beitragsbild links neben dem Text anzeigen

.et_pb_post a img {
height: 200px!important;
float: left;
width: 200px;
left: 0;
padding-right: 14px;}

@media only screen and (max-width: 980px) {
.et_pb_post a img {
float:none;
width:200px;
height:200px;}}

Zeigen Sie Ihre Beitragsbild links neben dem Text an! Diese Funktion wird immer wieder angefragt, da Elegant Themes diese Anzeige bisher nicht standardmäßig in Ihrer Blogdarstellung zur Verfügung gestellt haben. Beachten Sie bitte, dass dieses Snippet nur für die Darstellung “Volle Breite” gilt, nicht für “Gitter”. Ersetzen Sie width: und height: mit Ihrer gewünschten Bildgröße.

CSS-Snippet-Beitragsbild-links-anzeigen-200x200px

Bildgröße 200x200px

CSS-Snippet-Beitragsbild-links-anzeigen-400px-Breite-300px-Hoehe

Bildgröße 300x400px

 

 

Zusatz

Dieses CSS-Snippet greift global für Ihre ganze Website. Deswegen kann es passieren, dass u. U. die Bilder des Gallery-Moduls verzerrt dargestellt werden.

Wenn Sie also dieses CSS-Snippet ausschließlich für Ihr Blog-Modul wünschen, vergeben Sie hierfür eine extra CSS-Klasse und weisen den CSS-Code explizit zu.

Die CSS-Klasse vergeben Sie direkt in Ihrem Blog-Modul. Gehen Sie dafür in Ihre Blog-Modul-Einstellungen (1) und dort in den Tab Erweitert (2). Unter CSS-Klasse (3) vergeben Sie jetzt Ihre individuelle CSS-Klasse, z. B. bildlinks.

Divi Blogmodul-Einstellung CSS-Klasse vergeben

Jetzt ersetzen Sie die gloable CSS-Klasse .et_pb_post mit Ihrer neu definierten Klasse:

.bildlinks a img {
height: 200px!important;
float: left;
width: 200px;
left: 0;
padding-right: 14px;}

@media only screen and (max-width: 980px) {
.bildlinks a img {
float:none;
width:200px;
height:200px;}}

Damit wird nun der CSS-Code nur auf Ihr Blog-Modul angewendet.

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.

Eine Trennlinie zwischen einzelnen Beiträgen einfügen

.page article, .archive article, .search article {background: url(‘https://easy-web-solutions.de/wp-content/uploads/2016/06/1612059-CSS-Snippet-Beitrags-Trennlinie.png’) no-repeat center bottom;}

.page .et_pb_post, .archive .et_pb_post, .search .et_pb_post {margin-bottom: 90px; padding-bottom: 30px;}

Wenn Sie etwas Ihr Layout auflockern bzw. mit netten Elementen versehen wollen, ist dieses Snippet genau richtig. Fügen Sie auf diese Weise Ihren Beiträgen auf der Blogseite (Standard, Archiv und Suche) eine individuelle Trennlinie bei. Ersetzen Sie hierbei die URL (kursiv markiert) mit Ihrer individuellen Bild-URL.

*Die URL muss mit einem Anführungsstrich oben, nicht wie angezeigt unten, angegeben werden. Leider wird das nicht korrekt dargestellt.

Trennlinie zwischen einzelnen Beiträgen einfügen

Einen Rahmen um das Blogbild beifügen

.et_pb_post a img {border: 2px solid #2ea3f2;}

Eine interessante Erweitung, um Ihr Blogbild etwas aufzupeppen. Fügen Sie einen Rahmen bei!
Ersetzen Sie 2px mit Ihrer gewünschten Rahmenbreite, solid mit Ihrem gewünschten Rahmenlayout und #2ae3f2 mit Ihrer Wunschfarbe.

CSS-Snippet-Beitragsbild-Rahmen

Rahmen im Masonary Blog-Layout entfernen

.et_pb_blog_grid .et_pb_post {border: 0px; padding: 0 !important;}
.et_pb_image_container {margin: 0 !important;}

Sie lieben das Masonary-Layout, aber mögen den Rahmen rund um jeden Beitrag nicht? Mit diesem kleinen CSS-Snippet entfernen Sie diesen im Handumdrehen.

CSS-Snippet-Rahmen-Beitrag-Masonary-Layout-entfernen

CTA-Button ohne runde Ecken

.et_pb_promo_button, .et_pb_newsletter_button, a.et_pb_more_button, .et_pb_pricing_table_button {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0;
}

Standardmäßig sind die CTA-Buttons (wie z. B. im Slider) mit runden Ecken. Wenn Sie dies nicht mögen, nutzen Sie dieses kleine Snippet und erhalten einen rechteckigen CTA-Button.

CTA-Button - Ecken mehr abrunden

.et_pb_promo_button, .et_pb_newsletter_button, a.et_pb_more_button, .et_pb_pricing_table_button {
border-radius: 25px;
}

Standardmäßig sind die CTA-Buttons (wie z. B. im Slider) mit leicht abgerundeten Ecken. Wenn Sie diese noch etwas mehr abrunden möchten, nutzen Sie dieses CSS-Snippet und geben für den border-radius Ihre gewünschte Rundung ein. Je höher der Pixel-Wert ist, desto runder wird die Ecke.

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.

Ausblenden der Sidebar auf der Category-Seite

.archive #left-area {width: 100%; float: none; }

.archive #main-content .container:before, .archive #sidebar {display: none; }

Die Category- bzw. Archiv-Seiten werden bei WordPress standardmäßig selbst erstellt (abhängig vom verwendeten Theme), so auch bei Divi. Aktuell gibt es noch keine Einstellung, die Sidebar für speziell diese Seiten auszuschalten. Mit dem hier genannten CSS-Code haben Sie aber manuell die Möglichkeit, Ihre Kategorie- und Archiv-Seiten “fullwidth” zu gestalten.

Featured Bilder in Projekten nicht abschneiden

function portfolio_size_h($height) {
return ‘9999’;
}
add_filter( ‘et_pb_portfolio_image_height’, ‘portfolio_size_h’ );
function portfolio_size_w($width) {
return ‘9999’;
}
add_filter( ‘et_pb_portfolio_image_width’, ‘portfolio_size_w’ );

Diese Code-Schnipsel fügen Sie in die Datei “functions.php” ein. Ihre Projekt-Bilder werden nun nicht mehr abgeschnitten, sondern entsprechend Ihres Formates dargestellt.

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.

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

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

Beitragsbild Header: @1822249 – Stockunlimited