* Line, Numbered and Completion Divider Elements were introduced in the Winter 2025 (7.4.5) release.
Add visual design as well as completion control to Flow pages using Spacers, Line, Numbered and Completion Dividers
In Flow’s longer page experiences it can be helpful to have visual cues between content topics as well as be able to easily gate content for completion before allowing the learner to access more content on the same page.
In Flow, you can do this using Divider elements.
Add a Divider Element to Your Flow Page
You can add Divider elements several ways.
Add a Divider Element to any available location on your Flow page
To add a Divider Element to any available location on your Flow page:
- Select the Insert tab (1)
- Select the Dividers menu (2)
- Select the type of Divider you want to add
Since these are elements, you can use this method to add a Divider to any empty Placeholder on the page.
In most design uses you’ll add them as a new Section of their own in between other content.
Add a Divider in a new Section of its own at the bottom of your Page
To add a Divider in a new section of its own at the bottom of your Page:
- Select the + Add a Section button (1)
- On the Add to your Page panel select the All Sections tab (2)
- Scroll down to the Dividers options (3) and make a selection
Add a Divider as a new section of its own between existing Sections on your page
To add a Divider as a new section of its own between existing Sections on your page, select the Section above where you want to add the Divider then:
- Select the + Add button (1) that appears below the selected Section
- On the Add to your Page panel select the All Sections tab (2)
- Scroll down to the Dividers options (3) and make a selection

Types of Dividers
There are four types of Dividers that can be added:
- Spacers – These are empty elements that you can use to add or control the space between other content elements.
- Line Dividers – These are simple decorative lines.
- Numbered Dividers – These are line dividers with numbers, helpful for having numbered sections on your page
- Continue Dividers – These can be used to require the learner to complete content before moving on to further content on the page. Continue Dividers show more options on the menu on the Insert tab because they can be set to show learner progress. So on the menu the first three options don't have this setting turned on, the second three options do have this progress setting enabled.

Using Spacer Divider Elements
A Spacer Divider is essentially an empty element you can use on a page to add and control vertical spacing between content.
To set the height of a Spacer, drag the handle up or down.
Generally speaking the role of the Spacer means you'll probably want it invisible on the page.
Like any element, though, you can add a background fill color to it or set a border, for example, and these could offer some additional design options for your page.

Using Line, Numbered and Continue Divider Elements
Line, Numbered and Continue Divider Elements are all set up on their respective Configure Panels.
When the element is selected, select the Edit option (pencil icon) to open the Configure Your Divider panel.
The panel has different options depending on the Divider Type.

Line and Numbered Dividers
For Line and Numbered dividers, the Options tab shows the current Type setting for the Divider and allows you to switch the divider to one of the other Types.

On the Style tab you can set the display Style for the divider.
You can set the line Color based on the Theme colors. By default, the divider is set to the first Branding color in the Theme.
You can set the Divider’s spacing. This is the padding added above and below the divider within its element. There are four preset options plus Custom which lets you set separate values for padding above and below.

Completion Dividers
For Completion Dividers, the Style tab offers more controls.
This is because Completion Dividers can be used to require the learner to complete content before accessing more content on the page or go to the next page.
You can switch the divider to one of the other available Types.
You can set the Completion Type behavior:
- None (Always Show Button)
- Complete Interactions above (this is the default setting)
- Complete Entire Page
The Label field sets the text shown to the learner upon content completion. By default the label is set to a system variable that shows the word “Continue” in English but you can alter this for your own use case or context.
The Instruction Text field allows you to set the text the learner sees before the content completion requirements are met.
The Behavior options set how the divider will behave after content completion requirements are met:
- Convert to a line when clicked
- Hide divider when clicked

On the Style tab you can set the display Style for the divider.
You can set the line Color based on the Theme colors. By default, the divider is set to the first Branding color in the Theme.
You can also set the divider to show a Progress indicator to the learner. If this setting is checked there are three Style options.
On the Insert tab >> Dividers menu the first three options don't have this setting turned on, the second three options do have this Progress setting enabled.
You can set the Divider’s spacing. This is the padding added above and below the divider within its element. There are four preset options plus Custom which lets you set separate values for padding above and below.

When a Completion divider is at the bottom of a Page, it will automatically behave as a Next button to take the learner to the next page.
Comments ( 0 )
Sign in to join the discussion.