Divi Snippets

von Geno Quiroz und anderen Divi - Experten

Zum schnellen einfügen in die Style-Datei des Child-Themes

Blog Snippets

Ändere die Farbe des Blog Sidebar Divider

Für eine andere Farbe einfach den Hex-Code ändern

/* Blog vertical divider */
#main-content .container::before {background-color: #52255E;}

Ein Snippet von Stefan Borg

Ein eigener Teiler zwischen den Posts

Mit diesem keinen Codeschnipsel könnt Ihr ein Bild zwischen die Liste der Blog-Artikel setzen. Wie das Ganze aussieht, seht Ihr hier.

 /* Bild zwischen den Artikeln einsetzen */

.page article, .archive article, .search article {
 background: url(https://jetzt-lerne-ich-divi.de/wp-content/uploads/2015/09/divider_002.png) no-repeat center bottom;
 }
 .page .et_pb_post, .archive .et_pb_post, .search .et_pb_post {
 margin-bottom: 60px; padding-bottom: 60px;
 }
Beitragsbilder neben dem Post-Titel auf der Blog-Seite
/* Beitragsbilder neben dem Post-Titel auf der Blog-Seite */

.et_pb_post {
 clear:both;
 float:none;
}

.et_pb_post a img{
 height: 200px!important;
 float: left;
 max-width:200px;
 height: auto !important;
 left: 0;
 padding-right: 14px;}
 
/* Mehr lesen - Link nach rechts schieben */
 .et_pb_post a.more-link {
	float: right;	
 }
 
@media only screen and (max-width: 980px) {
.et_pb_post a img{
 float:none;
 max-width:200px;
 height: auto !important;
 height:200px;}}


Beitragsbilder mit Rahmen neben dem Post-Titel auf der Blog-Seite
/* Beitragsbilder mit Rahmen neben dem Post-Titel auf der Blog-Seite */

.et_pb_post {
 clear:both;
 float:none;
}

.et_pb_post a img{
 height: 200px!important;
 float: left;
 max-width:200px;
 height: auto !important;
 left: 0;
 margin-right: 14px;
 border: 1px solid #ccc;
 }
 
/* Mehr lesen - Link nach rechts schieben */
 .et_pb_post a.more-link {
	float: right;	
 }
 
@media only screen and (max-width: 980px) {
.et_pb_post a img{
 float:none;
 border: 1px solid #ccc;
 max-width:200px;
 height: auto !important;
 height:200px;}}

Button Snippets

Runde Ecken bei Buttons entfernen
/* Runde Ecken bei Buttons entfernen */
.et_pb_promo_button, .et_pb_newsletter_button, a.et_pb_more_button, .et_pb_pricing_table_button {
 -moz-border-radius: 0;
 -webkit-border-radius: 0;
 border-radius: 0;
 }