WEEKEND SALE: Get 50% Off On Our UNLIMITED DOWNLOADS Annual Plan! Use Code "WKND" At Checkout

DOWNLOAD ALL NOW!

Search for a plugin or theme

How to Add a Vertical Divider With Elementor

You are currently viewing How to Add a Vertical Divider With Elementor

Dividers are a great way to separate between different sections or elements on a page.

While we can use the divider widget of Elementor to create a horizontal divider, we’ll need to add an extra step to make it vertical.

In this article, you’ll learn how to add a vertical divider with Elementor.

Horizontal Vs Vertical

A horizontal divider is a line being displayed between sections that are positioned one under another.

A vertical divider will be displayed as a separator between sections that are one next to another.

Vertical Vs Horizontal Dividers

Elementor’s default divider widget is only allowing us to divide between the sections horizontally. However, we can still create a vertical divider, and in this tutorial, I’ll show you exactly how.

How to Create a Vertical Divider with Elementor

Firstly, I will show you two methods of creating the vertical divider with custom CSS and designing tricks. In a second way, we will use a plugin to make the whole process way more accessible.

First, let’s create the vertical divider without any plugins.

Vertical Divider without a Plugin

Method #1 – CSS Rotation

With this method, we will use the CSS rotate rule to spin the divider 90 degrees.

First, drag the Elementor divider widget to the middle column and set its width.

Elementor default divider widget

Next, navigate to the Advanced tab and enter the word vertical inside the CSS class box. That way, we can target this specific divider only and not all the other dividers.

Last, paste this CSS rule inside the Additional CSS box of the Customization screen.

.vertical {
transform: rotate(90deg);
}
CSS rules to make divider vertical

This CSS rule will flip the divider from its horizontal position to a vertical position. Once saved, feel free to adjust the width of the divider by sliding the weight option left or right.

Change divider width with weight slider

That is my preferred way because it’s straightforward with minimal customization.

This method will only work if the columns are next to each other, like in a desktop view. In a mobile view, it will not look good, and therefore you should hide it.

Hide divider on mobile

If the method above didn’t work for you as expected, try the second method.

Method #2 – Spacer Widget

This is also an excellent method to create a vertical divider but requires some extra steps.

First, change the width of the dividing column to the minimum allowed number, which is 4. If you have three columns section, the other two sections will be 48% each.

Set column to minimum

Drag the spacer element to the narrow column and set its height under the controls tab.

Elementor widget libraries

Set spacer height

Navigate to the Advanced tab of the spacer widget and set a background color.

Change spacer background color

While still in the advanced tab, unlink between the margin properties and set an equal margin distance for left and right. The margin size is based on the desired width of the divider.

Change divider width with margins

When done, make sure to save the changes and modify them for mobile and responsive viewports.

Setting the divider width by its margin makes it very easy to adjust it to any screen size.

Change margin on mobile

If you’re looking for an easier way to create a vertical divider than both methods shown above, you would like the next option.

Vertical Divider with a Plugin

That is the easiest way to add a vertical separator with Elementor because it does not require any CSS. Also, when using a plugin, we can easily control any aspect of the element, such as height, color, and type.

From your WordPress dashboard, navigate to Plugins -> Add New and install the PowerPack Addons For Elementor plugin.

PowerPack for Elementor Plugin

Once activated, edit your desired page with Elementor and scroll down the elements sidebar to view all the new PowerPack widgets.

Look for the new divider widget and drag it to your desired location.

PowerPack Divider widget

Finally, under the content tab, change the direction option to vertical.

Change widget direction to vertical

If you want to have a solid divider instead of a dashed one, move over to the Style tab and change it to solid.

Change divider style

You can also change the divider color from its default color to any other one, just like you can do with any other element.

Change color of divider

When finished, click on update and visit your page to make sure everything is working correctly.

The pro version of PowerPack comes with many more amazing widgets to choose from. If you’re interested in getting the pro version of the plugin, you can do so from the official website for a total price or from us for only $4.99.

Alternative Elementor Extensions

The PowerPack plugin above is one of many plugins that can add a rich library of widgets to the core Elementor plugin.

Here is a list of similar plugins with unique widgets that you may want to check out:

  • Ultimate Addons for Elementor
  • Essential Addons
  • Croco Blocks
  • Unlimited Elements
  • The Plus Addons
  • Piotnet Addons
  • Namogo Extras
  • Element Pack
  • Premium Addons

If you debate which plugin to use, check out ourĀ unlimited download plansĀ and download them all for a small fixed price.

Conclusion

This article showed you how to make a vertical divider with Elementor in few different ways.

Let us know below which one of the methods you used for this task.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply