While Divi’s default blog module offers beautiful grid and fullwidth layouts, sometimes you need something different – something cleaner, more compact, and perhaps more traditional for displaying your posts. Enter the list layout!
A list layout for your blog module can be incredibly effective for improving readability, especially when you have many posts or want to emphasize a chronological order without the visual dominance of a grid. It’s perfect for news sections, resource libraries, or simply giving your blog a fresh, streamlined look.
A Streamlined Blog Post List
In this tutorial, I am going to show you how to transform your standard Divi Blog module from its typical grid or fullwidth presentation into a sleek, efficient list format. This means each post will occupy its own horizontal row, often with the featured image on one side and the post title, meta, and excerpt neatly aligned next to it. It’s a fantastic way to optimize space and guide your readers effortlessly through your content.
This customization will involve a bit of custom CSS to restructure the default Divi Blog module elements. Don’t worry, it’s simpler than it sounds, and the result is a beautifully organized and highly readable blog feed.
For a complete, step-by-step visual guide on how to implement this list layout transformation, be sure to watch our detailed video tutorial:
Implementing the List Layout Transformation
To convert your Divi Blog module into a sophisticated list layout, you’ll typically use custom CSS. The video tutorial above will walk you through exactly where to apply this code (e.g., within Divi’s Theme Options Custom CSS, a Code Module on your page, or your child theme’s style.css file).
Be sure to follow the steps below to change the specific Divi Blog Module settings you need to adjust before applying the code.
Step 1 – Make sure to set your Blog Layout to Full Width
Head on over to the Divi Blog Module and click on the Design tab. Here be sure set the Layout to full width.
This is going to cause your featured images to be huge and (in my opinion) not look good. Do not worry, we are not done yet and it will look better once we are done.
Step 2 Add the CSS Class
Before we can add the custom code, we need to tell the code which modules we would like to target. We do this by adding a CSS class.
To do so, head over to the Blog Module settings and click on the Advanced Tab. There open the CSS ID and enter the following class into the class field.
dd-blog-list-layoutStep 3 – Add the CSS
Now comes the fun part where we will see the changes.
Below is the CSS that you will need to copy and paste into your site. You can place this in Theme Options or Child Theme Stylesheet. If you are unsure, you can watch the video above to get a clearer idea where to paste it.
/*add media query so changes only affect tablet and desktop*/
@media (min-width: 768px) {
/*set the image width*/
.dd-blog-list-layout .entry-featured-image-url {
float: left;
margin-left: 4%;
margin-bottom: 0!important;
width: 30%;
}
/*set the details width*/
.dd-blog-list-layout .entry-title,
.dd-blog-list-layout .post-meta,
.dd-blog-list-layout .post-content {
float: left;
margin-right: 4%;
padding-left: 30px;
width: 62%;
}
}
A Fresh Look for Your Divi Blog
And there you have it! With a few lines of custom CSS, you can easily transform your Divi Blog module into a clean, modern list layout. This not only enhances the readability and organization of your content but also provides a stylish alternative to the default grid presentations.
Experiment with this list layout on different blog pages or category archives to see how it can best serve your content. We’d love to see your reimagined blog modules in the comments below! Happy designing with Divi!
