Divi: the easiest WordPress theme to use
Divi: The best WordPress theme of all time!
With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]
The ability to vertically align content when creating a site with Divi can be a practical addition to your design tool. Sometimes a certain layout requires the content to be vertically aligned in different ways (centered, low, high). The most common need is to center your content vertically.
It provides a nice and convenient symmetrical spacing key when using multiple column layouts for your content. In addition, vertically centered content stays centered on different browser widths, eliminating the hassle of applying custom fill or margins for similar responsiveness.
In this tutorial, I will show you how to add a few small CSS snippets to any column to vertically align the content. I will use some of the predefined Divi layouts for examples of how to proceed. If you do not know much about CSS, you do not have to worry. It will be pretty easy to apply to your own layouts in seconds.
Understanding Flex and Divi
The Flex (or Flexbox) property is simply a way to position elements in horizontal and / or vertical stacks (much like a table). Except that unlike traditional tables, the flex property allows you to create boxes that will fit the size of the content it contains.
Divi uses the flex property whenever you select "Equalize Column Heights" as the line parameter. This simply ensures that the size of your columns will adjust to the size of the column with the most content. And since Equalize Column Heights activates flex for the line container, you can easily take advantage of it by adding css to your columns to adjust the contents of each column (or zone).
For example, if you add "margin: auto" to a column in a row, the contents of that column (whether it's one or more modules) will become centered vertically.
In addition, if you add "align-items: center" to your line, all your columns (and their contents) will be centered vertically.
Of course, there are many other uses of the Flex property in web design, as well as more advanced CSS that you can apply to your theme. But for this tutorial, I wanted to keep things simple.
Is it really necessary?
Technically, no. You can vertically align your content / modules in a column using custom spacing (fill and margin). For example, you can use the Divi spacing options to give a column equal to the top and bottom padding to center the module (s) vertically in the column. You can also add only one fill greater than one column to align the lower content. However, you may need to adjust the spacing when updating your page with more content. In addition, it can be difficult to maintain this alignment on different browser widths.
So, if you're looking for a solution to vertically align the content without having to think about the custom spacing, I think you'll find that helpful.
Load the predefined layout on your page
For starters, I will use the layout of the Interior Design Company Portfolio lineup. To get this layout on your page, create a new page. Then give a title to your page. Click on "Use Divi Builder" and then on "Use Visual Builder". Then select the option "Choose a basic layout". Then select the Interior Design Company Layout Kit in the Load From Library pop-up. Finally, select the Portfolio page in the list of layouts and click "Use this layout".
Once the layout is loaded on your page, you are ready to go.
1 Method: How to Vertically Align Content with Flex and Auto Margin
Open the line parameters of the second line of the page (the one directly below the line with the title of the page). Under the design parameters, open the sizing option group and note that "Equalize Column Heights" is already active. This means that the line now has the flex property ("display: flex;") added.
Now go to the Advanced tab settings for the same row and add the following css snippet under the input field of the main item in the 2 column.
Easily create your website with Elementor
Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]
Now the contents of the second column have been moved to be centered vertically.
Make lower content aligned
If you want to align your content on the bottom so that all modules stack at the bottom of your column, you can adjust the margin value as follows:
Vertical alignment of content for all columns in your row
Instead of adding "margin: auto" to each column individually, you can also vertically center the contents of all columns in your row by adding the following snippet to the main element of your row parameters.
Or if you want all the contents of your columns to be aligned at the bottom, you can add this excerpt:
And do not forget that you can take advantage of the Divi Extend Styles feature by right-clicking on the main item with your CSS snippet and clicking "Expand main item".
Then, extend this main css element to all the lines of the page (or section) to vertically center all the contents of each column of the page.
Now everything is centered vertically.
But, you may have noticed that the background color of the white column no longer covers the full height of the line. This is because we added "margin: auto" to the column. To resolve this problem, you can change the background color of the blank line and remove the fill from the line. But instead, I'll show you a way to center the contents of your column without changing the margin.
Are you looking for the best WordPress themes and plugins?
Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]
2 Method: Vertical Alignment of Content Using Column Flex Direction
In the first method, we took advantage of the flex property added to the line. This has made each of our columns a "flexible box" that can be aligned vertically by simply adjusting the margin.
But there is also a flex-direction way to align the contents of our column without losing the "Equalize Column Height" effect that keeps our columns (and the backgrounds of columns) the same size. To do this, we will simply add a few lines of CSS to our column so that all modules in the column are stacked vertically and then centered.
Let's go back to our line in the previous example. Open the line settings and delete any custom css you may have by right-clicking custom CSS and clicking "Reset custom CSS styles".
Then add the following CSS under the 2 column, main element:
display: flex; flex-direction: column; justify-content: center;
Or, if I wanted to align the content at the bottom, just replace "Justify the content: center" with "justify the content: flex-end".
The great thing with this setup is that if my content is centered vertically and the width of the line is reached, the content stays centered.
Make blurbs (Summary) with different amounts of vertically aligned text
Making your column content vertically centered can also be useful for blurbs. As you know, not all blurbs will contain the exact amount of text used to describe the function or service. Centering these blurbs vertically can create a beautiful design for your layout.
For this example, I'm going to vertically align the blurbs on the layout of the Digital Payments home page.
I will first add different amounts of body text to the blurbs to give a more realistic representation of what a site might look like.
Now I have to go to the line settings and "Harmonize column heights".
Now I can add my CSS snippets to align my content and modify the design.
On the Advanced tab of your row settings, we can vertically center the contents of our columns by adding the following under Main Element:
Or change it by following to line them down.
Easily create your Online Store
Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]
You can also reset your custom CSS styles and add the following custom margins to align the first column bottom and the third aligned column top.
1 column CSS main element:
3 column CSS main element:
What about one-column layouts?
Technically, you do not need CSS snippet or flex to vertically center your column content. All you need to do is make sure you have equal spacing above and below your content (or modules). Most of the time, users need vertical content centered on multi-column models because they want the adjacent content to align perfectly.
That's it for this tutorial that shows you how to align elements on the same line on Divi.