How to Add More Columns to Your Divi Builder Posts or Pages

The Divi Builder allows you to have up to four columns for page layouts. And, for most websites, four columns is all you need. But sometimes you need to add more columns. Of course, there are plugins that allow you to embed shortcodes to add extra columns to your layout. But, this can be limiting when working with the Divi Builder since shortcodes require that you work from within a module.

That’s why in today’s post I’ll be showing you how to add more columns to your rows using the Divi Builder without the use of a plugin or shortcodes. This way you can add any number of columns to organize Divi modules of any type. Do you need a ten column layout to display client logos or portfolio pieces using the Image Module? Do you need a six column layout to list your company services using the Blurb Module? Well, you can! And the best part is, you can still edit the modules in these columns using the Divi Builder.

Let’s get started!

How to Add More Columns to Your Divi Builder Posts or Pages

Subscribe To Our Youtube Channel

First deploy the Divi Builder and stick with the Standard Section layout shown.

Select Row Module Settings. Under General Settings, select the option to make the row fullwidth.

Under the Custom CSS tab, enter “six-columns” in the CSS Class text box. We will be adding CSS to this class later.

Save & Exit

Now Insert a fullwidth column to your row.

Insert the Blurb Module.

In the Blurb Module Settings under General Settings update the following settings:

Insert Title: [enter your title]
Upload an Image (width 300px, I’m using an image from unsplash.com)
Text Orientation: center
Insert Content: [enter your content]
Enter an Admin Label (optional)

Save & Exit

Now you need to duplicate the Blurb Module you just customized to make five additional modules giving you a total of six blurb modules. It is important that you have six modules here because this coincides with the “six-columns” class you created earlier.

Save or publish your page.

Now that your six modules are ready, go to Divi → Theme Options and add the following CSS in the Custom CSS text box:

.ten-columns .et_pb_module {width: 10%; float: left;}
.nine-columns .et_pb_module {width: 11.11%; float: left;}
.eight-columns .et_pb_module {width: 12.5%; float: left;}
.seven-columns .et_pb_module {width: 14.28%; float: left;}
.six-columns .et_pb_module {width: 16.66%; float: left;}
.five-columns .et_pb_module {width: 20%; float: left;}

Now preview your page. You should see your blurb modules in a six-column layout.

You may have noticed the custom CSS code you entered includes six different classes. This gives you the ability to create layouts for five, six, seven, eight, nine, and/or ten columns.

The six-column class is what you are creating now. But, if you want a different amount of columns, you only have to change two things.

The first change is to update the Row Module Settings Custom CSS with a different CSS Class. For example if you want five columns, you would put “five-columns” in the CSS Class text box.

The second change is to make sure you have five blurb modules instead of six.

Need More Column Layouts?

If you are good at math (Who are we kidding? Just use your calculator app) you can add as many columns as you want to your layout. Just calculate the percentage you need and create a class for that percentage.

For example, if you want a 12 column layout, here is what you do:

Divide 1 by 12 and multiply that by 100 to get 8.33%. (This will be the width of one of your columns.)
Add a custom CSS Class called “twelve-columns” to the Row Module that holds your 12 modules.
Input the following custom css for this percentage:

.twelve-columns {width: 8.33%; float: left;}

Getting Even More Creative With Your Column Layouts

To create more creative column layouts, you can incorporate this functionality with the specialty section.

For example, here is how you would make a one-half five-fifths layout.

Select the Specialty section from the Divi Builder.

Insert the following column layout:

Insert a blurb module in the left one-half column:

Go to the Row Module Settings on the right row module.

Under the Custom CSS tab, enter “five-columns” in the CSS Class text box.

Insert a fullwidth column and add five modules to your row repeating the same steps you did earlier.

The result is a one-half five-fifths column layout.

Taking Care of Mobile

If you don’t want to keep your custom column layout the same on all devices, you can enter some additional css to scale the columns down to a more readable size on mobile devices. Feel free to change the percentages to fit your needs.

@media (max-width: 980px){
.ten-columns .et_pb_module {width: 20%;}
.nine-columns .et_pb_module {width: 33.3%;}
.eight-columns .et_pb_module {width: 25%;}
.seven-columns .et_pb_module {width: 25%;}
.six-columns .et_pb_module {width: 33.3%;}
.five-columns .et_pb_module {width: 33.3%;}
}

@media all and (max-width: 767px) {
.ten-columns .et_pb_module {width: 100%;}
.nine-columns .et_pb_module {width: 100%;}
.eight-columns .et_pb_module {width: 100%;}
.seven-columns .et_pb_module {width: 100%;}
.six-columns .et_pb_module {width: 100%;}
.five-columns .et_pb_module {width: 100%;}
}

That’s it. Now you have the ability to add more columns to your page layouts using the Divi Builder.

Final Thoughts

I first added this functionality when completing a project for a client who wanted to add more columns for a bunch of logos to display their featured clients and partners. They also wanted the ability to order and edit the images/logos using the Divi Builder. The solution worked perfectly. I hope you find this to be a helpful solution as well.

Looking forward to hearing from you in the comments. Enjoy!