Divi Extended Column Layouts – 5/6/7/8 Column Layouts

June 28, 2016 | Divi, FREE!, PHP, Plugins, Themes, Time Savers, Wordpress | 277 comments

I have been using the Divi builder for some time now and one of the most asked for features seems to be a 6 column layout. I saw in one of the groups recently someone had written something to release but it required a code change to the core which wasn’t ideal. I decided to try and work around any core code changes and came up with this proof of concept plugin. I have copied the 4 col CSS and modified it to suit 6 cols along with several breakpoints to drop from 6 to two rows of 3, then to three rows of 2 and finally 1 per row.

I have since added many more types of layout from 5 and 6 columns and different variants of each. See the screenshots for more information. Added more recently are 7 and 8 column layouts which work well also.

It seems this model can be extended to include ANY number of columns although the only snag right now is that the settings button on the ROW doesn’t work. If you’re happy with the layout or are ok styling with CSS for now then this is ideal. Otherwise it will get you the layout you want and I’ll include a fix for the settings button ASAP. Updates will be released soon so watch this page for info.

Download


Divi Extended Column Layouts (71236 downloads)

Update

Since release this plugin has gained lots more layouts, speciality layouts and support for every gutter size available using Divi. Please request different layouts via my contact form or comment on this post and I’ll get it sorted out 🙂

Update 2

The latest version of this plugin (1.8) fixes an issue on some servers where they experienced a fatal error on activation due to an ‘Unexpected T_ELSE’. This has now been sorted. Everything else remains the same.

Update 3

The latest version of this plugin (1.9) just adds a few more column layout options

Credits

Original idea based on a post by Divi Web Design. I had been asked for this in the past but assumed it was a big job. In the end it took two hours to write! But then it’s not quite finished so keep an eye on their Facebook feed for an alternative plugin to use if mine is no good.

A Donate Button!

277 Comments

  1. General

    Thank you SO much! You are a hero

    Reply
  2. JodieB

    Michelle, you can change the row to one of the standard configurations (say 4 wide) and set the row to full width. Save the row. Go back in and change back to the configuration of your choice and save the row and page.

    Reply
  3. iouston

    Hi Sean, Thank you for this module. It is very great.
    Im’using it and i saw that when i added a row, after i can’t access to the row’s settings with the last version of divi. Could you fix that ?
    Thank you a lot by advance

    Reply
  4. digitalfusiondesign

    Just curious how “Divi Extended Column Layouts” will behave with the new Divi update today that adds 5 and 6 column layouts.

    Hopefully it won’t break anything, as I’ve used the 7 and 8 column options here on a few sites.

    Will we be seeing an update for the Visual Builder soon, perhaps?

    Reply
  5. Russell

    thank you so much! plugin worked perfectly.

    for those who noted that ROW settings is not accessible – use visual builder once you have your row inserted.

    Reply
  6. El Goofer

    You’re great, dude!!!!! Thnx a lot!!!!

    Reply
  7. irfanmark

    I really like this plugging it’s all my big problem Thanks!!!

    Reply
  8. Carlos

    Thanks

    it’s a big plugin

    Reply
  9. Genesis Murillo

    How do you use this? I think I am just missing it or something. Do I have to just add a class to the module or something?

    Reply
  10. Genesis Murillo

    Nevermind. I was using the new divi builder and it does not come up in the layouts. Thank you!

    Reply
  11. Mark Richmond

    I figured out a way to style the row, when you get up in the 8 or 10 column sizes… just style it at one of the normal divi column sets, then when you expand it to beyond, it will carry the styling up to that point… for example if you want it to be fullwidth, and down to just 1 in gutter width… do it before you up it to 10 columns set…

    Reply
  12. Mirco B

    Hey, I faced that your plugin breaks the special layout 1/3 + 2/3[1/4+1/4+1/4+1/4]. More grafically: https://snag.gy/BHbl6W.jpg

    I mean, the code that comes out is:
    1_3 first column ok
    2_3 second column has wrong sub columns
    – 1_6 while it should be 1_4
    – 1_6 while it should be 1_4
    – 1_6 while it should be 1_4
    – 1_6 while it should be 1_4

    Latest Divi version. Latest version of your plugin.
    Thanks 🙂

    Reply
  13. Andy Salt

    Hi Sean. I was delighted with the extra column options this plugin gave me to use with the Extra theme. I used your speciality section with 2 equal columns on our homepage (https://roundededgestudio.com) to create a responsive grid effect. However, I’m now stuck with Extra 3.2.15 because after that, the theme no longer parses the section correctly (the 2 rows within each section get stacked vertically instead of being shown side-by-side as intended). Is there an update to the plugin required due to something that changed in the theme?
    Andy Salt recently posted…Exhibition beginner’s guide: part 2My Profile

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

CommentLuv badge

About this site and Sean Barton

Picture of Sean
Sean Barton is a Freelance Website Developer in Crewe, Cheshire. He is a Full Stack Developer but with extensive experience in Wordpress and other Frameworks. He is the Co-Founder of SitePresser, Layouts Cloud and Page Builder Cloud among other things..
This site was set up in 2008 as a tutorial and scripting resource for the PHP language and Wordpress.
Find out more about Sean on the About Me page or use the Hire Me page to get in touch. For more information about Sean's work take a look at the Portfolio

SitePresser is the plugin that packages child themes and layout packs for sale. Works with Divi and Elementor.