How to Add Vertical Divider in Elementor

The Elementor Page Builder lets you create websites in no time—and it keeps getting better with every update.

Despite its growing popularity, Elementor still has a few limitations. For instance, it does not allow users to add vertical dividers within the editor. This article will explain how to add vertical divider in Elementor to help you create the perfect website. Let us dive in.

What is a Vertical Divider in Elementor?

A vertical divider is an element that allows you to separate content into different sections. It is a great way to create a visual hierarchy for your website and allows users to navigate through it easily. Vertical dividers are also known as dashes, lines or separators.

They are usually placed between paragraphs of text or images but can also be used as headings or call-out boxes on other elements such as buttons.

How to Add Vertical Divider in Elementor

If you are an elementor pro user or using a free elementor plugin, I have a solution for both, so let us get started!

Add Vertical Divider In Elementor Pro

Step 1. Add a new Elementor section

elementor add section icon
select section layout in elementor

The first thing you have to do is to add a new elementor section having 3 columns so in order to separate it using a line in between the section.

Add two image elements or whatever element you want to the side columns leaving the middle one as it is.

add two image side by side elementor

Step 2. Adjust the Columns Width of Elementor Section

section edit icon elementor

Hover over the middle column, and the icon will pop out. Click on it to open the column settings in the right panel.

Change the column width under the layout tab to 4% in order to make the middle column narrower so the divider fits in.

change column width setting

Also, change the column vertical-align attribute to the bottom, as shown in the picture below.

change column alignment setting

Also, adjust the right and left column width if it is not correct.

change column width setting

Step 3. Add Elementor vertical divider

add elementor divider

Add the vertical divider element of the elementor to the middle column section, open the column layout setting from the side menu, and change the vertical alignment of the column to the bottom, as shown in the picture below.

click on column icon

Step 4. Change Elementor divider properties

click on divider edit icon

To access elementor divider properties, hover over the divider elementor in the middle column a pencil icon will appear. Click on it, and it will open a divider edit panel on the left side.

CSS code fro elementor vertical divider

Now go to advance, open the Custom CSS tab, and paste the following CSS code.

Vertical Divider Elementor CSS

    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg)

Step 5. Style Vertical Divider Elementor

increase decrease height of the divider

In the edit divider panel, you can adjust its height by sliding the toggle left to right. For this, you have to change the unit to PX, and sliding the toggle, will increase or decrease the height of the elementor divider.

divider styles of elementor

Also, you can style the divider by adding different line styles like a zig zag and dotted and icon/text to the divider elementor line.

divider styles of elementor

Add Vertical Divider In Elementor Free Version

Adding a vertical divider in the free version of the elementor is the same as we did in the paid version. However, we have to follow a different approach, so follow the steps below to add a vertical line in the elementor free version.

Step 1. Add divider widget to elementor column

add divider in elementor

Drag a divider widget to the elementor column and set its width according to your need.

Step 2. Add the code for the vertical divider in Elementor

class name in elementor

Now go to the advance tab and enter a name for your divider class in the CSS class box; doing so, we will only target the specific divider, not affecting all other dividers and paste the CSS code below.

Vertical Divider CSS code in Elementor

.vertical-divider { transform: rotate(90deg); }
CSS code for vertical divider elementor

Step 3. Adjust the Vertical divider

The CSS code we pasted in step 2 will flip the divider from horizontal to vertical position, and you can adjust its width, color and other properties from the side panel.

Adjust the Vertical divider

So that is it. This method will only work if you have columns next to each other, like on a desktop, but on mobile, it will not look good, so you will have to hide it from the responsive tab in the advance menu.

Vertical divider mobile responsive

Add Vertical Divider in Elementor Using Plugin

If you are confused with the above method or are someone that loves to add plugins for the most basic task, then this method is for you.

Adding a vertical divider using the plugin will not require adding CSS or code from the user side. With a plugin, you can easily customize the widget color, weight and other properties.

To add a plugin, Go to your WordPress dashboard, Navigate to Plugins > Add New and Search for PowerPack Addons for the elementor plugin.

Adjust the Vertical divider

Once the plugin is installed and activated, go to the page you want to add a vertical divider for, scroll down the elements sidebar of the elementor and look for the divider of Powerpack.

vertical divider widget powerpack plugin

Once you find it add it to the desired location on the page, and you will have an option to change the direction of the divider in the divider edit menu.

change divider direction

You can also change the style of the divider from the style tab from dotted to dashed or double,

Once you are done with the changes, update the page and visit the page to check if everything is working correctly.

Add Vertical Divider in Elementor

Why Are Vertical Dividers Important?

Vertical dividers are important because they help create a visual hierarchy for your website. They can be used to separate different content sections or highlight certain elements like headings and call-outs.

This makes it easier for users to understand the structure of your site and reduces confusion when reading through information.

Vertical dividers are also important because they help create a more professional and polished look for your website.

They also help to create a visual flow throughout your site. This makes it easier for users to navigate the different content sections and reduces clutter on your page. By using vertical dividers, you can create a more organized and structured website that is easy for users to understand.

You may Like:

How to Edit Header and Footer with Elementor in WordPress

How To Duplicate A Page In Elementor

How to Use Z-Index in Elementor

FAQ (How To Add Vertical Divider In Elementor)

How do you add a line between columns in an Elementor?

Add A divider widget from the elementor elements panel and add this line of CSS code in your Custom CSS.
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg)

To add a vertical line between two columns in elementor

Elementor Divider not showing?

Plugin conflict can cause the issue of the elementor divider not showing. You can fix it by disabling plugins one by one and finding the plugin that is causing the issue.

How to add a vertical divider in WordPress?

One way would be to group each location inside a div and use border-left (or border-right, depending on what you want) instead of an hr.
<div class="location"> ... </div>
.location { border-left: 5px solid #fcb500; }


In this guide, we have explained how to add a vertical divider to your Elementor site. Vertical dividers can be a great way to add some visual interest to your site. We hope you have learned something new about this feature of Elementor. If we missed anything, feel free to reach out via email.

You may Like:

How to Change Background Image in Elementor

How to Change Link Color in Elementor

How To Add Text Over Image in Elementor

Bilal, a versatile Full Stack Developer and SEO expert, co-founded WebTalkHub. When he's not optimizing websites, you'll find him embracing a fitness routine, diving into books, and exploring new horizons through travel.

Leave a Comment