1. Home
  2. Docs
  3. Creative Elements
  4. Divider

Divider SA Element

The divider allows you to create a horizontal line that divides the content. You can use it as a separator between contents or highlight the title with it.  This lightweight element for Elementor gives you the ease of adding a divider between other elements. Here in this tutorial, you’re going to explore all about the Divider and see how to work with this incredibly important element into Elementor Page Builder. So let’s get straight into it:


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor



How to Customize the Divider Element





⇒Divider Type: Set the divider type either plain, text, icon or image. Then customize the settings according to your preference such as add text, select icon, upload image or set the direction.

⇒Alignment: Set the divider alignment either left, center or right.





⇒Vertical Alignment: Set the vertical alignment of the divider.

: Customize the style of the divider. Choose your preferred one from the list.

⇒Height: Manually customize the height of the divider style.

⇒Width: Manually customize the width of the divider style.

⇒Divider Color: Add a custom color to the divider for both before and after the divider line.



⇒Position: Set the Icon position either left, center or right in the divider.

⇒Color: Add a custom color to the divider icon.

⇒Icon Size: Customize the icon size manually for different dimensions.

⇒Icon Rotation: Customize the icon rotation inside of the box.

⇒Spacing: Generate some spaces from the icon to the divider lines for different dimensions.



Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Divider Element.

Was this article helpful to you? Yes No

How can we help?