All Collections
Divi Documentation
Customizing Divi
How to change the Blog Module layout to have featured image on the left and post info on the right
How to change the Blog Module layout to have featured image on the left and post info on the right

Changing the default Blog module FullWidth Layout to have the Featured Image on the left, and the post content on the right

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

Step 1: Edit the settings and in Advanced Tab > CSS Class set a custom CSS class for it, for example dt-blog :

Step 2: In Design Tab > Layout set the Blog Module to have the Fullwidth layout

Step 3: In Divi ➤ Theme Options ➤ Custom CSS add the following CSS Code:

@media only screen and (min-width: 1080px) {
    .dt-blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
        float: left;
        width: 30%;
        margin-right: 4%;
    }
    .dt-blog .et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {
        padding-left: 34%;
    }
}

The result will be:

Code Explanation:
In the above code, the width of the Feature image is set to be 30% and the space between the Featured Image and the Post content is set to be 4%, that means we need to set on the Post Content a padding-left of 34% (30 + 4 = 34).

In case you will want to use different Featured Image Size and a different space, don't forget to update the CSS code accordingly.

Did this answer your question?