Create An Elementor Vertical Divider

I know there is a horizontal divider in Elementor…but can you make a vertical one?

In this tutorial you will learn how to create an Elementor vertical divider. This stylistic choice can add an interesting visual flourish to your website. Let’s begin!

1. Create A New Section

Click the “+” button and select the desired column configuration for your new section. For this example we are going to use a three column section.

Add your desired elements to the two outside columns. I will place an image on the left and a block of text on the right.


2. Change The Width Of The Section Columns

Let’s adjust the middle column between the image and text block. Click the column icon of the middle column to get started

With the layout tab of the column selected, adjust the Column Width to 4%. We don’t need that much space for the divider and that’s why we are collapsing it.

Now change the Vertical Align attribute of the middle column from default to Middle.

Let’s change the width of the left and right columns surrounding our middle one. Since the middle column is 4%, let’s give the other two the width of 48%. That way the section will fill out the entire width (48% + 4% + 48% = 100%).


3. Add The Spacer Widget

Drag and drop the spacer widget into the middle column between the image and text

With the Spacer selected, and navigate to Advanced -> Background. Click the Paintbrush icon and choose your desired color for the divider.

Still in the Advanced tab of spacer widget, open the Positioning section and change the Width attribute. For this example we’ll set it to 4px.

Finally, adjust the “space” for the desired length of the divider. You can use PX, VH, or EM for the unit of measurement.

To make the spacing a bit cleaner, set the Vertical Align of the left and right columns to Center. And that’s it! You now know how to create an Elementor vertical divider.

elementor vertical divider

 

 

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Chris Erbstoesser
Chris Erbstoesser
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Table of Contents