{"id":4030,"date":"2021-07-08T19:41:24","date_gmt":"2021-07-08T19:41:24","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=4030"},"modified":"2023-12-10T19:11:43","modified_gmt":"2023-12-10T19:11:43","slug":"how-to-use-the-crawl-walk-run-fly-assessment-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-crawl-walk-run-fly-assessment-template\/","title":{"rendered":"How to use the Crawl-Walk-Run-Fly Assessment Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/91d2d91692bc42018235714fe04268d9?sid=ac26a770-9395-4edb-9625-21f0f1aa2ec8\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\"><\/iframe><\/div>\n\n\n\n<p>The <a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/standard\/assessment\/crawl-walk-run-fly\">Crawl-Walk-Run-Fly Assessment<\/a>&nbsp; is an 8-question assessment with 4 choices for each question. This experience is gated, requiring users to fill out a form before accessing their results. Logic is simple: mostly \u201cA\u201d choices go to \u201c1st \u2014 Crawl\u201d result, mostly \u201cB\u201d choices go to \u201c2nd \u2014 Walk\u201d result, and so on. A custom mini-resource library section based on the user&#8217;s inputs is included in the results page.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Experience type: Assessment<\/li>\n\n\n\n<li>Complexity: Medium<\/li>\n\n\n\n<li>Use case: Lead Generation<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Features available<\/h2>\n\n\n\n<p>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>Anchor<\/li>\n\n\n\n<li>Flow<\/li>\n\n\n\n<li>Form<\/li>\n\n\n\n<li>Quiz Question<\/li>\n\n\n\n<li>Resources<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How-to use<\/h2>\n\n\n\n<p>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<p><a href=\"https:\/\/drive.google.com\/drive\/folders\/1egrrU0gvHdi3kJZNo7PYAq-6HCxhZtw1\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Anchor<\/strong><\/h3>\n\n\n\n<p>Step 1: Select the element on the page you would like the user to be scrolled too. Navigate to the top right of the elements 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=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-40-1024x529.png\" alt=\"\" class=\"wp-image-4031\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-40-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-40-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-40-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-40-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-40-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-40-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Navigate to the element that will take users to the anchored element. In the \u201cBehaviors\u201d panel select the anchor name.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-41-1024x529.png\" alt=\"\" class=\"wp-image-4032\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-41-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-41-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-41-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-41-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-41-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-41-585x302.png 585w\" 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>Step 1: Place a \u201cContainer\u201d element on your canvas as an entire section. Within this container place a \u201cResponsive Grid\u201d element and remove the two additional default columns. Make the column span the entire width of the row. After, place a \u201cFlow\u201d element within the column with five additional flow steps.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-42-1024x529.png\" alt=\"\" class=\"wp-image-4033\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-42-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-42-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-42-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-42-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-42-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-42-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: On the flow level check mark the Variables to \u201cFixed Height\u201d and \u201cScroll to Top on Step Change\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-43-1024x529.png\" alt=\"\" class=\"wp-image-4034\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-43-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-43-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-43-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-43-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-43-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-43-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Form<\/strong><\/h3>\n\n\n\n<p>Step 1: Place a container section on the canvas. Place a responsive grid within the container. Set the first and last column to be one column wide, and the middle column ten column wide.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-44-1024x529.png\" alt=\"\" class=\"wp-image-4035\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-44-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-44-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-44-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-44-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-44-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-44-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Place a \u201cForm\u201d element in the middle column. Then place a Responsive Grid within the form element. In the Micro-Themes set the responsive grid to \u201cNested Responsive Grid\u201d in the Grid Layout category. Add an additional row to the responsive grid and remove the third column. Make both columns the same width.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-45-1024x529.png\" alt=\"\" class=\"wp-image-4036\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-45-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-45-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-45-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-45-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-45-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-45-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Place a \u201cTextbox\u201d element into each of the columns. Remove the default label text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-46-1024x529.png\" alt=\"\" class=\"wp-image-4037\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-46-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-46-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-46-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-46-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-46-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-46-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: With the textbox element selected, navigate to the Variables panel. Set the input type to reflect the type of information the field will be collecting from the user, ex. Phone number. Set a data field name, and placeholder text.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-47-1024x529.png\" alt=\"\" class=\"wp-image-4038\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-47-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-47-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-47-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-47-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-47-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-47-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 5: With the submit button selected, set the \u201cBehaviors in form\u201d to validate and submit, and set the action to the next page the user is supposed to see after completing the form. *You can also set the submit button to be \u201cmarked as converted\u201d. Many people will use a form for the purpose of gathering information and tracking.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-48-1024x529.png\" alt=\"\" class=\"wp-image-4039\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-48-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-48-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-48-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-48-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-48-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-48-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Quiz Question<\/strong><\/h3>\n\n\n\n<p>Step 1: Place a \u201cForm\u201d element within the flow step. On the form level, in the \u201cLayout\u201d panel add bottom margin 1em.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-49-1024x529.png\" alt=\"\" class=\"wp-image-4040\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-49-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-49-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-49-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-49-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-49-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-49-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Place a \u201cChoice Group\u201d element within the form. On the label container set the bottom margin to 2em.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-50-1024x529.png\" alt=\"\" class=\"wp-image-4041\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-50-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-50-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-50-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-50-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-50-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-50-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: On the choice group level navigate to the Variables panel and check mark \u201cRequired\u201d. Don\u2019t forget to set the data field here. In the \u201cMicro-Themes\u201d, set the alignment to \u201cCenter Align\u201d and in the choice group category, set the style to \u201cStyle: Selected Box Border\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-51-1024x529.png\" alt=\"\" class=\"wp-image-4042\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-51-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-51-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-51-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-51-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-51-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-51-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: Place a \u201cResponsive Grid\u201d element within the choice group. In the \u201cMicro-Themes\u201d within the \u201cGrid Layout\u201d category, select \u201cNested Responsive Grid\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-52-1024x529.png\" alt=\"\" class=\"wp-image-4043\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-52-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-52-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-52-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-52-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-52-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-52-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 5: Add an additional column to the responsive grid within the choice group. Change the row settings so that all columns have the same width. Here you can also change the row setting for different viewports, to make the assessment responsive in multiple screen sizes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-53-1024x529.png\" alt=\"\" class=\"wp-image-4044\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-53-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-53-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-53-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-53-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-53-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-53-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 6: Place a \u201cChoice\u201d element within each column. In the Variables panel give the choice a \u201cData Value\u201d,&nbsp; and set the Default Selection to \u201cUnselected\u201d. In the Behaviors panel, set the \u201cBehaviors in Flow\u201d to move to next, and the \u201cBehaviors in Form\u201d to validate and submit. In the Layout panel add 15px bottom margin, and 25px left and right padding.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-54-1024x529.png\" alt=\"\" class=\"wp-image-4045\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-54-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-54-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-54-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-54-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-54-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-54-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 7: Place a container within the choice. In the \u201cMicro-Themes\u201d, select the category \u201cPods\u201d and set it to transparent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-55-1024x529.png\" alt=\"\" class=\"wp-image-4046\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-55-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-55-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-55-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-55-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-55-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-55-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 8: Place two text elements within the container inside the choice.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-56-1024x529.png\" alt=\"\" class=\"wp-image-4047\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-56-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-56-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-56-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-56-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-56-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-56-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Resource<\/strong><\/h3>\n\n\n\n<p>Step 1: Place a container section on the canvas. Place a responsive grid within the container. On the column, add 1em bottom margin in the \u201cLayout\u201d panel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-57-1024x529.png\" alt=\"\" class=\"wp-image-4048\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-57-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-57-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-57-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-57-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-57-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-57-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Add a \u201cContainer\u201d element within the column. In the \u201cMicro-Themes\u201d add a transparent pod, and in XS viewport remove the fixed height. Add a background image in the background panel and check mark \u201cResponsive Background Image\u201d. Give the container 2em padding and a height of 18em.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-58-1024x529.png\" alt=\"\" class=\"wp-image-4049\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-58-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-58-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-58-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-58-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-58-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-58-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Place another \u201cContainer\u201d element within the container. Give this container a height of 10em in the \u201cLayout\u201d panel. This is for the XS viewport.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-59-1024x529.png\" alt=\"\" class=\"wp-image-4050\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-59-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-59-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-59-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-59-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-59-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-59-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: Place another \u201cContainer\u201d element within the first container in the column. *It will look like two containers stacked and wrapped within a larger container.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-60-1024x529.png\" alt=\"\" class=\"wp-image-4051\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-60-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-60-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-60-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-60-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-60-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-60-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 5: To the container in step 4, apply a pod micro-theme to it. Give this container 3px padding in the \u201cLayout\u201d panel, set the Display to \u201cInline-Block\u201d, and set the Position to \u201cLayered\u201d top= 1em and left =1em.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-61-1024x529.png\" alt=\"\" class=\"wp-image-4052\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-61-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-61-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-61-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-61-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-61-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-61-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 6: Place a \u201cText\u201d element within the step 4 container. In the \u201cMicro-Themes\u201d add text styling \u201cFine Print\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-62-1024x529.png\" alt=\"\" class=\"wp-image-4053\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-62-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-62-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-62-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-62-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-62-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-62-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 7: Place a \u201cContainer\u201d element below the container in the column. Add a pod Micro-Theme and set the top margin to -8em. *The structure should be: column with two containers. First container has two containers within it.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-63-1024x529.png\" alt=\"\" class=\"wp-image-4054\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-63-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-63-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-63-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-63-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-63-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-63-585x302.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 8: Place \u201cText\u201d and \u201cLink\u201d elements within step 7 container. You can style the text and links using the Micro-Themes colors, buttons, links, and etc.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-65-1024x529.png\" alt=\"\" class=\"wp-image-4056\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-65-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-65-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-65-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-65-1536x794.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-65-2048x1059.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-65-585x302.png 585w\" 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><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1FcjY0ZFzNpQKi7cUXBQeXaDQ5450B8aIgV81UeT69HY\/edit?usp=sharing\">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>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><a href=\"https:\/\/rockcontent.com\/gallery\/3-quizzes-with-grades\/\">3 Quizzes with Grades<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/maturity-assessment\/\">Maturity Assessment<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/assessment-with-benchmark-results\/\">Assessment with Benchmark Results<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/report-card-assessment\/\">Report Card Assessment<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Have a question?<\/h2>\n\n\n\n<p>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>The Crawl-Walk-Run-Fly Assessment&nbsp; is an 8-question assessment with 4 choices for each question. This experience is gated, requiring users to fill out a form before accessing their results. Logic is simple: mostly \u201cA\u201d choices [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5813,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-4030","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\/4030","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=4030"}],"version-history":[{"count":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4030\/revisions"}],"predecessor-version":[{"id":5815,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4030\/revisions\/5815"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5813"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=4030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=4030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=4030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}