Alignment is such an important thing to me, so having a way to align buttons to the bottom of the row is a must! In this tutorial and example, I’m only focusing on adding 3 columns into one row with a Text Module into each of them and a Button Module at the bottom. But, of course, you can do this with any modules above the Button Module.

This simple CSS trick also helps with making your website look professional and clean.

Let’s get started!




Video Tutorial:


Step 1: Equalize Column Height

Let’s assume that you already have a layout with multiple columns in 1 row. First, what we have to do is to go to the Row Settings > Design > Sizing > Turn on Equalize Column Heights

Step 2: Add CSS Class to Row

While still in the Row Settings, go to Advanced > CSS ID & Class > Add “align-bottom” to the CSS Class

(You can change the CSS Class added to any text, just for this example, I have added “align-bottom” to be the CSS Class.)

Step 3: Head over to Theme Customizer to add CSS

Let’s go to the Theme Customizer to add the simple CSS via WordPress dashboard > Divi > Theme Customizer > Additional CSS

Step 4: Add CSS Code & Publish

Now, we can add this code:

.align-bottom .et_pb_column {
.align-bottom .et_pb_button_module_wrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;}

The bolded text in black is the CSS Class we added earlier, and do keep in mind that you can change the CSS Class to any text as well!

If you already have some CSS codes in there, you can add this code at the top or at the bottom; the positioning doesn’t really matter as much.

And then, make sure to click the Publish button!

And that’s it! Have a look at where you’ve added your layout, and the buttons are now aligned to the bottom of the row! It should look pretty clean now, right?

If you have any questions, don’t hesitate to leave a comment, and I will do my best to help!

If you watched the tutorial video, and it helped, I am very happy that it did! Please Like, Comment & Subscribe to my YouTube channel! Thanks!