Show Blog Module Featured Images to the Left of Post Titles and Extracts

Improve your Divi blog module post listings with this handy tip
from Andrej of divitheme.net

By default, the featured images of your blog posts in the Divi blog module show big at the top of your blog posts' titles and extracts. These images are automatically stretched to the full width of your blog module. So, if your blog module takes e.g. 3/4 of your website's width, the images will be pretty big. Also, if they are smaller than that, they will be enlarged automatically and that may really not look nice. Below you can see an example of what I'm talking about. This is an example of my own blog divitheme.net/blog – I'm not using featured images for my blog posts, but for this example I have enabled this feature, so that you can see how it looks.

I believe you will agree with me that this doesn't look right. Now, I will tell you how to fix this problem. There is a simple CSS trick that you can use to make the images smaller and aligned to the left of the posts' titles and extracts.

Simply add the following code to the Custom CSS field in the Divi Theme Options or add it to the stylesheet.css file of your child theme:

So after applying this code, it will look like this:

Note: You can adjust the values 335px and 180px in the code to fit your needs. In my example I set the featured images to have 335 pixels in width and 180 pixels in height.

I hope this tutorial will help you to make your Divi blog look better, good luck!

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

4 Comments

  1. Asif

    does not work for me? reason?

    Reply
    • dan

      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
  2. Brad Flecke

    Thank you!!

    Only one problem: Overlay feature no longer works.

    Do you have a workaround?

    Reply
    • dan

      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

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