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

|

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

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

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

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

@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 values width, margin and height in the code to fit your needs.

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

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

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

41 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

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

This post may contain referral links which may earn a commission for this site

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

41 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

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