*Update 15/2/17 – See full tutorial on Elegant Themes*

The Divi builder only allows you to add 4 columns per row, but with a little bit of creativity and custom CSS you can create more than 4 columns per row. You will need to have a single column with your modules stacked on top of each other. The CSS added to each module will then change it’s width, float it left and add margin between them, so they appear neatly in 1 row.

In the example below we are going to add 6 colums per row using the Blurb module, you will need to;
1. Add a new row with 1 column.
2. Add a Divi Blub Module
3. In the modules custom CSS tab add he following code;

float:left;
width:120px;

4. duplicate the module until you have 6 in total.

 

This example is for 6 columns, so you will need to edit the width of each module for the number of columns you need to add. You will want the widths to add up to the width of the row they are sitting in. A full width page without sidebar is 1080px, with a 1/4 sidebar it is 855px. See Divi column width here.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

BLURB

This is a blurb with custom CSS.

Comments

comments

Divi Freebies

Do you want some Divi FREEBIES?

Join our mailing list to receive the latest news, reviews, examples and Divi Theme FREEBIES.

You have Successfully Subscribed!

Pin It on Pinterest