Add a Template Section to your Flow page

Flow pages have no fixed height. You can add as much content as you need or want.

This means you can use scrolling as a design experience.

You see this in many modern websites, or even in social media apps where scrolling is the basic way of navigating content.

This lesson shows how to add a Blank section template to a Page.

Steps to change the Responsive behavior of a Section on a Flow Page.

In this example, we have a section that has a Header element and two body Elements.

We can set the body elements to switch to vertical orientation the Extra Small breakpoint range or at the Small breakpoint range.

Steps to add a blank Header and Content section to a Flow Page.

The Header and Content layout has a Header field and single, full-page width body content field.

You can create your own custom Section layouts using the Add a Blank Row option available under the blue + sign at the bottom of a Flow page.

You start by adding the first Row you want to start with, then continue adding more Rows.

This lesson outlines how to do this.

You can create a custom Section by starting with the Add a Blank Row option under the blue + sign at the bottom of your Flow Page then adding more Rows to that Section.

This lesson outlines how to add more Rows to the intial Section.

Steps to add a Paragraph Element to a Page.

The name of this feature can be confusing, as it suggests a Body Type element. Although it is added as a Body Type, you can change that to any other Type.

A Paragraph element is different from other text elements because Paragraph elements have a unique set of special effects that can be applied.

Because of those effects, the formatting options are more limited for a Paragraph element than a regular Text Element.

In a Flow page, the height of a Section is set by the height of the content it contains by default. You can override that default height, though, and tell the Section to behave as if its height is a ratio based on the height of the browser window it’s being viewed within. Along with that height setting, you can set the content within the Section to align within the Section’s new height. It’s a great design idea for creating a dramatic full-height Section on your page.


In this lesson we’ll s...

Steps to add a Tab set component from the Engage tab to an empty Placeholder on a Flow Page.

Engage components have their own internal responive behavior when used in Flow pages. Tab sets, for example, can change from a horizontal tab set to a vertical accordion menu based on breakpoint. This provides a better user experience on a narrower screen such a smartphone held in portrait orientation.

Steps to add a Basic Text Input box to a Flow page.

A learner will be able to type text into the Basic Text Input box on the Page.

In this example, we add the Text Input box as a new element in an existing Group on the page.

Steps to add a Reveal component to a Page.

Reveal is one of many components available in the Engage tab.

The learning can interact with the Reveal component by clicking each tab to change the content shown.