{"id":2701,"date":"2023-06-02T18:54:30","date_gmt":"2023-06-02T18:54:30","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/interactive-components-flow\/"},"modified":"2026-07-17T22:46:11","modified_gmt":"2026-07-17T22:46:11","slug":"interactive-components-flow","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/interactive-components-flow\/","title":{"rendered":"Interactive Components: Flow"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Current interface<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3471-current-flow-tool.png\" alt=\"Current Creative Studio Flow interactive tool\"\/><figcaption class=\"wp-element-caption\">Drag Flow from the Interactive elements palette.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3471-current-flow-step-tool.png\" alt=\"Current Creative Studio Flow Step interactive tool\"\/><figcaption class=\"wp-element-caption\">Add Flow Step elements inside the Flow when more steps are needed.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The Flow component can be used to move content across a targeted area of your page without changing pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Let\u2019s Get Started<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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\u00a0enable 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),\u00a0fix the height and also if you would want the page to scroll to the top after each step change.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To add more steps to the Flow component, simply drag the Flow Step icon into your Flow component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Variables<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Through variables you can define some rules for your Flow. With Flow selected in your creative, select the desired items:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><div data-liveball-view-region=\"pe_wb_i41Umz3ZBUKKiRy7LIxCQ_navigation_enabled\"><div><div data-liveball-view-action=\"edit\" data-liveball-view-region=\"editorAnchor\" aria-describedby=\"ui-tooltip-25\"><div data-liveball-view-region=\"inline-editor-choice\"><div data-liveball-view-region=\"pe_wb_i41Umz3ZBUKKiRy7LIxCQ_navigation_enabled\"><div><div data-liveball-view-action=\"edit\" data-liveball-view-region=\"editorAnchor\" aria-describedby=\"ui-tooltip-25\"><div data-liveball-view-region=\"inline-editor-choice\"><strong>Navigation Enabled:<\/strong> Clickable and\/or swipeable navigation<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><br><\/li>\n\n\n\n<li class=\"\"><strong>Auto-play:<\/strong> Automatically advances to the next Flow Step after a set delay. This Flow&#8217;s Auto-Play setting allows users to change the speed of the Flow Steps. After selecting this option, you can choose the transition time in seconds in the Auto-play Delay box.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">With Auto-Play selected, you can also check the &#8220;Stop Auto-Play on Navigation&#8221; option, so that stops Auto-Play after the user navigates by click or swipe.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>Looping:<\/strong> Allows Flow to cycle between first and last steps.<\/li>\n\n\n\n<li class=\"\"><strong>Fixed Height:<\/strong> Flow will match the height of the tallest Flow Step.<\/li>\n\n\n\n<li class=\"\"><strong>Scroll to Top on Step Change:<\/strong> Automatically scrolls to the top of Flow after a Step change.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Behaviors<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">When editing any clickable element within the Flow, you will see the option to define a \u201cbehavior.\u201d 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 \u201cBehaviors\u201d button when editing your content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For flows consisting of 3 or fewer steps, utilizing the &#8220;Move to Step&#8221; behaviors allows for easy alternation between the initial, middle, and final steps.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, for flows with more than 3 steps, especially those requiring navigation between non-consecutive steps, it&#8217;s necessary to <a href=\"https:\/\/ioninteractive.com\/ionacademy\/anchor-links\/\">anchor<\/a> each step and instead of using the Behaviors in Flow, you will need to use the Scroll To behavior and choose your anchor.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Micro-Theme Styling<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">If you have any questions, please contact us on <a href=\"mailto:help@ioninteractive.com\" rel=\"noopener noreferrer nofollow\">help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Current interface The Flow component can be used to move content across a targeted area of your page without changing pages. Let\u2019s Get Started To start using the Flow component, simply drag the Flow [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5622,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1052,9],"tags":[2264],"class_list":["post-2701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flow-component","category-the-interactive-components","tag-flow"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2701"}],"version-history":[{"count":6,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2701\/revisions"}],"predecessor-version":[{"id":7819,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2701\/revisions\/7819"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5622"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}