Customise column widths in the Divi by Elegant Themes

Although Divi gives us a great range of options for column configurations, sometimes you want something else.

Luckily, there is a very simple and easy way to customise column widths by using a little simple math and css. You can read more about this video by Pee-Aye Creative. 

First Step – Add a row

First we add a row with the number of columns you’d like. 

Second Step – edit the setting that apply to the row

Edit the row settings as in the pic below…
Custom Gutter Width – Yes
Gutter Width – 1
Equalize Column Heights – Yes (not crucial)
Width – 100%
Max Width – 100%

customize column widths

Third Step – Add CSS to the advanced settings on each column

You’ll need to make sure that the columns sizes add up to 100.

You can use any configuration, so long as it adds up to 100.
So this 5 column row could be… 10, 10, 60, 5, 15 = 100

On each columns settings head to Advanced > Custom CSS.
Then add the percentage you want to apply to the row…

width: (the percentage you want)%!important;

column customisations

Fourth Step – Add spacing to the section

Once you have your row sorted with the correct sizes, you can add some padding to the section left and right to bring the sides in.

For more great menu ideas head to our Quick Tips

We created column widths on the following:

AlexanderDorrington

Pin It on Pinterest

Share This