The divi builder is one of the most comprehensive page builder plugins for WordPress available. It simplifies the creation of beautiful and intricate web pages to an incredible degree. Building a web page with DIVI is incredibly simple and straight to the point.
Creating a perfect page has a lot to do with the vertical and horizontal alignment of the content in the pages. Well-aligned content makes the pages aesthetically pleasing otherwise, it flares up my OCD for straight lines and perfectly aligned objects.
In this post, I will show you how you can vertically and horizontally align content in DIVI builder. It will need you to add a few small CSS snippets to the columns and or rows to achieve the alignment. I will show you using examples and screenshots using some of DIVI’s premade layouts templates.
DIVI Builder Vertical Alignment
When creating your pages with Divi builder, it’s good to pay attention to how things align on the page. It makes your work look professional and pleasing to the eye.
Divi builder is great. However, it has no built-in option to align content in rows and columns vertically.
This is where the power of CSS comes in. Applying a bit of CSS code to the content will allow your content to be aligned and will apply to any content height. These CSS snippets will also make the content automatically adjusted for various screen sizes.
There are three main ways to align your content vertically in Divi including, but we are going to be looking at two today.
· CSS Flex and Auto Margin
· CSS Flex Direction
CSS Flex and Auto Margin in DIVI Builder
Flex CSS or Flexbox CSS property is a simple and effective way for arranging objects in a horizontal and/or vertical stack, almost like a table. Except, unlike normal tables, the flex property allows you to create boxes that can “flex” or adjust to the size of the content it holds.
Whenever you select “Equalize Column Heights” in your row setting in Divi, it uses the flex property. This simply makes your columns adjust to the size of the column with the most content. And since “Equalize Column Heights” activates the flex property for the row container, you can easily add some CSS to your columns to adjust the contents of each individual column or box.
For instance, if you add the “margin: auto” property to any column in a row, the content of that column will become vertically centered no matter the number of modules it has.
Adding “align-items:center;” to your row will also allow all of your columns, including their content, to be vertically centered.
Here is how to do it.
Tip: It’s always easier to start with a premade page layout.
I am going to work with the Web Agency Landing Page Layout for this demo. To get this layout on your page, create a new page. Then give your page a title. Click “Use Divi Builder” and then “Use Visual Builder.” Then select the option “Choose a Premade Layout.” Then select the Web Agency Landing Page Layout Pack from the Load from the library. Finally, select Web Agency Landing Page Layout from the list of layouts and click “Use this Layout.”
Once you have loaded the layout to your page, you are ready to follow this tutorial.
Method 1: How to Vertically Align Content using Flex and Auto Margin in DIVI Builder
The first method we are going to use to align objects in the Divi page builder is by using Flex and Auto Margin. Here are the steps.
Step1: Open the row settings of the second row on the page (the one directly under the row with the page title).
Step 2: Under the design settings, toggle open the Sizing option group and notice that “Equalize Column Heights” is already active. This means that the row now has the flex property (“display: flex;”) added to it.
Step 3: Now, on the Advanced tab settings for the same row, copy and paste the following CSS snippet under the Column 2 Main Element input box.
Now you can see that the contents of the second column have shifted to become vertically centered.
Tip: To make the content to be bottom aligned, use the following CSS snippet.
margin: auto auto 0;
Aligning Content Vertically for All Columns in Your Row
Individually vertically aligning each column or item in a row can be a little bit much if you have to go through ten or more items. A short cut to this would be to add the following CSS snippet to the main element of the row’s settings. This will get all the columns aligned at once.
You can also apply this snippet to the row to bottom align all the items or contents of the row.
Tip: You can take advantage of Divi’s Extend Styles feature to extend any customized style throughout the page or to specific elements within specific locations with the click of a button. You can do this by right-clicking on the main element with your CSS snippet and clicking “Extend Main Element.”
This first method is a little bit flawed because, as you may have noticed, the column’s background color is no longer all white. The white background does not span the full height of the row. This is due to the manipulation of the margin using the snippet
You could fix this by changing the background color of the entire row to white and get rid of the row padding.
There is, however, a better way to achieve vertical alignment without going through all this hassle. We are going to see this in the next method.
Method 2: Vertically Aligning Content using Column Flex Direction
The first method used the flex property to apply a vertical alignment on objects in a row. This had some resulting problems in the end, which can easily be fixed.
There is, however, another way that would align columns without necessarily manipulating its magins. We can use the flex-direction to achieve this without losing the “Equalize Column Height” effect that keeps our columns (and column backgrounds) the same size.
This can be done by simply adding a few lines of CSS to our column that would vertically stack and center all the modules within the column.
Following the steps in our first example up to the point where we have to apply the CSS snippets, “Reset Custom CSS Styles,” to remove any codes.
Then add the following CSS under Column 2 Main Element:
To bottom-align the content, simply change
This snippet actually vertically center the content while making the full row width
Using the flex-direction method is also a great way to align content in a row horizontally. You can either top align, horizontally justify or bottom align objects with ease.
We will use Blurbs to demonstrate this horizontal alignment method.
When making blurbs, we see that not every blurb will have the exact amount of text used to describe the feature or service. Making these blurbs to be horizontally centered can create a nice design for your layout.
We will use the digital payments home layout to show how this can be done.
First, we need to add the blurbs in the layout and add different amounts of text for each blurb.
Now, go to the row settings and click on “Equalize Column Heights” to apply the same height setting to the whole row.
Step 2: Add my CSS snippets to align the content and change the design.
This can be done under the advanced tab of your Row Settings.
In the advance tab section of the row, you can vertically center the content of the columns by adding the following under Main Element:
To achieve a horizontal bottom alignment, apply the following snippet
You can also use the custom margins following custom margins to make the first column bottom aligned and the third column top aligned to give it a diagonal look.
On Column 1 Main Element CSS, add:
margin: auto auto 0;
On Column 3 Main Element CSS, add:
margin: 0 auto auto;
Final Thoughts about vertically and horizontally align in DIVI
Even though this method does rely on a few small snippets of custom CSS, I believe the application can be handy for those looking for a quick fix to a sometimes cumbersome process. Please feel free to share your thoughts on this process and examples of instances it has bailed you out from an otherwise cumbersome amount of work.