How to Change the Number of Columns in the Divi Blog Module

Using Divi to build your WordPress site is awesome. It’s like painting with pixels! But sometimes, the Blog Module doesn’t do exactly what you want right out of the box. Want to change the number of columns in your blog grid? No problem! It’s super easy and kind of fun.

You can make your blog posts show up in one column, two, or even four columns. Let’s walk through how to do it, step by step. Ready to be a layout wizard? Let’s go!

Step 1: Add the Blog Module

First, go to your page or post and enable the Visual Builder.

• Click on the grey plus (+) button to add a new module.
• Select the Blog module.
• Choose “Grid” for layout. It looks really clean and modern!

Now your posts will show as neat little boxes. But wait… you want more columns, right?

Step 2: Add Custom CSS Class

This is where the magic starts. To control the number of columns, you’ll use custom CSS. Don’t worry, it’s easy. We’ll show you step by step.

1. Click the gear icon of your Blog module to open settings.
2. Go to the Advanced tab.
3. Open the CSS ID & Classes settings.
4. In the CSS Class field, add this: my-blog-columns

Great! You’ve now labeled this module so your custom style knows where to go.

Step 3: Add Custom CSS

Now, let’s style those blog posts with CSS to create your perfect number of columns.

Go to Divi > Theme Options > Custom CSS and paste in one of the following:

For 2 Columns:

.my-blog-columns .et_pb_post {
    width: 48%;
    margin: 1%;
    float: left;
}

For 3 Columns:

.my-blog-columns .et_pb_post {
    width: 30%;
    margin: 1.66%;
    float: left;
}

For 4 Columns:

.my-blog-columns .et_pb_post {
    width: 22%;
    margin: 1%;
    float: left;
}

NOTE: You might need to tweak the percentages a tiny bit to fit your style.

Step 4: Clear the Float (Optional but Helpful)

To keep your layout nice and tidy, it’s a good idea to clear any floating elements.

.my-blog-columns:after {
    content: "";
    display: table;
    clear: both;
}

Paste this right under your other CSS code. It helps the layout break properly when it wraps into rows.

Bonus Tips

• Add a media query to keep it mobile-friendly. You don’t want four skinny columns on a phone!

@media (max-width: 768px) {
    .my-blog-columns .et_pb_post {
        width: 100% !important;
        margin: 0 0 20px 0;
        float: none;
    }
}

• You can play with margins and paddings to create space between columns for an airy look.
• If you have a favorite plugin for custom CSS (like Simple Custom CSS), feel free to use that instead!

Why This Rocks 🎉

Changing the number of columns gives your website a fresh, personalized style. If you’re showcasing articles, portfolio pieces, or news updates, having control over your layout is game-changing.

Plus, it’s fun! With just a few lines of CSS, you’re the boss of your blog wall. Boom!

Wrap-Up

So, now you know how to:

• Add a Blog Module
• Give it a custom class
• Style it with CSS for 2, 3, or 4 columns
• Keep things responsive with media queries

Give your layout some love and let your content shine!