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

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.

Beitragsbild Header: @1822249 – Stockunlimited