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

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

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

38 Comments

  1. Many thanks for this. Really appreciate the effort of putting your own experiences out on the web for everyone to see!

    Reply
    • Thanks Carlos!

      Reply
  2. What would us non-coders do without people like you, thank you so much. Worked like a charm, I just adjusted the percentages here and there

    Reply
    • Ha ha, live a simpler, happier life, probably πŸ™‚ Great to hear it worked for you!

      Reply
  3. Hi Dan,

    This is great coding stuff, it definitely worked for my site, the only problem I have now is that when i also add the "read more" button on there, as in when I enable it, that read more area/words/section goes to a new line and goes underneath my image when it should follow my excerpt, right next to the if words of the excerpt. Any idea how to fix this to make the "read more" enabled option to immediately follow the excerpt and not to under the image. Currently my image is to the left and the excerpt is on the right. The click here option goes to the left under the image. THANKS!

    Reply
    • Hey Drew, I've updated the code to do this. Note that to make it work neatly I've changed the width from px to %. Ideally the height would be in % too, but currently it needs to be in px to make the overlay work. If you're not using overlays, you could set the height as % too, or as "auto" to maintain the aspect ratio. Hope it helps, but let me know if not. Thanks!

      Reply
      • This is great, thank you so much for all your help!

        I have a completely separate question which I am wondering if you can help with. On mobile, my header search button overlaps my logo. I would prefer not to make my logo smaller, is there a way to move the search section more to the right? or make it smaller, or a shorter field as to avoid the overlap?

        I don't use any plugins for the search button, i just inserted it in the header via wordpress option to add that in.

        thanks again!
        Drew

        Reply
        • Hey Drew, I think the following CSS should help:

          @media only screen and (max-width: 980px) {
          	#main-header .et-search-field { 
          		max-width: calc(100% - 30px);
          	}
          	#main-header .et-search-form {
          		max-width: calc(50% - 16px) !important
          	}
          }
          

          You can add it into the "Divi > Theme Options > General > Custom CSS" box, or child theme style.css file.

          Let me know if it doesn't solve it for you.
          Thanks!

          Reply
  4. hi!
    the code is working on desktop, unfortunately,
    1. on mobile The title is above the image almost with no space in between title and image.
    2. excerpt is below image, large space gap between them

    Can you please advise how to fix this?

    Many thanks

    Reply
    • Hi juli, the code doesn't actually make any changes on mobile. Instead, the Divi default blog module styling is left as is. The thinking behind this is that putting the featured image on the left wouldn't look very good on mobile as the small screen width doesn't really leave enough space for a featured image and text side by side.

      The issue you're having is actually caused by something else. You have the following javascript / jQuery code running on your site:

      jQuery(document).ready(function(){
      jQuery(".et_pb_posts article").each(function(){
      jQuery(">a:first-child", this).insertBefore(jQuery(".post-meta", this));
      });
      console.log("done");
      });
      

      This is moving the featured image after the title and causing the layout issues you mention. I'm not sure what is adding the code, but hopefully you recognize it. If not, try looking for it in the "Divi > Theme Options > Integrations" tab. Alternatively, try disabling your plugins one at a time to see if the order of the title / featured image is restored. Removing that code should fix the layout issues. You should then be able to use the margin / padding settings in the blog module Design tab to make any tweaks to the space between the title, image and excerpt.

      I hope that helps, but let me know if there's anything you get stuck on. Thanks!

      Reply
  5. Worked beautifully! Thank you.

    Reply
    • You’re welcome, Loo Han!

      Reply
    • You're welcome, Pe Jung Labs πŸ™‚

      Reply
  6. Much needed code, thanks for writing a blog on it.

    Reply
    • You're welcome, Shahzad πŸ™‚

      Reply

Submit a Comment

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

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

38 Comments

  1. Many thanks for this. Really appreciate the effort of putting your own experiences out on the web for everyone to see!

    Reply
    • Thanks Carlos!

      Reply
  2. What would us non-coders do without people like you, thank you so much. Worked like a charm, I just adjusted the percentages here and there

    Reply
    • Ha ha, live a simpler, happier life, probably πŸ™‚ Great to hear it worked for you!

      Reply
  3. Hi Dan,

    This is great coding stuff, it definitely worked for my site, the only problem I have now is that when i also add the "read more" button on there, as in when I enable it, that read more area/words/section goes to a new line and goes underneath my image when it should follow my excerpt, right next to the if words of the excerpt. Any idea how to fix this to make the "read more" enabled option to immediately follow the excerpt and not to under the image. Currently my image is to the left and the excerpt is on the right. The click here option goes to the left under the image. THANKS!

    Reply
    • Hey Drew, I've updated the code to do this. Note that to make it work neatly I've changed the width from px to %. Ideally the height would be in % too, but currently it needs to be in px to make the overlay work. If you're not using overlays, you could set the height as % too, or as "auto" to maintain the aspect ratio. Hope it helps, but let me know if not. Thanks!

      Reply
      • This is great, thank you so much for all your help!

        I have a completely separate question which I am wondering if you can help with. On mobile, my header search button overlaps my logo. I would prefer not to make my logo smaller, is there a way to move the search section more to the right? or make it smaller, or a shorter field as to avoid the overlap?

        I don't use any plugins for the search button, i just inserted it in the header via wordpress option to add that in.

        thanks again!
        Drew

        Reply
        • Hey Drew, I think the following CSS should help:

          @media only screen and (max-width: 980px) {
          	#main-header .et-search-field { 
          		max-width: calc(100% - 30px);
          	}
          	#main-header .et-search-form {
          		max-width: calc(50% - 16px) !important
          	}
          }
          

          You can add it into the "Divi > Theme Options > General > Custom CSS" box, or child theme style.css file.

          Let me know if it doesn't solve it for you.
          Thanks!

          Reply
  4. hi!
    the code is working on desktop, unfortunately,
    1. on mobile The title is above the image almost with no space in between title and image.
    2. excerpt is below image, large space gap between them

    Can you please advise how to fix this?

    Many thanks

    Reply
    • Hi juli, the code doesn't actually make any changes on mobile. Instead, the Divi default blog module styling is left as is. The thinking behind this is that putting the featured image on the left wouldn't look very good on mobile as the small screen width doesn't really leave enough space for a featured image and text side by side.

      The issue you're having is actually caused by something else. You have the following javascript / jQuery code running on your site:

      jQuery(document).ready(function(){
      jQuery(".et_pb_posts article").each(function(){
      jQuery(">a:first-child", this).insertBefore(jQuery(".post-meta", this));
      });
      console.log("done");
      });
      

      This is moving the featured image after the title and causing the layout issues you mention. I'm not sure what is adding the code, but hopefully you recognize it. If not, try looking for it in the "Divi > Theme Options > Integrations" tab. Alternatively, try disabling your plugins one at a time to see if the order of the title / featured image is restored. Removing that code should fix the layout issues. You should then be able to use the margin / padding settings in the blog module Design tab to make any tweaks to the space between the title, image and excerpt.

      I hope that helps, but let me know if there's anything you get stuck on. Thanks!

      Reply
  5. Worked beautifully! Thank you.

    Reply
    • You’re welcome, Loo Han!

      Reply
    • You're welcome, Pe Jung Labs πŸ™‚

      Reply
  6. Much needed code, thanks for writing a blog on it.

    Reply
    • You're welcome, Shahzad πŸ™‚

      Reply

Submit a Comment

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