How to Use a List Layout in the Divi Blog Module

Written by Dan Mossop

By default, the featured images of your blog posts in the Divi theme's blog module show at full width above your blog posts' titles and extracts. This won't suit every design, in particular those where the image is not the most important element of the post. In this tutorial we'll show you how to make the images smaller and aligned to the left of the posts' titles and extracts, giving your Divi Blog module a list layout.

Before

Below you can see an example of the standard Divi blog module layout, provided by our friends at divitheme.net. The images are automatically stretched to the full width of the blog module. As a result, the images are pretty big. Also, small source images will be scaled up, potentially making the images look blurry / low quality.

After

Here's what we're aiming for instead: a more compact Divi blog module list layout with left aligned images.

How to Use a List Layout in the Divi Blog Module using CSS

We can easily make the desired changes with some CSS code. Here are the steps to add it to your site.

Open the Divi Theme Options

Divi's Theme Options include various settings for configuring Divi's overall behavior. To open the theme options, from your WordPress dashboard, click on "Divi" in the sidebar menu, then the "Theme Options" sub-menu item.

Navigate to the "Custom CSS" Setting

Now click on the "General" tab in the Divi Theme Options, which brings us to Divi's main site-wide settings. Scroll to the bottom and you should see a box called "Custom CSS" which allows you to add your own CSS code alongside that already added by Divi:

Add the Divi Blog Module List Layout Custom CSS

In the custom CSS box, enter the following CSS, which will make all the changes we need to create a blog module list layout with images on the left.

@media only screen and (min-width: 981px) {
	.et_pb_posts .et_pb_post img,
	.et_pb_posts .et_overlay {
		width: 38%;
		height: 180px !important;
		margin-right: 4%;
		float: left;
	}
	.et_pb_posts .entry-title,
	.et_pb_posts .post-meta,
	.et_pb_posts .post-content { 
	    float: right; 
	    width: 58%; 
	}
	body.rtl .et_pb_posts .et_pb_post img,
	body.rtl .et_pb_posts .et_overlay {
		float: right;
		margin-left: 4%;
		margin-right: 0;
	}
	body.rtl .et_pb_posts .entry-title,
	body.rtl .et_pb_posts .post-meta,
	body.rtl .et_pb_posts .post-content { 
	    float: left; 
	}
}

Note: You can adjust the width, height and margin values in the code to tailor the list layout to your needs.

Save the Divi Theme Options

To apply the changes, we need to save the Divi Theme Options. This can be done by clicking the "Save Changes" button at the top or bottom of the Divi Theme Options area:

View the Result

Now view your blog module on the front-end view of your site – it should now be in a list format with images on the left and titles / text on the right. 

Conclusion

There we have it, a quick and easy way to improve the design of your blog with a list layout with more compact images and more focus on the post titles. Enjoy the new layout and please feel free to ask in the comments if you need any help or have any questions about it.

Streamline Your Divi Workflow!

Copying images and content directly from your clipboard into Divi has never been easier. Say goodbye to the cumbersome save-and-upload routine and hello to streamlined efficiency. Perfect for tweaking your blog layout and enhancing your productivity.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

45 Comments

  1. THis is awesome THank you!

    Reply
  2. Hi, Thanks a lot for the code. I have used it for RTL site. Image showing right side. But overlay showing left site. Can you please help me? Thanks in advance. I have used below code. And the website is https://netindex.co.il/

    @media only screen and (min-width: 981px) {
    .et_pb_posts .et_pb_post img,
    .et_pb_posts .et_overlay {
    height: 180px !important;
    width: 335px;
    float: right;
    left: 0;
    margin-left: 25px;
    }
    }

    Reply
    • Hi Jewelosman, the last thing you need to do in that code is change the "left: 0;" line to "right: 0;". I've updated the code in the post above to work with both LTR and RTL sites, but either using that or modifying your existing code should work. Let me know if you need any further help with it. Thanks!

      Reply
  3. Hi Dan, thanks for this. Perfect!

    However, something happen after update divi and I don't know what to do.

    As you can see the title now is below the image. That's very strange.

    Reply
    • I forgot to say. On the visual builder the module display ok, but outside when i check see the site, it appears with the title below the image.

      Reply
      • Hi Adri, did you manage to fix this? I checked on the site you've linked and I can see the titles (e.g. "Reciclagem na rua") showing up in the correct place, to the right of the image. If you're not seeing that, perhaps firs try clearing your browser cache first in case it's holding onto some old CSS from before the update. If you can still see the issue after that, let me know. Thanks!

        Reply
  4. Oh awesome! This is exactly what I've been looking for for ages. Thanks so much, Dan! :)

    Reply
    • You're very welcome, Denise!

      Reply
  5. Perfect, thank you! Saved me a lot of time (:

    Reply
    • You're very welcome, Ashleigh :)

      Reply
  6. Hi, I've asked for assistance re: this blog/code for months now. Can someone please contact me.

    This code only works on pages 2 and older of my blog (not the blog landing page). Please help asap. This is the code I've used:
    /* blog page text beside image */
    @media only screen and (min-width: 981px) {
    .et_pb_posts .et_pb_post img,
    .et_pb_posts .et_overlay {
    height: 200px !important;
    width: 300px;
    float: left;
    left: 0;
    margin-right: 25px;
    }
    }

    You can view what I mean at: http://melissasteginus.com/blog

    Reply
    • Hi Melissa, I'm really sorry I haven't been able to respond to you sooner. I've just sent you an email about it. It sounds to me like the first page of the blog is being cached somewhere (possibly the browser). From my browser I see the code being applied on the first page as well, and the post listing look the same on the first and subsequent pages. Anyway, I've included more detail in the email. Thanks!

      Reply
  7. Works like a charm, thank you very much !

    Reply
  8. Hi, I tried this and it hasnt worked – maybe Im doing something wrong with it

    Reply
    • Hey Justin, any chance you are able to share a link to the page you're working on so that I can take a look at what is going on? Thanks!

      Reply
  9. Is there any way to get this to apply to a specific module vs. every blog module?

    Reply
    • Hi Nik, go into your blog module's settings, and on the "Advanced" tab, enter a value for the "CSS Class", such as "my-blog-module". Then in the code above replace the two occurrences of ".et_pb_posts" with ".my-blog-module". The code should then apply only to that module (and any others you give the same CSS Class value). I hope that helps!

      Reply
  10. does not work for me? reason?

    Reply
    • Hey Asif, are you able to share a link to the page you’re working on so that I can take a look? Thanks!

      Reply
  11. Thank you!!

    Only one problem: Overlay feature no longer works.

    Do you have a workaround?

    Reply
    • Hey Brad, I've just updated the code to better handle overlays, and have simplified the code slightly. Let me know if you spot any other issues with it. Thanks!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Random Divi Posts