Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Change The Divi Blog Module Into A List Layout

Nelson Miller Profile Orange
In this tutorial, we will learn how to change the layout of the Divi blog module to create a list view with the image on the left and details on the right.

▶️ Please watch the video above to get all the exciting details! 👆

Make The Divi Blog Module Image On The Left And Details On The Right

Step #1: Set The Blog Module To Fullwidth Layout

Go the Blog Module settings to the Design tab and set the Layout to Fullwidth. Don’t worry if this looks wrong. We need to set it this way to make the next step much easier. If we kept it as a grid layout, it would be much harder to achieve the desired layout.

Step #2: Add The CSS Class To The Blog Module

In order to only affect certain Blog modules on the site, we can use a custom class. So open up the Divi Blog module settings and go to the Advanced tab. From there, open the CSS ID & Classess toggle. Place the class “pa-blog-list” into the CSS Class input field there.

Step #3: Set The Image and Details Width With CSS

Basically, we are telling the image to be only 30% wide. Then we tell the title, meta, and excerpt to be 70% wide. By adding a float left on them, it makes  them stack up beside each other. This is better than some of the other similar tutorials because it keeps all the text on the side instead of wrapping around the image.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*add media query so changes only affect tablet and desktop*/

@media (min-width: 767px) {

/*set the image width*/

.pa-blog-list .entry-featured-image-url  {
width: 30%;
float: left;
margin-bottom: 0!important;
}

/*set the details width*/

.pa-blog-list .entry-title,
.pa-blog-list .post-meta,
.pa-blog-list .post-content {
width: 70%;
float: left;
padding-left: 30px;
}
}

There you go! You now can adjust the widths if you want, just make sure the percentages equal 100%.

customize the Divi blog module styling

Add Some Fancy Styling

While we are here, let’s add some little touches that will make a huge impact. In the follow snippet, we are going to style each one of the events by adding spacing around them, a border radius, and a box shadow.

/*style the individual posts*/

.et_pb_post {
box-shadow: 0px 2px 80px 0px rgba(160,190,212,0.22);  
border-radius: 6px;
padding: 60px;
}
change the Divi blog module to a list layout with the image on left and details on right

Much better, right? Feel free to play around with this, and be on the lookout for more tutorials about the Divi blog module!

Make The Images Square

You may have seen our series on cropping Divi images to a certain aspect ratio. Those were so fun, and we wanted to show you how to do that here as well. So let’s make the blog image square, even if it isn’t when you upload it.

First of all, add “padding-top: 30%” to the first snippet above. That will make the height the same as the 30% width that we designated. Note that if you changed that number to something else, you will also have to make this number match.

Add the following snippet to your code in the Divi Theme Options.

/*blog image aspect ratio square 1:1*/

.entry-featured-image-url {
  padding-top: 30%;
  display: block;
}

.entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
customize the Divi blog module images to make them square

Much better, right? Feel free to play around with this, and be on the lookout for more tutorials about the Divi blog module!

Make The Divi Blog Module Image On The Right And Details On The Left

So if you want, you can use the same snippet as above and just change one thing. Instead of saying to float left, just say float right!

I’m not going to provide this snippet, because you should learn to edit CSS on your own! You can do it! :) 

NEW: Vertically Align The Details

I am updating this post with a new option. Now that the image is on the left, and details on the right, it might be nice if the details were aligned vertically. This gets a bit trickly, but it’s pretty easy to do if we use jQuery. However, note that this code is totally different than what was given above, so either use this, or the code above.

CSS

.pa-blog-list article{
    display: flex;
    align-items: center;
 }

 .pa-blog-list article a{
     width: 30%
 }

  .pa-blog-list article .wrap{
     width: 70%
 }

  .pa-blog-list .entry-title,
 .pa-blog-list .post-meta,
 .pa-blog-list .post-content{
     width: 100%;
 }

 @media all and (max-width: 768px){
   .pa-blog-list article{
    flex-direction: column;
 }
  .pa-blog-list article a{
     width: 100%
 }

  .pa-blog-list article .wrap{
     width: 100%
 }
 }

jQuery

