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.
