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!
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:
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!