Divider element

In this article, you will learn about the Divider element and how to use it.

About Divider elementClick to copy

The Divider element acts as a decorative line break between 2 elements or sections on your page in order to increase conversion rates.

Access the Divider element

Step 1: Click on the Plus icon which is the Add element function

Step 2: Click on the Divider element in the dropdown menu

Step 3: Drag and drop the element you want into the page editor and then start using it.

Note that you can search this element by using the search function instead of finding it in the sidebar.

divider element pagefly

The divider element comes with multiple variations covering most needs. But we will continue to add more variations to help you save time.

Drag a variation to the layout and see how it can be configured.

Divider element configurationClick to copy

The Divider element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.

Select the element in the layout to see its parameters.

divider element pagefly

In this article, we’ll show the parameters of the General and Styling tabs for the Divider element.

General configurationClick to copy

Line Color: Choose line color for the Divider with a color picker or insert the color parameter. divider element pagefly
Line Weight:  Adjust the line weight (thickness). The maximum value is 20 px and the default is 2 px.divider element pagefly
Divider type: Select the type of divider
Default: A simple straight line divider with no other content on it.divider element pagefly
Icon: A simple line and an icon. 
  • Content Position: Set position for the icon.
  • Icon: Select the icon in the Icon section, and you can edit the size of the Icon that you choose.
  • Size: Set the size for the icon by adjusting the pixel parameter as you want. (The maximum value is 1000px, and minimum is 0px)
divider element pagefly

Edit size of the nested icon element:

divider element pagefly

Text: A simple line and a piece of text.
  • Divider Text: Insert the text you want to display on the divider.
  • Content Position: Set position for the icon.
  • Color: Set color for the text.
  • Font Size: Set the font size for the text.
divider element pagefly
Symbol: A simple line and a symbol.
  • Content position: Set position for the symbol.
  • Symbol: select the 6 pre-designed symbols.
  • Color: Set color for the symbol.
divider element pagefly

Styling configuration

You can check more information about the Styling tab here

Thank you for your feedback!

Navigate this category

PreviousPrevious article

Could not find the answer to your question?

No worries, contact Our LiveChat Support 24/7

Contact PageFly LiveChat
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!