help center

On this page

Add a vertical divider in Elementor

Last Update: August 17, 2023

Using Column Borders

You may use the Border function from the column Style Tab to create vertical dividers by following the instructions below:

Vertical Divider With Columns Add a vertical divider in Elementor 1
  1. Create a multi-column layout by using sections or the Inner Section Widget
  2. In the Style Tab > Border  of the desired column, select the style from the dropdown
  3. Unlink the border Width properties and set the left or right width in PX
  4. Set the border color of the by choosing it in in the color picker
  5. Change border properties for tablet and mobile breakpoints in the Responsive Controls

Example Resources

l4Igy3L0bN7IUKKsuidLIsF ehmvQjvY 3e6 cGu3K5ZOeHP84QTWrYVxAZ1dwkxbqaOsMcpzdFoOxXGKWy1Kq BkBomw22OsLk4RLMT4YaW1tQ0H4TNumPRyYKIfC3t IVkrTWy Add a vertical divider in Elementor 3

Using a Spacer Widget

You may use a Spacer Widget to create a vertical divider in Elementor by following the steps in the instructions below:

Spacer Widget Vertical Line Add a vertical divider in Elementor 5
  1. Create a multi-column section (example: 3).
  2. Set the width of the columns leaving only a minimum allowed space for the divider column (example: 48 | 4 | 48)
  3. Drag a Spacer Widget to the reserved section.
  4. Set the desired height of the widget in PX, VH, or EM from the Controls of the spacer widget.
  5. In The Advanced Tab > Margin, set the left and right margins to near 50% (example: 47%) to create the width of the spacer
  6. In the Advanced Tab > Background, set the background color of the spacer by choosing it in in the color picker
  7. Adjust the column widths for tablet and mobile in the Responsive Controls

Example Resources

Spacer Widget Settings For Verticall Divider Settings Add a vertical divider in Elementor 7

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article