{"id":4811,"date":"2022-12-22T10:19:48","date_gmt":"2022-12-22T10:19:48","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=4811"},"modified":"2025-12-11T13:24:59","modified_gmt":"2025-12-11T13:24:59","slug":"how-to-use-the-easy-white-paper-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-easy-white-paper-template\/","title":{"rendered":"How to use the Easy White Paper Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/c4e29286c9be439f89bf70e09df0ced9?sid=460cee61-54c0-4165-b461-1d02aea5e4a3\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\"><\/iframe><\/div>\n\n\n\n<p class=\"\">The <a href=\"https:\/\/ioninteractive.com\/gallery\/easy-white-paper-2\/\">Easy White Paper<\/a> is a basic long page, with 6 chapters and a form at the end to encourage lead generation. With a sticky top navigation, users have the option to easily scroll to different sections of the page. This low complexity template includes a variety of different features such as: tabs, accordions, reveals and many more. The Easy White Paper is an excellent beginner template to convert large amounts of content to something more digestible.\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Type: White Paper<\/li>\n\n\n\n<li class=\"\">Complexity: Low<\/li>\n\n\n\n<li class=\"\">Use case: Lead Generation&nbsp;<\/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=\"\">Anchor<\/li>\n\n\n\n<li class=\"\">Animations<\/li>\n\n\n\n<li class=\"\">Flow<\/li>\n\n\n\n<li class=\"\">Form<\/li>\n\n\n\n<li class=\"\">Lightbox<\/li>\n\n\n\n<li class=\"\">Reveal<\/li>\n\n\n\n<li class=\"\">Tabs<\/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>Anchor<\/strong><\/h3>\n\n\n\n<p class=\"\">Step 1: Select an element that you want as an anchor point. Assign an anchor by selecting the <strong>Anchor <\/strong>icon under the Edit panel then press <strong>OK<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-1-1024x576.png\" alt=\"\" class=\"wp-image-8336\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 2: Select an element you wish to apply the scroll-to effect.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-2-1024x576.png\" alt=\"\" class=\"wp-image-8337\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-2-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-2-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-2-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-2-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-2.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 3: Click under the <strong>Behaviors <\/strong>panel to open the Behaviors settings.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-3-1024x576.png\" alt=\"\" class=\"wp-image-8340\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-3-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-3-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-3-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-3-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-3.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 4: Choose the desired anchor point from the dropdown menu then press <strong>Apply<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-4-1024x576.png\" alt=\"\" class=\"wp-image-8341\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-4-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-4-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-4-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-4-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Anchor-4.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Animations<\/strong><\/h3>\n\n\n\n<p class=\"\">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=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-1-1024x576.png\" alt=\"\" class=\"wp-image-8344\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">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=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-2-1024x576.png\" alt=\"\" class=\"wp-image-8346\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-2-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-2-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-2-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-2-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-2.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">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=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-3-1024x576.png\" alt=\"\" class=\"wp-image-8348\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-3-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-3-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-3-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-3-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-3.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">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=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-4-1024x576.png\" alt=\"\" class=\"wp-image-8350\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-4-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-4-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-4-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-4-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Animation-4.png 1600w\" 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: 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=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-1-1024x576.png\" alt=\"\" class=\"wp-image-8353\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">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=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-2-1024x576.png\" alt=\"\" class=\"wp-image-8355\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-2-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-2-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-2-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-2-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-2.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 3: To edit the <strong>flow step transition, layout, or to 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=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-3-1024x576.png\" alt=\"\" class=\"wp-image-8356\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-3-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-3-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-3-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-3-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Flow-3.png 1600w\" 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 class=\"\">Step 1: To edit the form, first locate the <strong>Form <\/strong>element on the canvas.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-1-1024x576.png\" alt=\"\" class=\"wp-image-8358\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 2: Select the <strong>Textbox <\/strong>element to edit. Under the <strong>Variables <\/strong>panel, click under the <strong>Data Field <\/strong>to open the edit window.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-2-1024x576.png\" alt=\"\" class=\"wp-image-8361\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-2-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-2-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-2-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-2-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-2.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 3: Select a new data field then press <strong>Apply.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-3-1024x576.png\" alt=\"\" class=\"wp-image-8362\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-3-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-3-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-3-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-3-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-3.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 4: You can make this field a requirement before completing the form by checking off the <strong>Required <\/strong>box under the <strong>Variables <\/strong>panel.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-4-1024x576.png\" alt=\"\" class=\"wp-image-8364\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-4-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-4-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-4-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-4-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Form-4.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Lightbox<\/strong><\/h3>\n\n\n\n<p class=\"\">Step 1: To edit a lightbox, first select the <strong>Lightbox <\/strong>element on the canvas. Under the <strong>Variables <\/strong>panel, expand the <strong>Content <\/strong>tab.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-1-1024x576.png\" alt=\"\" class=\"wp-image-8366\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 2: You can choose the type of content you want to display. In this example, we are displaying a <strong>URL <\/strong>which links to the form page in this creative.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-2-1024x576.png\" alt=\"\" class=\"wp-image-8368\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-2-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-2-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-2-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-2-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-2.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 3: You can choose to change the page by clicking on the <strong>URL<\/strong> to open the edit window.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-3-1024x576.png\" alt=\"\" class=\"wp-image-8370\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-3-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-3-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-3-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-3-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-3.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 4: Select the page from the dropdown menu and click <strong>Apply<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-4-1024x576.png\" alt=\"\" class=\"wp-image-8372\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-4-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-4-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-4-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-4-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Lightbox-4.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reveal<\/strong><\/h3>\n\n\n\n<p class=\"\">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=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-1-1024x576.png\" alt=\"\" class=\"wp-image-8374\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">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=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-2-1024x576.png\" alt=\"\" class=\"wp-image-8377\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-2-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-2-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-2-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-2-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-2.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">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=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-3-1024x576.png\" alt=\"\" class=\"wp-image-8378\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-3-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-3-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-3-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-3-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Reveal-3.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tabs<\/strong><\/h3>\n\n\n\n<p class=\"\">Step 1: You can add or remove tabs by first locating the <strong>Tabs <\/strong>element on the canvas.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-1-1024x576.png\" alt=\"\" class=\"wp-image-8380\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 2: You can edit or add a tab by looking under the <strong>Variables <\/strong>panel and expanding the tabs. Another option is clicking directly on the tab label on the canvas. This will automatically open the corresponding tab under the <strong>Variables <\/strong>panel.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs2-1024x576.png\" alt=\"\" class=\"wp-image-8381\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs2-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs2-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs2-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs2-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs2.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 3: You can edit the contents within the tab by double clicking on the elements within the tab container.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-3-1024x576.png\" alt=\"\" class=\"wp-image-8383\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-3-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-3-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-3-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-3-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-3.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">Step 4: To remove a tab, open the tab settings under the <strong>Variables <\/strong>panel and press the trash can icon to delete the Label. You will also need to delete any content within the tab container on the canvas as well.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-4-1024x576.png\" alt=\"\" class=\"wp-image-8384\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-4-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-4-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-4-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-4-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2022\/12\/Tabs-4.png 1600w\" 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\/1XipqaLQK6YR-4nKtEBRyhZkIbRsABSr9\/edit?gid=1376978577#gid=1376978577\">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\/gated-white-paper\/\">Gated White Paper<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/ioninteractive.com\/gallery\/white-paper-with-quizzes-2\/\">White Paper with Quizzes<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/ioninteractive.com\/gallery\/interactive-case-study\/\">Interactive Case Study<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/ioninteractive.com\/gallery\/corporate-report\/\">Corporate Report<\/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>The Easy White Paper is a basic long page, with 6 chapters and a form at the end to encourage lead generation. With a sticky top navigation, users have the option to easily scroll [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":5264,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-4811","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\/4811","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=4811"}],"version-history":[{"count":1,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4811\/revisions"}],"predecessor-version":[{"id":8385,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4811\/revisions\/8385"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5264"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=4811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=4811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=4811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}