Advanced Columns
Of the popular visual page builders, Divi offers frustratingly few options for advanced columns. You cannot create a layout with more than 4 columns out of the box.
You can find videos that demonstrate how to create up to 8, but those assume you want every column to be the same size (e.g. a 1/5, 1/5, 1/5, 1/5, 1/5 layout).
In this video tutorial, I showcase how to construct a layout that’s a little more complex. In this case, I will be showing how to build a 3/6, 1/6, 1/6, 1/6 split.
Specialty Section
In addition to custom columns, I add image zoom, a background overlay, and margins and padding to give the page a unique appearance that fits the overall style of the website I’m building. Below is the css you will need to accomplish everything shown.
/* Six column layout 3/6, 1/6, 1/6, 1/6 */ .three-columns-special .et_pb_module {width: 33.33%; float:left;} /* Background Overlays */ .greyOverlay .et_parallax_bg:before, .greyOverlay:before { content:""; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, .55); } /* Image zoom */ .image-zoom img { transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; } .image-zoom img:hover{ transform:scale(1.1); -moz-transform: scale(1.1); -webkit-transform:scale(1.1); }
Check out more helpful Divi tutorials of ours or request we cover something.
Update: More columns are great, and we’re happy to see that ElegantThemes agrees. They have added 5 and six column layouts. But a split like 1/2, 1/6, 1/6, 1/6 isn’t possible within the builder yet. So for the time being, our method is the way to go for odder layouts.