Divider

Author: Sarah Pham 154 views

The Divider element allows you to add styled, horizontal line to add a divider between other elements. You can change the line type, its width and color, and other settings.

1. How to add a divider element

To configure Divider, you can go to: Elements -> Basic -> Drag the Elementor named Icon List to the position that you want.

This is one of the Basic Elements, you can’t find it in others such as Product, Collection, etc.

With the Divider element, you can build some layouts below:

An example of a divider between the heading and subtitle
An example of a divider between the heading and content.

2. How to design the Divider element?

2.1. Content

Content
  • Style: Select the divider line style. There are 4 styles for you to choose Solid, Dotted, Dashed and Double.
  • Select Type: Select the divider type. There are 3 types for you to choose None, Text, and Icon.
  • Icon Position: This allows you to select the position of the text and icon in the divider.
  • Alignment: This allows you to align the divider for each screen size (Desktop, Tablet, Phone).
  • Spacing: This allows you to adjust the spacing between the divider line and the text/icon space.
  • Width: Select the divider’s width.

2.2. Design

Text

It includes ColorTypography fields that are applicable to text.

Text

Divider

  • Color: Allow you to select the divider line color.
  • Size: Allow you to set up the height of the divider line.

Gap

  • Gap: Allow you to set up the gaps around the divider (available for desktop, tablet, and mobile devices).

Please follow this video below for details about the Divider element:

Leave a Comment

On this page