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.