Easily Make The Blog 2 Or 4 Columns
I’m starting a series on the Divi Blog module, and what better place to start than with an extremely easy and quick snippet that changes the Divi blog module into any number of columns you want! I’m really excited about this, because it’s so quick and easy even for beginners! Only 1 lines of CSS is needed to change the Divi blog module to any column number you need! We also add a space between the columns, which technically makes 2 lines of code, which still incredible! The best part is, we are putting them directly in the Divi Blog module!
Most of the other tutorials about this are very long and involve quite a lot of code, and most of them no longer work. So I enjoy making solutions that are truly simple and easy for you! If you enjoy that, then please subscribe because this is what I do every single week!
▶️ Please watch the video above to get all the exciting details! 👆
FYI: You can do this with a setting directly in the Divi Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!
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.
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;
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;
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.
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.
/*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!
Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
Thanks Nelson, I love all your tutorials. Sadly this one did not work for me 🙁 It shifted the excerpt onto the next column. Not sure why :((
That’s probably related to the note towards the end of the article, please check that.
Thanks Nelson! I should have paid more attention. You are the boss..
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?
Hi John,
Glad you like it! What you are asking is a very difficult thing to do, but the best answer I have seen is by Elegant Themes here: https://intercom.help/elegantthemes/en/articles/3371227-blog-module-equal-height-grid-boxes-with-javascript