Merubah BLOG MODULE menjadi list view ke bawah:
Make The Divi Blog Module Image On The Left And Details On The Right
Step #1: Set The Blog Module To Fullwidth Layout
Go the Blog Module settings to the Design tab and set the Layout to Fullwidth. Don’t worry if this looks wrong. We need to set it this way to make the next step much easier. If we kept it as a grid layout, it would be much harder to achieve the desired layout.
Step #2: Add The CSS Class To The Blog Module
In order to only affect certain Blog modules on the site, we can use a custom class. So open up the Divi Blog module settings and go to the Advanced tab. From there, open the CSS ID & Classess toggle. Place the class “pa-blog-list” into the CSS Class input field there.
Step #3: Set The Image and Details Width With CSS
Basically, we are telling the image to be only 30% wide. Then we tell the title, meta, and excerpt to be 70% wide. By adding a float left on them, it makes them stack up beside each other. This is better than some of the other similar tutorials because it keeps all the text on the side instead of wrapping around the image.
css : PAGE SETTING - CUSTOM CSS
/*add media query so changes only affect tablet and desktop*/
@media (min-width: 767px) {
/*set the image width*/
.pa-blog-list .entry-featured-image-url {
width: 30%;
float: left;
margin-bottom: 0!important;
}
/*set the details width*/
.pa-blog-list .entry-title,
.pa-blog-list .post-meta,
.pa-blog-list .post-content {
width: 70%;
float: left;
padding-left: 30px;
}
}
Start write the next paragraph here
Komentar