{"id":5030,"date":"2023-06-08T11:43:43","date_gmt":"2023-06-08T11:43:43","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=5030"},"modified":"2025-12-11T15:13:38","modified_gmt":"2025-12-11T15:13:38","slug":"how-to-use-the-plan-finder-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-plan-finder-template\/","title":{"rendered":"How to use the Plan Finder Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/6583dc94c3f54edcae388e9816ed4f65?sid=436b9d24-bc8e-4349-abb2-4fd9a5a3d4ea\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\"><\/iframe><\/div>\n\n\n\n<p class=\"\">Powered with a modern and sleek design, the <a href=\"https:\/\/iontemplates.rockconthttps:\/\/ioninteractive.com\/gallery\/plan-finder\/\">Plan Finder<\/a> quickstart\u00a0 is built to help you find the best fitness plan that fits your needs. Minimalism and bold colors are the biggest players, featuring an animated hero background, stunning images and a unique checklist accordion to accommodate all your information.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Type: Solution Finder<\/li>\n\n\n\n<li class=\"\">Complexity: Medium<\/li>\n\n\n\n<li class=\"\">Use case: Sales Enablement<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Features available<\/h2>\n\n\n\n<p class=\"\">Here are the major features, abilities, and interactive elements used in this template.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Accordion Checklist<\/li>\n\n\n\n<li class=\"\">Anchor<\/li>\n\n\n\n<li class=\"\">Flow<\/li>\n\n\n\n<li class=\"\">Full Page Content<\/li>\n\n\n\n<li class=\"\">Hero Content<\/li>\n\n\n\n<li class=\"\">Hero Video Background<\/li>\n\n\n\n<li class=\"\">Quiz Questions<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How-to use<\/h2>\n\n\n\n<p class=\"\">Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Accordion Checklist<\/strong><\/h3>\n\n\n\n<p class=\"\">Step 1: Place an Accordion element into Column 1 Step 3 container. Add accordion headline titles for each section under the Variables panel and add a tag.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-1-1024x523.png\" alt=\"\" class=\"wp-image-8388\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-1-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-1-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-1-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-1-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-1.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 2: Select Section 1 of the accordion. Place a container into Section 1, and add bottom margin 1em in the Layout panel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-2-1024x523.png\" alt=\"\" class=\"wp-image-8390\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-2-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-2-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-2-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-2-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-2.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 3: Place text element into Step 2 container. In the text editor, display the copy in bullet format. This will ensure that bullet styling can be edited using the Micro-Themes. Add 1em bottom margin in the Layout panel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-3-1024x523.png\" alt=\"\" class=\"wp-image-8393\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-3-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-3-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-3-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-3-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-3.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 4: Add another container into Step 2 container. Under Animations set to Immediate \u201cPull Left\u201d, set a background color using the Micro-Themes, and 1px height under Layout panel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-4-1024x523.png\" alt=\"\" class=\"wp-image-8395\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-4-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-4-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-4-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-4-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-4.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 5: Duplicate Step 2 container into the accordion section, and change copy based on the amount of bullet points to be included.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-5-1024x523.png\" alt=\"\" class=\"wp-image-8397\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-5-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-5-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-5-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-5-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Accordion-Checklist-step-5.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Anchor<\/strong><\/h3>\n\n\n\n<p class=\"\">Step 1: Decide where users should be sent upon clicking on a specific element. With the element selected, navigate to the top right hand side of the Edit panel and select the anchor. Give the anchor a unique name.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-1-1024x523.png\" alt=\"\" class=\"wp-image-8399\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-1-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-1-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-1-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-1-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-1.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 2: Select the trigger element that will send the user to destination in Step 1. Navigate to Behaviors, select Scroll to \u201cAnchor Name\u201d and assign a tag.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-2-1024x523.png\" alt=\"\" class=\"wp-image-8401\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-2-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-2-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-2-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-2-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Anchor-step-2.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Flow<\/strong><\/h3>\n\n\n\n<p class=\"\">Step 1: Place Flow element on the canvas. In the Micro-Themes under Flow, set \u201cAll steps: Slide Vertically\u201d and a background color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-1-1024x522.png\" alt=\"\" class=\"wp-image-8403\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-1-1024x522.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-1-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-1-768x392.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-1-1536x784.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-1.png 1809w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 2: Navigate to the flow step level within the flow. In the Micro-Themes under Regions select \u201cContent\u201d. Scroll down to the Layout panel and set top padding 6em. *Don\u2019t forget to also assign a tag to collect behavioral data from users.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-2-1024x522.png\" alt=\"\" class=\"wp-image-8405\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-2-1024x522.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-2-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-2-768x392.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-2-1536x784.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-2.png 1809w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 3: By default Flows appear with 3 Flow steps. To add more drag in an Interactive Flow Step element placing it inside the Flow.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-3-1024x522.png\" alt=\"\" class=\"wp-image-8407\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-3-1024x522.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-3-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-3-768x392.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-3-1536x784.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Flow-step-3.png 1809w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Full Page Content<\/strong><\/h3>\n\n\n\n<p class=\"\">Step 1: Place a container on the canvas. Give it a background color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-1-1024x523.png\" alt=\"\" class=\"wp-image-8408\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-1-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-1-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-1-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-1-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-1.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 2: Place a Responsive Grid within Step 1 container. In the Micro-Themes set the Grid Layout to \u201cNested Responsive Grid\u201d. Remove the third column and adjust Column 1 to be six columns wide, and Column 2 to be six column wide.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-2-1024x523.png\" alt=\"\" class=\"wp-image-8410\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-2-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-2-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-2-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-2-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-2.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 3: Place a container in Column 1. In the Micro-Themes set the alignment to \u201cLeft Align\u201d, Pod to \u201cTransparent\u201d, and Responsive Setting (XS) to \u201cXS Padding 1em\u201d. In the Layout panel, set the left, top, and right padding to 6em.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-3-1024x523.png\" alt=\"\" class=\"wp-image-8412\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-3-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-3-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-3-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-3-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-3.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 4: Place all necessary copy text in Step 3 container. Make font-size and color adjustments using the dropdowns in the Micro-Themes. Use the Layout panel to add margin and padding.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-4-1024x523.png\" alt=\"\" class=\"wp-image-8413\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-4-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-4-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-4-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-4-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-4.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 5: With Column 2 selected, add a background image, and check \u201cResponsive Background Image\u201d. Use the Show &amp; Hide panel to hide in the SM and XS viewport.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-5-1024x523.png\" alt=\"\" class=\"wp-image-8415\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-5-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-5-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-5-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-5-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-5.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 6: With Column 2 selected, adjust the height to 50em, less or more depending on the amount of copy in Column 1.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-6-1024x523.png\" alt=\"\" class=\"wp-image-8417\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-6-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-6-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-6-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-6-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Full-Page-Content-Image-Split-step-6.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Hero Content<\/strong><\/h3>\n\n\n\n<p class=\"\">Step 1: Place a Responsive Grid inside the container of Hero Video Background Step 2. Adjust the row to have two columns. Column 1 is seven columns wide, and column 2 is 5 column wide.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-1-1024x522.png\" alt=\"\" class=\"wp-image-8419\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-1-1024x522.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-1-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-1-768x392.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-1-1536x784.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-1.png 1809w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 2: Place a container Column 1. In the Micro-Themes set Pod to \u201cTransparent\u201d and Responsive Setting (XS) to \u201cXS Padding 1em\u201d. In The Borders &amp; Corners panel select a color, set the thickness to 1px and in the dropdown select \u201cSolid\u201d. Scroll down to the Layout panel, set the bottom padding to 4em.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-2-1024x522.png\" alt=\"\" class=\"wp-image-8421\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-2-1024x522.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-2-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-2-768x392.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-2-1536x784.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-2.png 1809w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 3: Place text element into Step 2 container. Add copy, and use the Micro-Themes panel to increase the font-size and change text color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-3-1024x522.png\" alt=\"\" class=\"wp-image-8423\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-3-1024x522.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-3-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-3-768x392.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-3-1536x784.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-3.png 1809w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 4: Add an additional Grid Row to the Responsive Grid in Step 1. This row should be below content in Step 2 and 3. Column 1 is three columns wide, column 2 is seven columns wide, and column 3 is two columns wide.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-4-1024x522.png\" alt=\"\" class=\"wp-image-8425\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-4-1024x522.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-4-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-4-768x392.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-4-1536x784.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-4.png 1809w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 5: Place container into Column 1. Set Animation to Immediate \u201cFade In Down\u201d and Looping Infinite. In The Micro-Themes, set alignment to \u201c Center Align\u201d and styling to \u201cCircle\/Oval\u201d. In the Show &amp; Hide, check off \u201cHide in XS\u201d. Add color and 0.5px solid border in the Borders &amp; Corners. In the Layout section, set top margin to 2em, and width and height to 40px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-5-1024x522.png\" alt=\"\" class=\"wp-image-8427\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-5-1024x522.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-5-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-5-768x392.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-5-1536x784.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-5.png 1809w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 6: with Column 2 selected, in the Micro-Themes set Responsive Settings (XS) to \u201cXS No Margins\u201d and \u201cXS Padding 1em\u201d. In the Layout panel set the top margin to -3em.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-6-1024x523.png\" alt=\"\" class=\"wp-image-8429\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-6-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-6-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-6-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-6-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-6.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 7: Place a container in Column 2. In the Micro-Themes select a pod, ideally one with a colored background. In the Layout panel, set the bottom margin to 4px, and padding 1em all around.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-7-1024x523.png\" alt=\"\" class=\"wp-image-8431\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-7-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-7-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-7-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-7-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Headline-Brief-Description-step-7.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Hero Video Background<\/strong><\/h3>\n\n\n\n<p class=\"\">Step 1: Place a container on the canvas. Navigate to the Background panel. Upload the video as a background image. *The video file should be formatted as a gif.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-1-1024x522.png\" alt=\"\" class=\"wp-image-8433\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-1-1024x522.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-1-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-1-768x392.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-1-1536x784.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-1.png 1809w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 2: Place a container inside the step 1 container. In the Micro-Themes, set the Background to \u201cBlack Transparent Background\u201d and Regions to \u201cContent\u201d. In the Layout panel, set the top and bottom padding to 8em. *Padding can be adjusted if content copy exceeds word limit in the Content Structure document.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-2-1024x522.png\" alt=\"\" class=\"wp-image-8435\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-2-1024x522.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-2-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-2-768x392.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-2-1536x784.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Hero-Video-Background-step-2.png 1809w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Quiz Questions<\/strong><\/h3>\n\n\n\n<p class=\"\">Step 1: Place a Responsive Grid within the Flow Step. Remove the default two columns, and change the row settings so that the single column now spans the entire row.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-1-1024x523.png\" alt=\"\" class=\"wp-image-8437\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-1-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-1-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-1-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-1-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-1.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 2: Place container into column. In the Micro-Themes select pod \u201cTransparent\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-2-1024x523.png\" alt=\"\" class=\"wp-image-8439\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-2-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-2-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-2-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-2-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-2.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 3: Place Form element in Step 2 container. Remove the submit container including the button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-3-1024x523.png\" alt=\"\" class=\"wp-image-8442\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-3-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-3-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-3-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-3-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-3.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 4: Place a Choice Group element into the form. Adjust the Variables and select the desired data field for this specific question. In the Micro-Themes under Choice Group select \u201cStyle: None\u201d.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-4-1024x523.png\" alt=\"\" class=\"wp-image-8443\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-4-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-4-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-4-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-4-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-4.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 5: Place a Responsive Grid within the Choice Group element. In the Micro-Themes under Grid Layout select \u201cNested Responsive Grid\u201d. Remove the third column and adjust the row setting to that Column 1 and 2 are six column wide. Add an additional row into the responsive grid.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-5-1024x523.png\" alt=\"\" class=\"wp-image-8445\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-5-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-5-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-5-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-5-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-5.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 6: Place a Choice element in the column. Adjust the Variables and change the Mode to \u201cExpanded\u201d. In the Behaviors panel, set Behavior In Flow to \u201cMove to step Next\u201d And Behaviors in Form \u201cValidate and Submit\u201d. In The Layout panel set the bottom margin to 1em.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-6-1024x523.png\" alt=\"\" class=\"wp-image-8448\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-6-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-6-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-6-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-6-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-6.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 7: For the last question choices in the Solution Finder, don\u2019t set the Behavior In Flow to \u201cMove to step Next\u201d. Instead, in the Variables panel, under Form Submit Action set the action to go to the page that users should see after the assessment is complete.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"523\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-7-1024x523.png\" alt=\"\" class=\"wp-image-8449\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-7-1024x523.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-7-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-7-768x393.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-7-1536x785.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/Quiz-Questions-step-7.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Content Writing Template<\/h2>\n\n\n\n<p class=\"\"><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1tHehGCkRN0A_v1hbRXD0hW0A4ePaigQE\/edit?gid=734907881#gid=734907881\">Here is the content structure\u2019s template<\/a> to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related templates<\/h2>\n\n\n\n<p class=\"\">If you like this template, you might want to check out these other similar models.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><a href=\"https:\/\/ioninteractive.com\/gallery\/3-quizzes-with-grades\/\">3 Quizzes with Grades<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/ioninteractive.com\/gallery\/survey\/\">Interactive Survey<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/ioninteractive.com\/gallery\/visual-quiz\/\">Visual Quiz<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Have a question?<\/h2>\n\n\n\n<p class=\"\">Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions to <a href=\"mailto:help@ioninteractive.com\">help@ioninteractive.com<\/a>, so we can make sure to have this article constantly up to date.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Powered with a modern and sleek design, the Plan Finder quickstart\u00a0 is built to help you find the best fitness plan that fits your needs. Minimalism and bold colors are the biggest players, featuring [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":5241,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-5030","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-templates-gallery"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5030","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\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=5030"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5030\/revisions"}],"predecessor-version":[{"id":8451,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5030\/revisions\/8451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5241"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=5030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=5030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=5030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}