Code by Day | Explore By Weekend

How To Change The Number Of Columns In The Divi Blog Module Tutorial by Pee Aye Creative

How To Change The Number Of Columns In The Divi Blog Module (Extremely Easy)

This tutorial will show you how to easily change the number of columns in the Divi Blog module with just two simple lines of CSS!

Make Divi Blog Module Into 2 Columns

Let’s start with changing the Divi Blog module column count to two. By default, the Blog module comes in at 3 columns when the layout is set to Grid, and 1 column when the layout is set to Fullwidth.

In order to keep this very, very simple, we need to set the Layout to Fullwidth.

change the Divi blog module column number by first setting the layout to fullwidth

Now go ahead and copy and paste the two lines of CSS below into the Blog module. You will need to go the Advanced tab and open the Custom CSS toggle. There you will see the Main Element, which is exactly where you should paste this snippet.

column-count: 2;
column-gap: 60px;
Two column Divi blog module grid layout

Boom! There you go! That was incredibly easy, right?

Make Divi Blog Module Into 4 Columns

Let’s try another one. You can change the count to anythign you want, but if you go too high the postt will get too small. Also note that you can’t use 3, since 3 is the default when the module is set to Grid. So let’s set the blog module column count to 4. Like before, make sure the layout is set to Fullwidth in the Design tab.

If you pasted the snippet before, just change the number to 4 instead of 2. If not, copy the CSS snippet below and paste it into the Blog module in the Advanced tab. Just open the Custom CSS toggle and you you will see the Main Element, which is where you should paste this snippet.

column-count: 4;
column-gap: 60px;
four column Divi blog module grid layout

And there you go, you now changed the Divi blog module column count to 4 with this very easy method.

Change Blog Column Spacing

You may hvae noticed the line of CSS that says “column-gap” and were curous about that. Basically, this is the space between the columns. I set this at 60px because the blog module comes with a margin of 60px at the bottom of each post (in between the posts vertically) so I just wanted to match that. But you can change this number to anything you want! 

Change The Divi Blog Module Column Count On Mobile

Make The Divi Blog Module Columns Responsive

Now it’s time to make this responsive! So the column count you chose for your blog module will probably not work very well on smaller screen sizes. Thanksfully this is a very easy fix. We could use CSS media queries. But hey, I like to keep it simple. Let’s just use Divi!

It is very easy. Go to the Blog module settings again to where you pasted the code in the Main Element. Hover over it and you will see the little “phone” icon. Click that! Now you will see three tabs, Desktop, Tablet, and Phone. By default, the code we pasted affects all three, so we need to change our code for each device. I’ll walk you through an example.

Desktop

Let’s say I have set my Divi blog moluduel to “4” columns. That’s what I want for Desktop, so this is good.

Tablet

Copy the snippet, and now click on the Tablet tab. Paste the two lines again. This time, change the column count to “2.”

Phone

Copy the snippet again, and now click on the Phone tab. Paste the two lines again. This time, change the column count to “1.”

You could also change the column gap to a smaller number like “20px;”

To see this in action, please watch the video!

Add Some Fancy Styling

In our screenshots above, we included some extra styling. In the follow snippet, we are going to style each one of the posts by adding spacing around them, a background color, and a border radius.

There is also a very important part of the tutorial. The last three lines here are essentail for making this whole tutorial work right. It is too technical to explain, but the video shows what would happen without it. Basically the columns in Divi start on the left and go down, then over and down, etc. So this CSS keeps the the blog posts from getting chopped off weird.

/*style the individual posts*/

.et_pb_posts .et_pb_post {
	padding: 30px;
	background: #f2f2f2;
	border-radius: 10px;
	-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
	page-break-inside: avoid; /* Firefox */
	break-inside: avoid; /* IE 10+ */
}

That looks a great! Feel free to play around with this, and be on the lookout for more tutorials about the Divi blog module!

53
Last updated Jan 3, 2021 @ 12:56 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
41 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ramon
6 months ago

Simple & Nice Nelson! Less is more!

Neil
6 months ago

Hi Nelson,

