The Flow component can be used to move content across a targeted area of your page without changing pages. The Flow component allows you to publish any type of content you would like and gives you the option to add as many steps as you would like and also more styling options for the progress indicator and transition effects.
Let’s Get Started
To start using the Flow component, simply drag the Flow icon into any container on your page. Once in place, you will see three steps available for the Flow component by default with a progress indicator to show visitors what step they are on within the Flow. You can use the Flow variables to enable or disable these navigation steps, set up auto-play for your Flow steps to rotate, looping to allow the Flow to rotate from the last step to the first step (and vice versa), fix the height and also if you would want the page to scroll to the top after each step change.
To add more steps to the Flow component, simply drag the Flow Step icon into your Flow component.
Each flow step will include a container that you can publish any type of content from your Palette tab into (i.e. grids, containers, images, other ready-made components, etc.). You can also use the flow step variable available to apply a tag to that step.
Behaviors
When editing any clickable element within the Flow, you will see the option to define a “behavior.” Behaviors allow you to define an action for a given element within your Flow. For example, if you want a link or an image to take respondents to the next step when clicked, you would define this as a behavior for that element. To set a behavior, simply click the “Behaviors” button when editing your content.
Micro-Theme Styling
The styling of your Flow component can be adjusted by applying micro-themes. Flow micro-themes can be used to adjust the position of your progress indicator, transition effects as well as the style of the progress indicator. The transition effects can be set to the entire Flow component at once or you may set a different transition for each step.
Micro-themes can also be used to control whether content goes left to right, up and down or if you would simply want content to fade in and out.
Comments
2 comments
Is a flow step a special kind of container and is it responsive? Or should you put a responsive grid in it first?
Hi Al,
A flow step is basically a container that is meant to be used specifically within the Flow component to add more steps/slides. By default, the Flow component includes 3 steps. Should you want to add more steps to the Flow component, you would drag the Flow step icon into your Flow component on the page. You would then be able to publish any kind of content you want into the Flow step.
For more context around how this would work, you may want to check out the below support video on the Flow component.
http://support.liveball.com/hc/en-us/articles/206331595-Flow-Component-Support-Video-Expert-
Please sign in to leave a comment.