Set an Element to Hide At a Breakpoint in Flow

Flow allows you to control what content on your page gets shown at different breakpoints. It’s quick and easy to Hide content this way.

In this lesson we’ll set a graphic to be hidden when the page is viewed within the Extra Small breakpoint range.

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 Tab Set component from the Engage tab to an empty Placeholder on a Flow Page.

Engage components have their own internal responsive 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 Popup to an Element within a Video.

Steps to set a background (fill) color on an element.

Setting a background color can be used for many visual effects.

In this example, we have a text element over an image and it's difficult to read the text.

We can add a background or fill color to help the text stand out more.

Giving the background color a slight transparency allows the image to still be seen through the text element, which can be an interesting visual design effect.

I set some elements to change at a certain breakpoint using the Change At feature in the top right corner of the Flow screen.  How do I REMOVE them from the elements??  We're teaching a new set of Authors soon and I know this question will come up. I don't have an answer. Thanks!!
 

Steps to add a new element to an existing Group on a Flow Page.

How do I add Notes to a FLOW/Side Navigation Template? I want to mimic the feel of Instructor-Led Training lesson (the instructor notes being viewable to all) but using the FLOW responsiveness.
Thanks,
Ray

Steps to edit the content in a Tab Set component.

When editing the content in Engage Components you enter a special Edit mode on the Stage.

When you are finished with the content edits you use the Exit button in the breadcrumb to leave the Edit mode.

Steps to set a background (fill) color on an element.

Setting a background color can be used for many visual effects.

In this example, we have a text element over an image and it's difficult to read the text.

We can add a background or fill color to help the text stand out more.

Giving the background color a slight transparency allows the image to still be seen through the text element, which can be an interesting visual design effect.