Adding and Configuring Divider on a Web Page

Overview

Dividers help organizers visually separate content sections on a web page, improving readability and layout structure. Using the Web Builder, you can add, configure, reposition, or remove dividers, as well as control their behaviour using dependencies and section version types. This article explains how to configure and manage a Divider on a web page.

Step-by-Step Approach

1. Access the Web Builder

On the Event Dashboard, go to the Content module.
Select the Pages submenu.
Open the required page in edit mode.

2. Add a Divider

From the Components panel, drag and drop the Divider onto the desired section on the Web Builder.
The Divider is added to the page and is visible in the layout.

3. Enter or Edit Height

Click on the Divider to open its Settings panel.
Locate the Height field.
Enter a value or edit the existing height to adjust spacing between sections.
Changes are applied instantly to the page preview.

4. Select Dependency from the Dependency Select Field

In the Divider Settings panel, locate the Dependency select field.
Choose an existing dependency from the list.
The Divider will display or hide based on the configured dependency conditions.

5. Select Section Version Type from the Section Version Type Select Field

In the Divider Settings, locate the Section Version Type select field.
Select the appropriate section version type.
The Divider follows the visibility rules defined for the selected version type.

6. Manage Dividers

Reposition Dividers using drag-and-drop within the page layout.
Remove a Divider if it is no longer required.

7. Save and Apply Changes

Publish the page to apply the configured Divider settings.
Preview the page to validate Divider placement and behaviour.

Related to