This is a great tutorial. I always enjoy your tutorials. They are simple and presented in a clear way for everyone to understand. Thanks for taking the time to create them.

Kind regards,
Neil.

Hadee Roslan
Hadee Roslan
6 months ago

Thank you Nelson for this awesome tip. Will give it a shot in my sites. This is indeed the simplest way to customize number of blog columns in Divi.

John Bendever
5 months ago

Hey Nelson! This is AWESOME! One quick question…what if you wanted to equalize the grid heights to accommodate for differing excerpt and title lengths?

Bernadette Smith
Bernadette Smith
5 months ago

Wow, that was so easy! Thank you!

QUYEN D TRAN
QUYEN D TRAN
3 months ago

I put in the code but why does the image on the top second column is being cut off ?

Screen Shot 2020-09-28 at 8.43.05 PM.png
Luc Fayard
Luc Fayard
3 months ago

Thank’s for these good advices. I use the layout in a test site for a list of members, in alpha sorting (via plugin Simple Custom Post Order) , with 12 items per page, with 3 rows of 4 columns, But I see that the items are to be read on each column from top to bottom and I would like them to be listed on each row from left to right. How is it possible? Luc

Muhammad Fikrul Hadi
3 months ago

Thanks Nelson 😀

Rita Manaï
2 months ago

Dear,
thank you very much for your clear tutorial “how-to-change-the-number-of-columns-in-the-divi-blog-module”

Works great!
Still a question: why do I first see 4 and then 3 columns on one of my pages? (see: https://mijnreceptenbundel.nl/cocktails-2/cocktail-alc-vrij/)

or better, how can I adjust this?

thank you verry mutch

Rita Manaï

Dear Nelson,
I have already adjusted most of the titles and are now shorter, which makes the overview better. Yet I still have that some pages show 3 instead of 4 columns (pictures)
see: https://mijnreceptenbundel.nl/hoofdgerechten/schaap-lam/

Daniel
Daniel
2 months ago

Any chance there is a straightforward way to have this center the blog items. So for example, if I have a 4 column setup, per your code, but in instances where they is only 1 or 2 blog posts, to have those centered in the screen instead of off to the left?

David
David
1 month ago

Great tutorial, thanks alot, clean & simple!

x_larrea
x_larrea
1 month ago

Thanks a lot for your posts Nelson!!!
Best Divi tutorials on the web!

Just a tip: This is needed to work properly so I would not say “add styling”….it is confusing..
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /*

Marlon
1 month ago

Hi, how can i make the order from left to right instead of top to bottom.
My magazine are displaying in weird order

Carina
Carina
1 month ago

Thank you Nelson, this is a real helpful and easy tutorial! The only part where I was little bit confused was when you added the styling to the site. I first didn’t realize the code wasn’t for the blog module but for the whole website. I then checked your video and got it. Maybe you could add where to put this in in your tutorial here.

Sondra Barker
1 month ago

what if I want two columns on mobile and not one?

Girish
1 month ago

Hi Nelson, Thanks a lot for this tutorial. I have found a lot of valuable stuff on your website, and must say it is one of the best resources on DIVI. So thanks a lot for that. I tried this code and it works great, except that the navigation for pagination on the bottom (older entries and newer entries) jumps into the second column instead of spanning both the columns. I am attaching a screenshot. Is there a way or CSS to make it span so that it is not in the middle of the page. I am using a… Read more »

2 column fulwidth layout.JPG
Girish

Thanks for the update Nelson. Let me see if I can figure out a workaround for this.

Amy S Chaplin
Amy S Chaplin
17 days ago

Great idea, but didn’t work. Adding column-count:2 turned the 3 column blog into 6 rather than 2.

Mike
11 days ago

Hi Nelson – I was having issues with this page:

https://dwnsandbox1.com/news/

After a few rounds with Elegant Themes Tech Support they suggested this article:

“Please use the following solution instead to change Blog columns:
https://www.peeayecreative.com/how-to-change-the-number-of-columns-in-the-divi-blog-module/

Ta Da!

Coincidentally, I was reading a post from you earlier tonight about hiding/showing the hamburger menu.

Thanks for your clean and Elegant(!) solutions.

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