Alignment is something that’s quite a big deal for me. I think it’s the perfectionist in me, or maybe it’s OCD. But anyway, if that’s how you feel as well, this tutorial is for you!

Let’s get to aligning our modules/content vertically!

Sample

Video Tutorial:

Tutorial:

Step 1: Create Content in a Row

Start to create your row with multiple columns. In the example, there are 4 columns, which include the Image module in column 1, Text module in column 2, Button module in column 3, and Blurb module in column 4.

Step 2: Equalize Column Heights

After creating the content or the design, go to the Row Settings > Design > Sizing > Turn on Equalize Column Heights

Step 3: Add CSS Class to Each Column

While still in the Row Settings, head to Advanced > CSS ID & Classes. Add a Class to each column; for this example, let’s add vertically-align to each Class of each column

Step 4: Add CSS code to Theme Customizer

The final step! Head over to your WordPress Dashboard > Divi > Theme Customizer > Additional CSS

Add this code:

— —

.vertical-align {
display: flex;
flex-direction: column;
justify-content: center;
}

— —

As you can see from the bolded text, that’s the Class that we added to each column.

After adding this code, make sure to press Publish, and you’re done! The modules/contents are now vertically aligned.

If you have any questions or inquiries on this tutorial, please do not hesitate to leave a comment, and I will be happy to help!

If you watched the YouTube video tutorial, enjoyed it, and it has helped, please do Like, Comment or Subscribe! Thank you!