Let’s say you are working on a site and designing a 3 column structure with some text and a button. Likely you do not have the same amount of text for each column and now they have different column heights. This looks ugly and unprofessional design, the solution, equalize the column heights so that they have the same height despite the amount of text in it. Equalizing the column heights in Divi is easy to do however this will come with another issue when you have a button in each column, I will cover that too in this tutorial.
What you are going to learn in this tutorial:
- How to equalize column heights
- How to align buttons to the bottom of the column
- How to make a column background image the same height as the other columns
How To Equalize The Column Heights
For example, you have a 3 column structure with a text and button in it like this:
I have added a background color for each column. As you can see above this looks quite ugly so let’s equalize these columns.
Open the row and go to the design tab. Under Sizing, you can enable Equalize Column Heights.
And now your columns will look like this:
The 3 columns have now the same height, however, the button is not aligned nicely so let’s fix that next.
How To Align Buttons To The Bottom Of The Column
Open your button and go to the advanced tab. Under position use the following settings:
- Change position to Absolute
- Change location to left-bottom
- Vertical offset 25px
- Horizontal offset 25px
You might need to change the vertical and horizontal offset number with the same padding that you are using for your columns, in my case I used 25 px for my column paddings.
Add a 25 px bottom padding to the (text) module above the button. This will make sure that there is always a little space between the button and the module above it.
If you did this it will look now like this:
How To Make a Column Background Image The Same Height As The Other Columns
Another nice thing you can do with the equalizing column feature in Divi is to make a column background image the same height as the other columns. For example, you want to make 2 columns with a text and button and one with an image. I have activated the Equalize Column Heights feature and placed an image module in the second column, but it looks like this:
To make the image at the same height as the other 2 columns you can do the following. Remove the image module and open the row and then go to the second column.
Now add a background image to the second column.
And now the second column has an image that has the equal height of the other columns.
This works great for desktop but for mobile, we need to do one more thing. On mobile, the columns are stacked and not next to each other so the function equalizes column height will not work. This happens because there is nothing in the second column so it will not be visible.
However, this is easy to solve. Place a divider module in the second column and under Visibility > Show Divider set this to No.
Then go to the Design tab and under Spacing > Padding add a top and bottom padding.
This will give the second column with the background image some content but it will not be visible. Now the background image will be visible for mobile too.
I know this post is a bit dated, but I find that Equalize Column Heights rarely works. Doing what you suggest, merely setting Equalize Column Heights to “Yes” does not work.
So sorry. I was looking at my design at the module level rather than the column level. It does work. Apologies!
Dude! You made my day! I’ve been looking for this solution for a long time.
sorry did not work for me
Hi Stacey,
What exactly does not work for you? If you let me know then I will help you out.