How to Add 5 or 6 Columns in Divi

by | Jan 8, 2018 | Divi Tutorial | 63 comments

Ever wanted to build a page with more than 4 columns in Divi? By default, Divi unfortunately only gives us the option to have up to 4 columns in the Divi builder but in this tutorial, I show you how to add 5 or 6 columns!

There are several ways to go about this and there’s even a free plugin (linked below) but if you’ve been following my tutorials, you know that I do everything in my power to avoid using extra plugins due to frequent conflicts with updates and the visual builder.

So, this is how I add extra columns and I even show you how to add up to 7 or 8 columns if you’d like. And to top it off, I’ve also made this a FREE LAYOUT that you can download and add to your sites easily moving forward. View the post or download below. Enjoy!

Here’s the CSS I used:


/*----------5 Columns----------*/

.five-columns .et_pb_module {
	float: left;
	width: 20%!important;
	padding: 20px;
}

@media only screen and (max-width: 980px) {
	
.five-columns .et_pb_module {
	width: 33%!important; 
    }
}

@media only screen and (max-width: 479px) {
	
.five-columns .et_pb_module {
	width: 50%!important;
	}
}

/*----------6 Columns----------*/

.six-columns .et_pb_module {
	float: left;
	width: 16.6%!important;
	padding: 20px;
}

@media only screen and (max-width: 980px) {
	
.six-columns .et_pb_module {
    width: 33%!important;
	}
}

@media only screen and (max-width: 479px) {
	
.six-columns .et_pb_module {
	width: 50%!important;
	}
}

Free Plugin:

Divi Extended Columns

This free plugin will also allow you to add more than 4 columns. I used this a couple years ago and it worked pretty well, but I had heard that there were some issues with recent updates. And if you know me, I try to do everything WITHOUT using an extra plugin if possible πŸ™‚ But you’re more than welcome to give it a shot!

Similar Tutorials:

Adding More Columns to the Divi Builder – Elegant Themes

Create 5, 6, 7, 8 Columns in Divi – Elegant Theme Examples