Code by Day | Explore By Weekend

How To Change The Divi Blog Module Into A List Layout YouTube Video 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.

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: 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*/

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

/*set the details width*/

.entry-title,
.post-meta,
.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! 🙂 

26
Last updated Jan 3, 2021 @ 12:55 pm

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

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
24 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Rach
Rach
6 months ago

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 🙂

Rach
Rach

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

Much appreciated 🙂

RudyGee
RudyGee
4 months ago

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.

Spence
Spence
3 months ago

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?

Dom
Dom
2 months ago

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

Thanks

Ada
Ada
2 months ago

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?

Last edited 2 months ago by Ada
Ada
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. 😀

Rogier
Rogier
2 months ago

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

How can I reduce vertical distance between list items?

Milan
Milan
1 month ago

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.

Milan
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… Read more »

Dave King
23 days ago

Hi Nelson, really great tutorial just what I was looking for, however I notice its thrown the dynamic headings I have on some of the posts I have and created a wide border around full page. Any idea how I could override this on these pages. An example of this would be at

http://dajocreativedev.com/sva/lot-15-buchley-garage-balmuildy-road-bishopbriggs-g64-3qn/

cheers Dave

david-0729
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

ANKIT KUMAR
ANKIT KUMAR
14 days ago

Great tutorial sir

Ahmed
3 days ago

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

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

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart