How to Add a Vertical Divider in Elementor (Without Add-on)

Updated: April 27, 2022

The use of a divider is not only a marking between two objects, but a divider can beautify your page and looks engaging and aesthetic. Luckily, only with the help of Elementor, you can add a horizontal divider and a vertical divider easily. We assume that you don’t need to read a tutorial for adding the horizontal divider to your page because it’s seamless, just pick a divider widget from the widget panel then drag and drop it into your canvas area and you’ll have a horizontal divider. But, it’s a different story if adding a vertical divider, it will need more effort.

In this tutorial, we will show you how to add a vertical divider in Elementor without an add-on. There are two methods of adding a vertical divider in Elementor that we gonna use here as below:

  • Using the Spacer widget
  • Using the Divider widget

How to Use Elementor’s Widget to Add a Vertical Divider

Method 1: Using the Spacer Widget

You can use the free version of Elementor tor to add a vertical divider with this method. You can use the Spacer widget to add a vertical divider with creativity. Well, let’s get started.

Enter the Elementor editor. Create a new section with three columns. Then adjust the width for each column. In the middle, we’ll use it for the Spacer widget, and for the rest, we’ll be using it for the Text Editor widget. For example, On the Spacer widget, we set the width column to 5% and 47.5% width for each Text Editor widget.

Go to the Spacer widget settings panel; adjust the space by sliding the Space toggle on the Content tab. Once you set the space, move to the Advanced tab, then click the Background button. Set the Background Type to Classic and change the Color to black.

Next, we continued to the last step of this method. Still on the Advanced tab -> Layout. On the Margin settings, click the link icon to unlink the values. After that, give the equal number to the RIGHT and the LEFT. In this example, we set it to 14 PX each.

Method 2: Using the Divider Widget

Unlike the first method, you need Elementor Pro to follow this tutorial. Basically, you can use the divider widget to add a horizontal divider. Still, to add a vertical divider, you’ll need the Custom CSS feature that is only available on Elementor Pro. Well, let’s begin!

Enter the Elementor editor. Create a new section with three columns. Click the Edit Section, then set the Vertical Align to the Middle. Next, put the widgets into the canvas area. Text Editor in the first column, Divider in the second column, and Text Editor again in the third column.

As you can see, you have a divider, but it’s still horizontal, so we need to apply some changes to make it vertical.

On the Divider widget settings panel, go to the Advanced tab and then click the Custom CSS option. Paste the following CSS snipped to the available field.

selector{
transform: rotate(90deg);

Now your divider becomes vertical. Next, you can customize the vertical divider with your creativity. Go to the Content tab and Style tab to edit and style the divider settings, such as style, width, color, weight, etc. Or you can adjust the width columns if you want to.

The Bottom Line

With Elementor, you can add a vertical divider easily. This article shows you how to add a vertical divider without the help of any add-on in two ways. If you have Elementor Pro, we highly recommend using the second method (divider widget); you can do more with your divider with more customization.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general