<script>
jQuery(document).ready(function(){
    jQuery(".pa-blog-module article").each(function(){
        jQuery(this).children('h2,p,div').not(':first-child').wrapAll('<div class="wrap"></div>');
  })
})
</script>
Categories: Divi CSS Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

127 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

Comments By Others

  1. Blake J Discher

    Hi, thanks for the great tutorial. I’m wondering if there is a way to apply this to the GRID blog layout. I tried and the image disappears. Any suggestions?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Blake,
      Why do you need that? It works much simpler with the fullwidth layout. If you used the grid, you would first need to make the elements fullwidth, so it would be extra steps which would not make sense.

      Reply
  2. Brian

    Hi again! You can ignore my previous comment, I figured it out. For the record, it was:

    .et_pb_post {
    margin-bottom: 2px;
    }

    Thanks again for the great tutorials!

    Reply
  3. Brian

    Hi Nelson, yet again you have provided great solutions for what I need. My goal is to make a simple list of post titles only, as links, in alpha order. I successfully used your alphabetical order tutorial for my blog module. I came to this tutorial to see about formatting my list because there is a lot of vertical space between posts. I can’t show you the page, but here’s what it looks like:

    Post Title 1

    Post Title 2

    Post Title 3

    What I’m trying to do is this:

    Post Title 1
    Post Title 2
    Post Title 3

    I’m sure it’s simple but I am having trouble figuring it out, and I didn’t see anything in this tutorial that might help. Sorry if this is off topic for the post, but I’m hoping you can help. Thanks!

    Reply
  4. Ralph Ihmsen

    I will layout a Divi Blog Module with a list layout and tried your Live-Hack:
    https://www.peeayecreative.com/how-to-change-the-divi-blog-module-into-a-list-layout/

    I followed and implemented your instructions as described on the website. But it won’t display in a list layout.
    I can remember, that I´ve did it for 1-2 years with your CSS Code and has worked well. I don´t know what’s now the different is.
    Maybe my Setup?

    I work on a MAC Studio
    Sonoma 14.2.1
    Safari Browser, latest Version
    (I have a Add Blocker and Antivirus Safari Plugin activated…)

    Maybe there is an easy way to check this?!
    Hope you have some tipp and send greets, from Germany

    Reply
    • Hemant Gaba

      Hi Ralph!

      Can you share the URL of the page to investigate further?

      Reply
  5. Ricky Bae

    Hi! Thank you for such a nice css snippet.
    As written in the beginning of the snippet, it applies to PC and tablets, but is there a way to apply it to mobile as well?

    @media (min-width: 767px) {
    I deleted this part of the code and tested it, and it shows on mobile, but only the title is visible and meta and content are not visible.

    Please give me a good method.
    Thank you.

    Reply
    • Hemant Gaba

      Hi Ricky!

      Can you please share the URL of the page to investigate further?

      Reply
  6. Pivko

    Thanks for sharing this, it’s amazing. I have one issue on mobile view where there is no spacing between the image and the blog title. I know it’s probably going to be a simple bit of CSS, but I can’t figure it out, can you point me in the right direction please.

    Reply
  7. Alexan

    Hi! I’ve been trying to get this code to work for my blog-lists classified as “pa-blog-list-1” but things just seem to keep going wrong, I’m not sure what I’m doing. I’m wanting the images to be cropped into squares and the code is being paired with the blog list code for mobile.

    I’ll share my URL so you can see what I’m talking about.

    The issue is with the blog list modules in “the latest” section. Any help is appreciated! :’)

    Reply
      • Alexan

        Never mind! I think I figured out where I went wrong. Thanks Nelson!

  8. Terri Zwierzynski

    I love this layout! Been using it in many places.

    For my current design project, I want to center the image for phone (<768px). I know how to use the media query, but how do I get it centered? I've tried targeting both of these (separately), setting margin-right and -left to auto, but no luck…

    .pa-blog-list .entry-featured-image-url
    .pa-blog-list .entry-featured-image-url img

    Example:
    https://thankful4thescars.com/category/process/

    Reply
    • Hemant Gaba

      Hi Terri!

      Hi Terri!

      Please try using the following CSS and see if it helps:

      @media all and (max-width:767px){
      .et_pb_post .entry-featured-image-url{
      display: flex;
      justify-content: center;
      align-items: center; }
      }

      Reply
    • Hemant Gaba

      Hi Diana!

      I have checked the page and the posts are displaying in the list format. If it isn’t showing in list format at your end, then try clearing the cache and check again.

      Reply
  9. Rob

    Hello Nelson – love watching your videos they are very insightful!

    I am having an issue with the css not working properly, i tried both the first CSS and also the new version with jquery. not able to get either to work.

    Any insights on what i am doing wrong would be great. thanks, R.

    Reply
    • Jasa top up paypal

      Hi dude
      Thank you for the information about Divi, css, jquery and etc.
      Your so incredible, Keep sharing dude
      Thank you so much

      Reply
    • Hemant Gaba

      Hi Rob!

      Could you please share the URL of the page for me to investigate it further?

      Reply
  10. Ari

    I just copied the CSS code you provided

    (/*add media query so changes only affect tablet and desktop*/

    @media (min-width: 767px) {

    /*set the image width*/

    .pa-blog-list .entry-featured-image-url {
    width: 30%;
    float: left;
    margin-bottom: 0!important;
    }

    /*set the details width*/

    .pa-blog-list .entry-title,
    .pa-blog-list .post-meta,
    .pa-blog-list .post-content {
    width: 70%;
    float: left;
    padding-left: 30px;
    }
    }

    But it comes Expected RBRACE. in second row and Unexpected token ‘}’. in last two row.

    I don’t know how to fix it .

    Reply
  11. Payor

    hi there,

    Thanks for your great tutorial. I found this article from youtube.
    I have question. My blog is a custom design which contains many modules inside.
    How to apply this css to the Blog module only, not the whole page?

    I need your help. I really appreciate it.

    Thanks

    Reply
  12. Alexan Ashcraft

    Hi again! I’ve asked this question a couple of times but it keeps disappearing for some reason. I tried combining the blog list and square ratio codes and it works well on desktop but it isn’t working on mobile. I thought I added an effective additional code with the proper media query for mobile, but the images aren’t responding correctly. They are cropped oddly in a rectangle shape. Not sure what I’m doing wrong, so any help is appreciated!

    Here’s the coding I’ve applied:

    /*add media query so changes only affect tablet and desktop*/

    @media (min-width: 767px) {

    /*set the image width*/

    .pa-blog-list-3 .entry-featured-image-url {
    width: 30%;
    float: left;
    margin-bottom: 0!important;
    }

    /*set the details width*/

    .pa-blog-list-3 .entry-title,
    .pa-blog-list-3 .post-meta,
    .pa-blog-list-3 .post-content {
    width: 70%;
    float: left;
    padding-left: 30px;
    }
    }

    /*blog image aspect ratio square 1:1*/

    .pa-blog-list-3 .entry-featured-image-url {
    padding-top: 30%;
    display: block;
    }

    .pa-blog-list-3 .entry-featured-image-url img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    }
    /*** Responsive Styles Smartphone Only ***/
    @media all and (max-width: 767px) {
    /*set the image width*/

    .pa-blog-list-3 .entry-featured-image-url {
    width: 40%;
    float: left;
    margin-bottom: 0!important;
    }

    /*set the details width*/

    .pa-blog-list-3 .entry-title,
    .pa-blog-list-3 .post-meta,
    .pa-blog-list-3 .post-content {
    width: 60%;
    float: left;
    padding-left: 10px;
    }
    }

    Reply
    • Hemant Gaba

      Hey Alexan,

      Could you please share the URL of the page for me to investigate it further?

      Reply
  13. Alexan

    Hi! Alexan here, again. I tried combining the blog list layout and the square ratio image and I’m having a bit of trouble. It seems to be working fine on desktop, but on mobile, the images are cropped oddly but not in the shape of a square. More of a rectangle. I’m not sure what I’m doing wrong here. I’m only using this combination for one section in my blog so maybe I messed up in the coding. I also added a code specifically for mobile only and one for devices larger than mobile. This is what I’ve applied:

    /*add media query so changes only affect tablet and desktop*/

    @media (min-width: 767px) {

    /*set the image width*/

    .pa-blog-list-3 .entry-featured-image-url {
    width: 30%;
    float: left;
    margin-bottom: 0!important;
    }

    /*set the details width*/

    .pa-blog-list-3 .entry-title,
    .pa-blog-list-3 .post-meta,
    .pa-blog-list-3 .post-content {
    width: 70%;
    float: left;
    padding-left: 30px;
    }
    }

    /*blog image aspect ratio square 1:1*/

    .pa-blog-list-3 .entry-featured-image-url {
    padding-top: 30%;
    display: block;
    }

    .pa-blog-list-3 .entry-featured-image-url img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    }
    /*** Responsive Styles Smartphone Only ***/
    @media all and (max-width: 767px) {
    /*set the image width*/

    .pa-blog-list-3 .entry-featured-image-url {
    width: 40%;
    float: left;
    margin-bottom: 0!important;
    }

    /*set the details width*/

    .pa-blog-list-3 .entry-title,
    .pa-blog-list-3 .post-meta,
    .pa-blog-list-3 .post-content {
    width: 60%;
    float: left;
    padding-left: 10px;
    }
    }

    Any help is appreciated! I can also include my URL if needed.

    Reply
    • Hemant Gaba

      Hey Alexan,

      Could you please share the URL of the website for me to investigate it further?

      Reply
  14. Alexan

    Just what I was needing! thank you! Question–I have two different section that I am wanting to use the blog list format for. The first section uses the widths that you provided in the coding. But for the second section, I’m wanting the text to be much closer to the featured image (so I’d like less padding and space between the two). Is there a way to make this possible without messing up the widths of the first section? Thank you in advance!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Absolutely, you can always do that with any snippet by using a different CSS class. Make the class different for the one, like pa-blog-list-2 and then change that in the second snippet and update your code in that snippet.

      Reply
      • Alexan

        Ah, why didn’t I think of that, haha. Thank you! It worked! One more question though, so this only applies to desktop and tablet, I see. What would I change in order for this code to only apply to phone and not affect desktop and/or tablet?

      • Hemant Gaba

        Hey Alexan,

        Please place the whole code inside this media query code:
        @media all and (max-width: 768px){
        //place the code here
        }

  15. Alvaro

    How can I apply these style to woocommerce product. been looking for a solution on how to show my products on list view in mobile. if you can help me on any way plis !

    Reply
  16. Odette

    Hi! I think my question disappeared because I do not see it above …

    Thanks for a great tutorial!

    There are some posts i have that do not have a images(no thumnail) and then there will be unnecessary space to the right and left. I would like the text to fill out on both sides, how do I do that?

    Reply
    • Hemant Gaba

      Hey Odette,

      I have checked the URL provided but I am not able to spot the issue that you have mentioned in your comment, could you please guide me to where I can find that post without thumbnail so I can fix that for you.

      Reply
  17. Gabe

    I’ve posted a comment a few times but it keeps getting deleted for some reason. I am trying to figure out to keep the meta text from wrapping up under the featured image when the title extends beyond the height of the image. I’m using the CSS in the tutorial which works great other than the issue with meta text not aligning with the title in some cases. I have tried adding CSS to align but nothing I’ve done has worked so far. I’ve read through all the comments and did not see any solutions posted that would help. This is for one of my larger clients and any help is greatly appreciated.

    This is the site with the CSS and module.

    https://wp.charismamag.com/

    Reply
    • Hemant Gaba

      Hey Gabe,

      The URL that you have provided is not working, could you please provide the valid URL in order for me to investigate this issue?

      Reply
  18. Gabe

    Great tutorial. How do we get the meta text to align with the title text using the first CSS option? It is currently wrapping underneath the featured image.

    I have tried the jquery option but it does not work on our site due to some conflicts with other CSS I believe.

    Reply
    • Hemant Gaba

      Hey Gabe,

      Could you please share the URL of the page for me to investigate it further?

      Reply
  19. Rene

    Hi Nelson.

    Great tutorials.

    How do I force all images to be the same height regardless of the actual featured image size?

    Thanks.

    Reply
  20. Molly

    Thank you for sharing this!

    I’m probably doing something wrong, but when I add the code (either the initial CSS or the CSS + Jquery) the image and text still appear stacked. The image floats left but the text doesn’t move to the right side. I’m not sure if there is some code in my site somewhere else that would cause this not to work? Any thoughts? See the post below the full width slider: https://theplacewithgrace.com/

    Reply
    • Molly

      Hmm, I did remove the first set of CSS and replaced with the vertical align CSS. Also put the jquery in the Integration > section. That’s okay, I’ll figure it out. Probably something small I’m overlooking. Thanks for taking the time to review!!

      Reply
      • Molly

        Sure thing: https://theplacewithgrace.com/

        You can see the component right below the hero has separated into 4 columns when I applied the “vertical align” CSS & jQuery.

      • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

        It looks like a mix of all the CSS and no jQuery, so I am not sure why I see CSS and no jQuery, but do not use both CSS for vertical align AND the previous, only use the code for vertical align.

      • Molly

        Brilliant! You’re amazing. So, now each element is in its own column (image, meta, title, excerpt). Have I copied something wrong?

      • Hemant Gaba

        Hey Molly,

        Could you please share the URL of the exact page where you are facing this issue?

  21. Adam

    Hi Nelson,

    Great tutorial. This worked great. On mobile though the image is no longer square but rectangle. How can I change that image on mobile to remain square like it is on desktop and tablet?

    Reply
    • Hemant Gaba

      Hey Adam,

      Could you please share the URL of the page in order for me to investigate the query?

      Reply
  22. daftar umkm

    why those code doesn’t work on my site using divi?

    Reply
  23. William

    Hi Nelson

    Thanks for your useful tutorials.

    I’ve been attempting to create exactly this layout for a particular category of a CPT. As the Divi blog module doesn’t support category filtering of CPT in the blog module I’m using Divi Blog Extras. Tried adapting this CSS to their module without success.

    Do you have any suggestions?

    Reply
  24. Sian Bedford

    This is perfect thanks! How can I add a 1px divider line between the blog posts??

    Reply
  25. Frank Jermann

    Hi Nelson!

    I entered the Divi world only a few months ago. Your tutorials have become a frequent help because you very often explain the obvious needs that many of us have.

    As most of my Divi projects are non-commercial I even more appreciate that you share so much of your knowledge for free. This is heart-warming for someone without a budget for his projects. Is there a way to buy you a coffee?

    Thanks a lot, Nelson.

    Frank

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Frank,
      I’m very glad to hear this, it makes me happy to know the free resources are helping! I support my family with the income from products and membership, but I also have the tip feature on each blog post if you feel like doing that. But otherwise you can enjoy the content and pay it forward!

      Reply
  26. Shovon

    It doesn’t vertically align, unfortunately. I have also tried using other CSS codes but they don’t vertically align. I have tried with top and bottom margin which works but meta texts go inside the excerpts.

    I have tried your javascript but it doesn’t seem to do anything.

    Reply
    • Hemant Gaba

      Hi Shovon,

      Could you please share the URL of the website for me to investigate further?

      Reply
  27. Patty J. Ayers

    Thank you so much. This took about 30 seconds and worked perfectly. 🙂

    Reply
  28. Chanel

    Thanks for this great tutorial! I adjusted the size of my featured image (80%), but how do I adjust the size of the hover overlay color block to match the size of the featured image?

    Reply
      • Hemant Gaba

        Hi Chanel,

        Please use this snippet and let me know how it goes.

        .pa-blog-list .entry-featured-image-url .et_overlay {
        width: 80%;
        height: 80%;
        }

  29. Jennifer Watt

    This works perfectly on featured images, but when I use Video Post format, the videos appear huge and above the title text. Is there something I can add to the code to make the video do the same as the featured image?

    Thank you!

    Reply
  30. Brian Chouinard

    I’m having trouble getting this to work with a post format set to video. Any thoughts there?

    Reply
    • Hemant Gaba

      Hey Brian,

      I am afraid that I am not able to replicate any issue on my end on your website. If you still facing the issue, please share the exact URL of the page and we will be happy to help. 🙂

      Reply
  31. Nordie

    is it possible to have a portrait image is a blog listing?

    Reply
  32. Jody

    Hi Nelson, great tutorial just what I needed.

    Is it possible to have 2 posts next to each other in a list?

    Reply
  33. Hamza

    Hi javascript download work when we paginate the blog module
    It works on intiall page load but when we paginate then it looks javacript isnt wrapping the elements in wrap class div

    Reply
    • Hemant Gaba

      Hi Hamza

      Thank you for addressing the issue and you are right that the code is working on the initial page load only. Please try using the code which is given below and see if that helps.
      Code: https://www.codepile.net/pile/bPApy4mn

      We will update the code in the guide as soon as possible. 🙂

      Let us know how it goes.

      Reply
  34. Robin

    Hi Nelson,
    A great post which solved my initial problem. One question, how to I “isolate” the CSS to only one page, e.g. my home page?

    Reply
    • Hemant Gaba

      For this purpose, please paste your CSS inside the page settings. First, go to the Home Page and enable the Visual Builder. After that click on the bottom center three dots icon and then click on the settings icon. This will open the Page Settings. Go to the Advanced Tab > Custom CSS and place your code there.

      Let us know if that helps. 🙂

      Reply
  35. Bard

    I’m looking for a way to turn the blog module results into a list with only the titles showing. Which in turn could be used to show only a specific number of posts and from specific categories or tags. In other words, no images, no excerpts and no meta data. I have looked everywhere but the title lines seem impossible to style properly. So, a simple list (like the most recent widget lists) please?

    Reply
    • Hemant Gaba

      If you want to show a simple list with the blog titles, then first of all go to the Blog Module Settings > Elements and disable all the content that you don’t need. As we already have placed the pa-blog-list custom class in the blog module so we will use that for the CSS snippet. Please go to the Divi > Theme Options > Custom CSS Panel and place the CSS snippet given below:

      /*This snippet is for removing the margin between the titles*/
      .pa-blog-list article{
      margin: 0 !important;
      }
      /*This snippet is for the bullet points*/
      .pa-blog-list article .entry-title:before{
      content: ".";
      position: relative;
      top: -3px;
      left: -4px;
      font-size: 40px;
      }
      /*This snippet is for hiding the post content div*/
      .pa-blog-list article .post-content{
      display: none;
      }

      Let us know if that helps. 🙂

      Reply
  36. Doris

    Thank you for the Tutorial!

    Reply
  37. Shepon Biswas

    Hi Nelson,
    Thanks for creating that specific blog module tutorial.
    I tried your method but the thing is I’m facing a problem (which shown as screenshot), some of the contents goes under the image.Can you please help me to get rid of.
    Thanks 🙂

    Reply
    • Hemant Gaba

      This might be happening because the image you are using there is very small. Please try adding a different image with increased height and see if that helps. 🙂

      Reply
      • Shepon Biswas

        Okay sure. I know it’s happening because of image, i want to know is there any way to fix it without depending on image size?

      • Hemant Gaba

        Could you please share the URL of the page where this section is placed so that I could investigate further?

  38. iTheo

    Love your tutorials, I just added the Reorder The Divi Blog Image, Title, Meta, Excerpt, and also this tutorial to my blog.

    But I have a question. When I put it in list move and I do a reorder… the list gets messed up. So I would like the image left, and on the right side : first the meta, then title, then excerpt and then button. Is that possible?

    Reply
      • iTheo

        It shows it like it was not reordered. I have two different meta orders in my home page.

      • Francesco schinaia
        I have the same problem too ...
        it is as if the float of this place goes against the display> flex to change the order of the elements
        

        Best R.

      • Hemant Gaba

        If you want to change the order of the items and you are using the second code snippet where jQuery and display flex is used then remove the code given below from the CSS snippet:

        .pa-blog-list article .wrap{
        width: 70%
        }

        and add the code given below on its place:

        .pa-blog-list article .wrap{
        width: 70%;
        display: flex;
        flex-direction: column;
        }
        .pa-blog-list article .wrap h2{
        order: 2;
        }
        .pa-blog-list article .wrap p{
        order: 1;
        }
        .pa-blog-list article .wrap div{
        order: 3
        }

        You can change the order number as per your liking. Please let us know if that helps.

  39. Ray

    Is there a way to target just a certain blog module with this code?

    Reply
      • ray

        Like this? For example:

        .custom_class .entry-featured-image-url  {
        width: 30%;
        float: left;
        margin-bottom: 0!important;
        }
        
        /*set the details width*/
        
        .custom_class .entry-title,
        .post-meta,
        .post-content {
        width: 70%;
        float: left;
        padding-left: 30px;
        }
        }
        
      • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

        Almost! You would also need it before each item, notice how the comma is used in the second snippet, so you would need it for each of those three selectors.

  40. Ahmed

    I would admit that you save my hours of thinking and finalizing this type of layout. Thanks

    Reply
  41. ANKIT KUMAR

    Great tutorial sir

    Reply
      • david-0729

        No worries Nelson, I achieved same idea with a plugin for now, but will keep the snippet for the future. Thanks again Dave

  42. Milan

    If the post title is longer and takes two rows for example, what happens with the excerpt? Does the CSS code takes care about this? Because if you have a fixed word count defined in DIVI, the exerpt will just go out of this “imaginary” box shape. Please let me know.

    Reply
      • Milan

        Hi Nelson. So, here is the situation: I copy pasted your CSS code in the Custom CSS section on Page Settings here https://www.howtodigitalstuff.com/guides/ (it is live now). What I am concerned is that the featured image is not aligned on the bottom with the post excerpt. What I would like to achieve is: the post title to be aligned with the top of the image, and the bottom of the image to be aligned with the last sentence of the post excerpt – so it would be visually appealing. If you go to the home page of my blog you will notice that more or less this is accomplished with only one exception: and that is when the length of the title is longer and it continues to the second row, then the alignment on the bottom is broken.
        Can you advise?

  43. Rogier

    Hi Nelson, thanks for the tutorial! And not only this one 😉

    How can I reduce vertical distance between list items?

    Reply
  44. Ada

    Thank you, that was a great tutorial I’ve been looking for since a while. 🙂 Is there any chance to change the position of the images from left to right than right to left in every row within the blog module?

    Reply
      • Ada

        Thank you! 🙂 That makes all images left or all images right, if I get you right. 🙂
        What I thought was, that on one post the image is left, than the next one right, than the next one left again and so on. 🙂 That would be something really eye catching.
        I know it could be done by making separate post modules and making excerpts, but automated… you’d be my hero. 😀

  45. Dom

    Hi Nelson,
    Can you please make a tutorial on how to make the Divi shop module (when using woo-commerce) into list view.

    Thanks

    Reply
  46. Spence

    This method is the sort of thing I’ve been looking for and the code seems to have the desired effect, but changing the main elements color changes the entire module including the spaces in between the blog posts. Is there any way to have each Blog post have a background color while still leaving the spaces in between the blank?

    Reply
  47. RudyGee

    Since you don’t cover mobile in this tut how would I get the same exact layout on mobile? The images are not square? Also one more thing that could make this better is customizing the read more button on this module. Thanks I totally enjoy your tutorials.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi RudyGee,
      I do have a tutorial on customizing the read more button, be sure to be checking our blog as this has been out many months.

      To make this work on mobile, simply remove the media query!

      Reply
  48. Rach

    Hi Nelson

    Great Tutorials !

    How would you target this at a specific blog module – (I’ve a couple of different blog mods spread across my site 🙂

    Got as far as understanding that I need to use a seperate CSS class but how would this show in the code – know its #cssclassname but not sure exactly where it needs to go 🙂

    Thanks again 🙂

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Rach,
      Sure, so any time I have a snippet that you want to be specific, just add a custom class to the beginning and then add that class in the module Advance tab in the CSS Class input field (don’t use the period at the beginning here, only in the snippet) For this one you will need to add your class in front ever each selector.

      Reply
      • Fortespy

        Thanks for this tip.
        Can this be applied to the presentation of products on the shop page? By default, divi presents products in grid form, I want them to be listed. Please help.

      • Hemant Gaba

        Hey Fortespy,

        We are working on this approach and you will get the solution for this shortly.

      • Rach

        Ah thanks Nelson, It was the adding it before every seperate selector that threw me 🙂

        Much appreciated 🙂

Submit a Comment

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

Recent Posts

0

Your Cart