Wenn man das Blog Modul in Divi verwendet dann gibt es 2 Desgin Auswahlmöglichkeiten, entweder zeigt man die Blogbeiträge im Grid an oder in der vollen Breite-Ansicht. Mit diesem kleinen Trick bekommt ihr eine weitere Einstellungsmöglichkeit und zwar könnt ihr jetzt alles als Liste darstellen.
Manchmal möchte man nicht Bild und Text nebeneinander haben, sondern einfach eine einfache Liste mit einem kleinen Hover Effekt und jetzt weisst ihr wie das geht.
Video
Blog Settings
Deaktiviere unter Blog Settings alle Elemente:
- Show Featured Image
- Show Read More Button
- Show Author
- Show Date
- Show Categories
- Show Comment Count
- Show Excerpt
- Show Pagination
CSS Klasse
Gib deinem Blogmodul diese CSS Klasse
1 | cb_blog_liste |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | /*abstand ganzes modul*/
.cb_blog_liste.et_pb_posts {
padding: 20px 10px 20px; /* abstand oben, li/re, unten*/
}
/*adjust the spacing and add the border after each blog post*/
.cb_blog_liste .et_pb_post:not(:last-child) {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #004c98; /* farbe unten nach listenpunkt */
}
.cb_blog_liste .et_pb_post:last-child {
margin-bottom: 0px;
}
/*link für ganze listenpunkt über ganze breite*/
.cb_blog_liste .entry-title a:before {
position: absolute;
display: block;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
}
/*icon design*/
.cb_blog_liste .entry-title a:after {
content: "\35";
font-family: ETModules;
font-weight: 800;
font-size: 1em;
line-height: 1em;
color: #777b88;
background-color: #f0f3f6;
position: absolute;
top: 2px;
right: 0px;
padding: 2px;
border-radius: 50%;
width: 1em;
text-align: center;
}
/*icon color bei hover*/
.cb_blog_liste .entry-title a:hover:after {
color: #fff;
background-color: #004c98;
transition: all ease .3s;
} |
0 Kommentare