How to Align Content in Elementor

How to Align Content in Elementor

Share This Post

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Table of Contents

Elementor Logo

In this WPDesigns article, we will discuss how to Align Content in Elementor.

Alignment is important, it not only keeps everything on screen looking tidy, but it maintains this through any screen resolution.  You can achieve alignment with pixel or percentage but when the screen size changes and adjusts, your alignment will be lost and all out of alignment.  Using the alignment options is the easiest and simplest way to remedy this problem.

When working with Elementor, you’ll find that customizing the position of your sections and columns is a little tricky. To achieve a responsive “stretch-to-fill” layout, you must align columns and parts vertically and horizontally. The elements of columns with different heights can not change on-screen without this synchronization.

What Is the Purpose of Alignment?

Align Content In Elementor(1)
Align content in Elementor

The element in each column or section can be divided into various categories. It could take the form of images, text, or ratings. It is recommended that element appearance be compatible for a smooth appearance.

You will make your website look more neat and classy by aligning it properly, so it does not appear messy. You can align multiple widgets of different sizes next to each other in the same column using the alignment option. You can align them in two ways Horizontally and vertically.

Vertical Alignment Of Elementor
Vertical alignment of Elementor

Vertical Alignment

You can align the widgets by selecting from the options below. However, keep in mind that the content in a column cannot be aligned with the first three vertical column choices, namely top, middle, and bottom. In addition, there are three new options that make it extremely easy to align the content to your style.

Top: It allows you to align vertically top of the column.

Middle: You can set the content midle of the column by choosing this.

Bottom: It will align all the cotent of the column at the end.

Space Between: When you will choose space between it will allow you to set the gap between widgets at the beginning and end of the column. That means, Widgets will begin and end at the column’s edge, with an equal space between them.

Space Around: When you will select space between the space between them will equal and the edges will half the size of the space between the widgets.

Space Evenly: Between, before, and after widgets, there is an equal space when you will select space evenly.

Horizontal Alignment

This extends the capabilities of inline positioning by allowing you to align inline widgets in the same row horizontally. These options can be used to align the content of the columns horizontally:

Start: It allows you to align the content inside column at the left side.

Center: It allows to align the content at the middle of the column.

End: By selecting end, all the content will align at the right side.

Space Between: The distance between widgets at the beginning and at the end of the column. The widgets are evenly spaced, so there is an equal space between them.

Space Around: The distance between the widgets is the same, and the edges are half the distance between the widgets.

Space Evenly: The space between widgets is compatible it’s same before, after, and in between.

Horizontal Alignment Of Elementor
Vertical alignment of Elementor


Social Media

Recent Posts


Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.