How To Change The Divi Blog Module Into A Horizontal List Layout Tutorial by Pee Aye Creative

How To Change The Divi Blog Module Into A List Layout

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.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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>
35
Last updated Aug 31, 2021 @ 11:31 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

54 Comments

  1. 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)

      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
      • Rach

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

        Much appreciated 🙂

  2. 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)

      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
  3. 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
  4. 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
  5. 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. 😀

  6. Rogier

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

    How can I reduce vertical distance between list items?

    Reply
  7. 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?

      • 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

  8. ANKIT KUMAR

    Great tutorial sir

    Reply
  9. Ahmed

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

    Reply
  10. Ray

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Ray,
      Absolutely, with anything you can always add a custom class to the module and in the snippet. Just put it before each of the items in the snippet.

      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)

        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.

  11. 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.

  12. 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?

  13. Doris

    Thank you for the Tutorial!

    Reply
  14. 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
  15. 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
  16. 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
  17. Jody

    Hi Nelson, great tutorial just what I needed.

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

    Reply
  18. Nordie

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

    Reply
  19. 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
  20. 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

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart