Edit PageFly Divider element

1. About Divider ElementClick to copy

1.1. What Is Divider Element?Click 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.

1.2. Where Can I find the Divider Element?Click to copy

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 for this element by using the search function instead of finding it in the sidebar.

divider

1.3. Divider TypesClick to copy

The divider element comes with 4 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

2. Divider Element General ConfigurationClick to copy

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

Select the element in the layout to see its parameters.

divider

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

2.1. General ConfigurationClick to copy

2.1.1. Select the Type of Divider

Divider Type: Select the type of divider

divider

2.1.2. Adjust the Line WeightClick to copy

Line Weight: Adjust the line weight (thickness). The maximum value is 20 px and the default is 2 px.

divider

2.2. Styling ConfigurationClick to copy

You can check more information about the Styling tab here

3. Divider Type General ConfigurationClick to copy

3.1. Plain DividerClick to copy

Plain: A simple straight-line divider with no other content on it.

divider

3.2. Edit IconClick to copy

Icon: A simple line and an icon.

  • Icon Position: Set the position for the icon.
  • Divider Icon: Click on the Icon, and you can select the icon you want to display on the divider. You can use the search function to find the icon you want.
  • Size: Set the size for the icon by adjusting the pixel parameter as you want. (The maximum value is 1000px, and minimum is 0px)
Set the icon position:

divider

Select the icon you want to display:

divider

Edit size of the nested icon element:

divider

3.3. Add TextClick to copy

Text: A simple line and a piece of text.

  • Text Position: Set the position for the text.
  • Divider Text: Click on the Text, and you can change the content of the text you want to display on the divider.
Set the text position:

divider

Change the content of the divider text:

divider

3.4. SymbolClick to copy

Symbol: A simple line and a symbol.

  • Symbol position: Set the position for the symbol.
  • Divider Symbol: Click on the Symbol to select from the 6 pre-designed symbols.
  • Size: Set the size for the symbol by adjusting the pixel parameter as you want. (The maximum value is 1000px, and minimum is 0px)
Set the symbol position:

divider

Change the symbol design:

divider

Edit the size of the symbol:

divider

4. Key TakeawaysClick to copy

PageFly Divider Element is the way to break down your contents, sections and other components, so that it would be easier for visitors to read, as you can still style it with different height and spacing options.

5. Frequently Asked QuestionsClick to copy

5.1. OverviewClick to copy

How many variations of Divider types are there?4
What’s another word for ‘Line Weight’?Light Thickness

5.2. What is PageFly Divider Element?Click to copy

Divider Element is the easy way to break down contents, sections and other components, so that it would be easier for visitors to read.

5.3. Can I add an icon into the ‘Divide’ line?Click to copy

Yes, you can. There’s an Icon available, you can select it, then choose the icon you want to display on the divider. There’s a Search Function, so you could find the icon needed

Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us