How to Add 5 or 6 Columns in Divi
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!
/*----------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;
}
}
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
Get The FREE Page Layout!
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Perfect, thx!
Great to hear, Lawrence. No problem.
Hi Josh,
Thank you for all your valuable info!
I wonder if you have any pointers on a 5 or 6 column DIVI video slider carousel
This module permits a horizontal navigation, but my customer insists on showing more images when the page loads…
Greatly appreciate any comment.
Not sure on that, Alex. You could try this tutorial! https://divisoup.com/how-to-create-a-scrolling-image-carousel-in-divi/
Very good tutorial and you have a great voice for talking. While this is a really nice tool to have in your toolbox, there is just one thing which annoys us: you cant have “compound modules”. You only can use single modules. If you want to build a custom blurb like module with more than one module, this technique often fails.
How would you approach such a thing? Create layouts in the library and use a shortcode in a text module (or even a code module) to load the layout?
Thanks, Sensei. If you mean putting modules within modules I’m not sure. I know there is a way to create a module, then take the shortcode and put it in another module. You may have to look that up as I’m not sure if there’s another option. Cheers and thanks for the comment!
Fantastic! Put this to use right away. Many thanks!
AWESOME to hear. Thanks Shannon!
GREAT Josh! Thanks very much for this.
No problemo 🙂 Thanks, Hutch!
Way to go, Josh! Thanks for this great approach!
Thanks for the feedback, Elisandro!
Thanks Dear
Very Useful to me,
Mine ended up stacked on top of each other
and fixed with Custom CSS within DIVI theme options!
Glad to hear it. Yep as long as the CSS is in your Custom CSS or Stylesheet, you’re good to go. Cheers!
Very nice to have the possibility to make a 5 or more row section. But what if I want to have 5 blurbs in a row with underneath each blurb a button? I can’t get that to work with 5 columns. You can’t put the buttons in the 5 columns section because than you will have 10 columns. Do you have a solution for that?
Hi Carla, if I’m understanding what you mean here, I think you can delete the module CSS and just put that class on the actual modules themselves. I do however stack elements all the time using my method. Hope that helps!
Hi Johsh,
beautiful tutorial, thanks a lot!
This same process, can I use it for the columns of the menu?
Thanks, Francesco! The menu doesn’t actually have columns. You just add the pages in the appearance menu section.
Yes I know, for the menu bar.
I wrote badly, I meant more columns for the drop-down menu.
In any case, I solved, thank you!
Keep it up with your great job Josh! 🙂
*of the drop-down menu
Hello Josh,
I’d like to make a services segment as you did on the Top Flight page. I’ve followed your tutorial and have my images in five columns and resizing correctly using the media queries. However, now I’d like to add the descriptions of the services below each icon. How do I go about doing this?
Thanks in advance!
Thanks, Trent. On the Top Flight site, those are actually Blurb modules with custom icons as the images, then I just put the text on the content. I’d try that out!
How would I go about adding a label underneath each photo in a 5-column configuration?
Not sure exactly what you mean, Trent – but you could either add a caption or just add a text module below. Hope that helps. Cheers!
Hi Josh,
All working just great… almost.
When I`m using several rows with 6 columns, there is always a weird distance between rows.
I cannot figure out how to remove these weird spaces?
Any suggestions?
Hey, you can probably adjust the padding or margins in whatever modules you’re using then you’ll be all set!
Great Tutiorial Josh, I need to ask you, how i can make the sam thing on shop module in mobile, i all ready use same method on shop module, it didint work , i need to make 2 columns in mobile version shop modul, please help me
Hi Ferhat, unfortunately the shop module has a different layout and coding in general so it would require some custom CSS or potentially php. Sorry wish the Divi layout could help with that!
Hi nice work, how to get a space between one for example one row has has five columns the next row has only four but they all fit under each other properly and not float left in the space that is intended. Float right doesn’t work.
mmm I’d probably add different rows with the different columns then just adjust the margins or padding accordingly!
Hey! So how would I make 6 columns, with 1 column width 50% smaller than the other 5? I included a screenshot for example:
https://d.pr/i/RWdC8Z
I’d probably recommend using a specialty section for something like that. You can get into using flex CSS I think but that sounds like a pretty custom layout and isn’t exactly what this tutorial/layout covers.
Josh,
THANK YOU for all the hard work. I am new to DIVI and have learned a lot in a really short time. I download this and added the css to my style sheet within my child theme, but it does not want to work for me. If I add the css to the Theme Customizer Additional CSS, it works. Any help would be greatly appreciative.
Hey Tony, welcome to the community! So glad you’re off to a great start. As long as the code is in your child theme css it should work…mmm not sure! Theme Customizer CSS is always the next best place to put it so you could just keep it in there. Hope that helps for now!
Hi, How do I make sure that the images fit side by side, no spaces in between regardless of screen size.
Currently, in our website (third row), if it’s wide screen, there will be space at the right side of each image.
mmm as long as images are the same size/dimensions and the gutter is set to 0, it should be a tight fit!
Works for 2 columns as well. Row with two buttons. One on the left, one on the right. Looked OK on desktop.
On mobile buttons lop sided. Used this fix and resolved!
Awesome! Great stuff.
hey Josh Mine are vertical oppose to horizontal. How do I fix this? I am basic with code
mmm as long as you follow the tutorial and installation video, it should be working correctly!
For some reason I cannot import. I have added the css to my stylesheet and did change one of my sections following your video, but when I tried to import the json file, it wouldn’t let me. Any advice on that>?
I did save my version to my library.
Hey Kimberly, just be sure to follow my installation video exactly and import to the Divi library, not the page itself if that’s what’s going on. Sometimes with the CSS, you just need to clear your cache as well!
Great tutorial. Normally (up to 4 columns) when viewed in mobile each column stacks on a separate row; but now that I have 5 columns they are showing 2 columns per row. How can I adjust your CSS to force them to stack on mobile?
Thanks Josh.
Hey Eric, you can just adjust the mobile width to go 100% instead of 50%! Let me know if that helps and works for you.
You sir are my hero, No seriously, Thank you very much
ha no problem!
Hey Josh
How do I get this to work in EXTRA?
Not sure but Divi just updated with more columns so you may be all set!
How could I get those customized Columns piled up on each other when it is viewed in a smaller screen like smart phones? Just like the normal columns in DIVI?
You can adjust the width in the media queries to be 100% then you’re all set!
Thanks so much for the tutorial. It ALMOST works how we need it to.
How would you handle the CSS if you would like to put an accordion element within the 5 columns? With the current CSS, it creates a column for each section of the accordion. Is there a way to make it ignore an element?
This method ALMOST works perfectly, however, we are trying to use an accordion in the columns and it is splitting the elements within the accordion up into their own 5 columns. How would you handle this?
Divi just updated with up to 6 columns so that should fix any issues you have! I guess I have to make a version 2.0 of this tutorial 🙂
Hi Josh – Both layouts were working perfectly on tablet and mobile, until today. Could it have been impacted by the 3.12 update? I’m pulling my hair out! 🙂
5 column – http://staging.corebaby20.flywheelsites.com/
6 column – http://staging.corebaby20.flywheelsites.com/parents/
Thanks!
Sorry, meant 3.12.2 update.
SORRY. Got it solved. Missing a bracket elsewhere screwed up everything! Thank you for this tutorial!
Whew great to hear! Oh yes the dreaded missing bracket. I once trouble shooting a site for a full day and one little bracket was the culprit so you’re no alone!
How can I add five columns in my footer widget?
Not as of now with the theme customizer settings. But with the new Divi column update you could just create a column and use Page Builder Everywhere and use that for the footer!
Wow Josh – first time viewer and you’ve won me over for ever! I am technically useless and struggle with anything related to CSS – my experience with it is a blank screen, a fatal exception error and then my crying in the corner while I call my Indian friend to fix it. You managed to help me do all of this without issue and I’ll be sure to send a tip your way very soon.
Question – do you do freelance work and can I hire you in future?
PS I entered the page URL below of where you helped me implement the 5 columns – thanks again!
Thanks for the comment, Alex! Super glad to hear the tutorial helped you. I’m not currently able to take on extra hourly or consulting work but you can email me through the contact form and let me know what kind of assistance you need.
Oh and my next course I’m planning is for CSS so hopefully that will help you out moving forward!