Divider

About Divider ElementClick to copy

Summary: The Divider Element is the designed line break to separate two elements or sections on your page. This feature helps increase the conversation rates by improving the readability and scannability for visitors, especially on pages with multiple sections.

This article introduces you to the Divider Element and provides guidance on customizing it to suit your needs.

How To Access Divider ElementClick to copy

There are some steps required to access Divider element from page editor:

  • Step 1: Click on Element icon
  • Step 2: In PageFly tab, click on the Divider element in the list
  • Step 3: Drag and drop the chosen element onto the layout for editing

drag and drop devider

Currently, PageFly offers four options of dividers tailored to your preference. Additional options will soon be added to save your time.

divider variants

Please watch the video below to learn how to access and customize the Divider Element in PageFly:

How To Configure For Divider ElementClick to copy

General ConfigurationClick to copy

PageFly enables you to refine the appearance of the line for conversion rate optimal. Select the line to access its parameters.

Follow these steps to begin customizing your line:

  • Step 1: Click on your divider to open a modal as shown below.

divider settings

  • Step 2: Select the Divider Type. You can choose and customize one of the available options:
  • Plain: a simple straight line with no additional content.
  • Icon: a simple line with an icon.
  • Text: a simple line with a text.
  • Symbol: a simple line with a symbol.

You can refer to the table below for more details on customizing Icon, Text, and Symbol types.

Icon: Choose Icon from the Divider Type and select the position of the icon. choose icon

Choose the icon you wish to display by one of two methods:

  • Click on the icon and select from available options.
  • Type the icon name into the search bar.

resize the icon

Then, resize the icon by sliding the Size bar.

Note: The maximum value is 1000px, and minimum is 0px.

maximum value

Text: Choose Text from the Divider Type and select the position of the text. Click on the Text and edit the content.

Text edit

Symbol: Choose Symbol from the Divider Type and select the position of the symbol. Click on the Symbol and select the available symbols.

Symbol edit

Resize the symbol by sliding the Size bar.

Resize the symbol

Note: The maximum value is 1000px, and minimum is 0px.

Styling ConfigurationClick to copy

Check here to explore the Styling Configuration guide.

Common IssuesClick to copy

  • Theme Compatibility: Some themes such as Minimal, Debut, Boundless,… may not support custom divider elements, leading to layout issues or incorrect rendering.

Frequently Asked QuestionsClick to copy

1. What is a PageFly Divider element?

Divider Element is used to segment your content, sections and other components, thereby enhancing the readability and scannability for page visitors.

2. Can I add an icon to the line?

Yes. Among four given Divider Types, there is an Icon option. Select the desired type and style it as you wish to display.

3. How many Divider types that PageFly supports?

There are four options for Divider Types.

4. What’s another term for “Line Weight”?

Line Thickness.

Thank you for your feedback!

Navigate this category

PreviousPrevious article

Could not find the answer
to your question?

Chat with us
Great news! PageFly Help Center is now available in Japanese 🇯🇵. Explore now by switching the language in the Header section ☝️