{"id":4532,"date":"2022-06-23T08:22:38","date_gmt":"2022-06-23T08:22:38","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=4532"},"modified":"2023-12-10T19:46:48","modified_gmt":"2023-12-10T19:46:48","slug":"how-to-use-the-interactive-playbook-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-interactive-playbook-template\/","title":{"rendered":"How to use the Interactive Playbook Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/fbb3f2e8e97944a58763d1296ebcc98f?sid=b017cdb6-73c1-4ce7-b506-410b502eb8e4\" 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:\/\/iontemplates.rockcontent.com\/preview\/premium\/ebook\/interactive-playbook\">Interactive Playbook<\/a> is a gated interactive experience that displays extensive content using different Ion components making it visually appealing and digestible. This experience features, anchoring, tab displayed information, reveals when hovered over, odometer counter, flows, accordion, mini quizzes using the flow component, and vertically positioned social sharing. This is a great easy to read interactive experience that turns content into a user engaging format.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type: eBook<\/li>\n\n\n\n<li>Complexity: High<\/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>Accordions<\/li>\n\n\n\n<li>Anchors<\/li>\n\n\n\n<li>Animations<\/li>\n\n\n\n<li>Flow<\/li>\n\n\n\n<li>Odometer Counter<\/li>\n\n\n\n<li>Offset Positioning<\/li>\n\n\n\n<li>Reveal<\/li>\n\n\n\n<li>Tabs<\/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\/137n1hjUQ4AOJitQlZ76id7PeH5_35sfj?usp=share_link\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Accordions<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit the <strong>accordion titles<\/strong> select the <strong>Accordion <\/strong>container on the canvas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-24-1024x517.png\" alt=\"\" class=\"wp-image-4533\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-24-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-24-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-24-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-24-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-24-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-24.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Under the <strong>Variables panel <\/strong>expand the accordion sections you would like to edit. Update the accordion title by editing the Label.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-2-24-1024x517.png\" alt=\"\" class=\"wp-image-4534\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-24-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-24-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-24-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-24-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-24-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-24.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: To edit or add content within the <strong>accordion section<\/strong>, select the accordion section on the canvas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-3-19-1024x517.png\" alt=\"\" class=\"wp-image-4535\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-19-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-19-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-19-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-19-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-19-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-19.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: Edit or add content within the section by <strong>double clicking<\/strong> on the elements within it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-4-6-1024x517.png\" alt=\"\" class=\"wp-image-4536\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-6-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-6-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-6-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-6-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-6-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-6.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Anchors<\/strong><\/h3>\n\n\n\n<p>Step 1: To <strong>add an anchor<\/strong> select the <strong>final destination<\/strong> <strong>element <\/strong>the user should be sent to.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-25-1024x517.png\" alt=\"\" class=\"wp-image-4537\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-25-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-25-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-25-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-25-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-25-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-25.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: On the <strong>top right corner<\/strong> of the <strong>edit panel<\/strong> select the <strong>anchor icon <\/strong>and give the anchor a name.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-2-25-1024x517.png\" alt=\"\" class=\"wp-image-4538\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-25-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-25-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-25-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-25-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-25-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-25.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: <strong>Select the element <\/strong>that should take the user to the <strong>final destination element <\/strong>when they select it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-3-20-1024x517.png\" alt=\"\" class=\"wp-image-4540\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-20-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-20-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-20-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-20-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-20-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-20.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: Select the<strong> +Behaviors panel&nbsp; <\/strong>and expand the <strong>Scroll To <\/strong>section. From the <strong>(no target) <\/strong>dropdown select the anchor name of the <strong>final destination element <\/strong>and assign a tag.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-4-7-1024x517.png\" alt=\"\" class=\"wp-image-4539\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-7-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-7-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-7-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-7-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-7-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-7.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 5: To edit or change the <strong>final destination, <\/strong>select the element that should take the user to the <strong>destination.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-5-1-1024x517.png\" alt=\"\" class=\"wp-image-4541\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-5-1-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-5-1-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-5-1-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-5-1-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-5-1-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-5-1.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 6: Select the <strong>Behaviors panel, <\/strong>under the <strong>Scroll To <\/strong>section, update the anchor to the new anchor of the <strong>final destination.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-6-1024x517.png\" alt=\"\" class=\"wp-image-4542\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-6-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-6-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-6-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-6-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-6-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-6.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Animations<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit or to add an animation, first select the element you want to animate on the canvas.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"560\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-26-1024x560.png\" alt=\"\" class=\"wp-image-4543\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-26-1024x560.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-26-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-26-768x420.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-26-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-26-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-26-585x320.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Under the <strong>Animations <\/strong>panel, expand the <strong>(trigger) <\/strong>dropdown, and select an animation trigger.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"560\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-2-27-1024x560.png\" alt=\"\" class=\"wp-image-4545\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-27-1024x560.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-27-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-27-768x420.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-27-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-27-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-27-585x320.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: After selecting the animation trigger, another <strong>(choose) <\/strong>dropdown will appear. Expand the second dropdown to select the type of animation you want to apply.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"560\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-3-22-1024x560.png\" alt=\"\" class=\"wp-image-4547\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-22-1024x560.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-22-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-22-768x420.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-22-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-22-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-22-585x320.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: To remove an existing animation, click on the <strong>X<\/strong> to the right of the blue animation tag.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"560\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-4-8-1024x560.png\" alt=\"\" class=\"wp-image-4548\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-8-1024x560.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-8-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-8-768x420.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-8-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-8-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-8-585x320.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Flow<\/strong><\/h3>\n\n\n\n<p>Step 1: To update the content within your <strong>Flow<\/strong>, begin by selecting it on the canvas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-27-1024x517.png\" alt=\"\" class=\"wp-image-4549\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-27-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-27-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-27-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-27-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-27-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-27.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Within the<strong> Flow<\/strong>, locate the first<strong> Flow Step<\/strong> at the top. You can edit the contents within the container, add content, or remove all of the content from the <strong>Flow Step<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-2-28-1024x517.png\" alt=\"\" class=\"wp-image-4550\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-28-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-28-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-28-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-28-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-28-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-28.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: To edit the <strong>flow step transition, layout, or add arrows\/progress bar<\/strong> select the <strong>flow and navigate to the micro themes. <\/strong>Expand the <strong>Others<\/strong> tab and select <strong>Flow <\/strong>then select the <strong>transition.<\/strong>&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-3-23-1024x517.png\" alt=\"\" class=\"wp-image-4551\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-23-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-23-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-23-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-23-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-23-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-23.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Odometer Counter<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit the <strong>Odometer Counter, <\/strong>select the text element on the canvas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-28-1024x517.png\" alt=\"\" class=\"wp-image-4552\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-28-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-28-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-28-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-28-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-28-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-28.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Double click to open the <strong>text editor <\/strong>and then navigate to the <strong>Standard Text <\/strong>at the top left of the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-2-29-1024x517.png\" alt=\"\" class=\"wp-image-4553\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-29-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-29-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-29-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-29-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-29-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-29.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Update the <strong>data-val=\u201d25\u201d <\/strong>to the new value.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-3-24-1024x517.png\" alt=\"\" class=\"wp-image-4554\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-24-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-24-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-24-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-24-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-24-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-24.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Offset Positioning<\/strong><\/h3>\n\n\n\n<p>Step 1: To adjust the placement of the <strong>Social Share <\/strong>select the container that the Social Share is within on the canvas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-29-1024x517.png\" alt=\"\" class=\"wp-image-4555\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-29-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-29-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-29-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-29-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-29-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-29.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Navigate to the <strong>Layout panel<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-2-30-1024x517.png\" alt=\"\" class=\"wp-image-4556\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-30-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-30-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-30-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-30-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-30-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-30.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Scroll down to <strong>Position <\/strong>and adjust the <strong>top and left pixels<\/strong> to get your desired position.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-3-25-1024x517.png\" alt=\"\" class=\"wp-image-4557\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-25-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-25-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-25-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-25-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-25-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-25.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reveal<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit when the reveal container will appear, first select the <strong>Reveal <\/strong>element on the canvas.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-30-1024x517.png\" alt=\"\" class=\"wp-image-4558\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-30-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-30-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-30-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-30-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-30-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-30.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Under the <strong>Variables <\/strong>panel, you can choose to change the <strong>Reveal type <\/strong>and when the reveal will appear by selecting from the options listed.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-2-31-1024x517.png\" alt=\"\" class=\"wp-image-4559\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-31-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-31-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-31-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-31-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-31-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-31.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: The reveal options in the <strong>Micro-themes <\/strong>allow for different transition and overlay stylings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-3-26-1024x517.png\" alt=\"\" class=\"wp-image-4560\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-26-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-26-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-26-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-26-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-26-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-26.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tabs<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit the <strong>tab titles<\/strong> select the <strong>Tabs <\/strong>container on the canvas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-31-1024x517.png\" alt=\"\" class=\"wp-image-4561\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-31-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-31-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-31-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-31-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-31-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-31.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Under the <strong>Variables panel <\/strong>expand the tab sections you would like to edit. Update the tab title by editing the Label.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-2-32-1024x517.png\" alt=\"\" class=\"wp-image-4562\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-32-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-32-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-32-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-32-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-32-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-32.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: To edit or add content within the <strong>tab section<\/strong>, select the tab section on the canvas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-3-27-1024x517.png\" alt=\"\" class=\"wp-image-4563\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-27-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-27-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-27-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-27-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-27-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-27.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: Edit or add content within the section by <strong>double clicking<\/strong> on the elements within it.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"517\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-4-9-1024x517.png\" alt=\"\" class=\"wp-image-4564\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-9-1024x517.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-9-300x151.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-9-768x388.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-9-1536x776.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-9-585x295.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-4-9.png 1919w\" 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\/18fc70mWCQ6FtiFkSWGrfLuqZeXeJC74D42kLjSXfV6U\/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\/robust-ebook\/\">Robust eBook<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/gated-ebook\/\">Gated eBook<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/easy-ebook\/\">Easy eBook<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/image-focused-ebook\/\">Image-focused eBook<\/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 Interactive Playbook is a gated interactive experience that displays extensive content using different Ion components making it visually appealing and digestible. This experience features, anchoring, tab displayed information, reveals when hovered over, odometer [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":5904,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-4532","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\/4532","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=4532"}],"version-history":[{"count":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4532\/revisions"}],"predecessor-version":[{"id":5906,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4532\/revisions\/5906"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5904"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=4532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=4532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=4532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}