{"id":4398,"date":"2022-03-17T06:10:39","date_gmt":"2022-03-17T06:10:39","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=4398"},"modified":"2025-06-04T15:33:34","modified_gmt":"2025-06-04T15:33:34","slug":"how-to-use-the-event-microsite-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-event-microsite-template\/","title":{"rendered":"How to use the Event Microsite Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/f8e84eacfdcb4059b513897c82c6cdd6?sid=7a0094e8-d127-4b11-a3cd-ad9f6cbf63da\" 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\/microsite\/event-microsite\">Event Microsite<\/a> is a high complexity, one page template that focuses on brand awareness. This engaging template includes a variety of interactive elements to help your visitors learn more about your brand. With unique animations along with a photo gallery, this template is designed to showcase your company products with refreshing and light layouts for each section. At the end of the experience, visitors can sign up for your company\u2019s newsletter by entering their email address.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type: Microsite<\/li>\n\n\n\n<li>Complexity: High<\/li>\n\n\n\n<li>Use case: Brand Awareness<\/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>Accordion<\/li>\n\n\n\n<li>Anchor Link<\/li>\n\n\n\n<li>Animations<\/li>\n\n\n\n<li>Flow<\/li>\n\n\n\n<li>Lightbox<\/li>\n\n\n\n<li>Reveal<\/li>\n\n\n\n<li>Video<\/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\/193NhFfWkK2WdzWe4k0hKSE0Bqk7RHtfT?usp=share_link\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Accordion<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit the accordion settings, first locate the <strong>Accordion <\/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:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Accordion-01-min-1024x576.png\" alt=\"\" class=\"wp-image-4399\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-01-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-01-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-01-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-01-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-01-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-01-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-01-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: You can edit the accordion titles by clicking on it directly on the canvas or expanding the accordion sections 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:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Accordion-02-min-1024x576.png\" alt=\"\" class=\"wp-image-4400\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-02-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-02-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-02-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-02-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-02-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-02-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-02-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: You can edit the contents within the accordions by clicking on the <strong>Text <\/strong>element inside the<strong> Accordion Section <\/strong>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:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Accordion-03-min-1024x576.png\" alt=\"\" class=\"wp-image-4401\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-03-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-03-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-03-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-03-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-03-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-03-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-03-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: To add a new accordion section, you can click on the section title on the canvas or expand the accordion panel under the <strong>Variables panel.<\/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:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Accordion-04-min-1024x576.png\" alt=\"\" class=\"wp-image-4402\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-04-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-04-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-04-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-04-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-04-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-04-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Accordion-04-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Anchor Link<\/strong><\/h3>\n\n\n\n<p>Step 1: Select a section where you want the CTA to scroll to then add an anchor by clicking on the <strong>Anchor Icon<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-1024x576.png\" alt=\"\" class=\"wp-image-4403\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Assign a unique name for the anchor and press <strong>OK<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-1024x576.png\" alt=\"\" class=\"wp-image-4404\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Select the element that will link to the anchor and click under the <strong>Behaviors <\/strong>panel 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:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-1024x576.png\" alt=\"\" class=\"wp-image-4405\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: Choose the anchor that was previously assigned, from the dropdown menu, then press<strong> OK.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-1024x576.png\" alt=\"\" class=\"wp-image-4406\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min.png 1600w\" 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 the flow animation, first select the <strong>Flow <\/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:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Animation-01-min-1-1024x576.png\" alt=\"\" class=\"wp-image-4407\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Under the <strong>Micro-themes <\/strong>panel, expand the <strong>Others <\/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:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Animation-02-min-1-1024x576.png\" alt=\"\" class=\"wp-image-4408\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Under the <strong>Others <\/strong>panel, expand the <strong>(category) <\/strong>dropdown and select the <strong>Flow <\/strong>option then <strong>(choose)<\/strong> an animation to apply between flow steps.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Animation-03-min-1-1024x576.png\" alt=\"\" class=\"wp-image-4409\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-1.png 1600w\" 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=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Animation-04-min-1-1024x576.png\" alt=\"\" class=\"wp-image-4410\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-1.png 1600w\" 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 edit the flow, first select the <strong>Flow <\/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:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Flow-01-min-1-1024x576.png\" alt=\"\" class=\"wp-image-4411\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-01-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-01-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-01-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-01-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-01-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-01-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-01-min-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: If you want to add another flow step you can make a copy on a mac, by holding down the option key (alt key on a windows) to copy and drag the <strong>Flow Step<\/strong> to the bottom of the <strong>Flow<\/strong> element.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Flow-02-min-2-1024x576.png\" alt=\"\" class=\"wp-image-4412\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-02-min-2-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-02-min-2-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-02-min-2-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-02-min-2-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-02-min-2-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-02-min-2-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-02-min-2.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Adjust the elements within the new copied flow step to your liking.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Flow-03-min-2-1024x576.png\" alt=\"\" class=\"wp-image-4413\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-03-min-2-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-03-min-2-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-03-min-2-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-03-min-2-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-03-min-2-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-03-min-2-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-03-min-2.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: If you wish to remove a flow step, select the flow step on the canvas and click the trash can.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Flow-04-min-2-1024x576.png\" alt=\"\" class=\"wp-image-4414\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-04-min-2-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-04-min-2-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-04-min-2-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-04-min-2-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-04-min-2-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-04-min-2-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Flow-04-min-2.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Lightbox<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit the lightbox settings, first select the <strong>Lightbox <\/strong>element 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:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Lightbox-01-min-1024x576.png\" alt=\"\" class=\"wp-image-4415\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Lightbox-01-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Lightbox-01-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Lightbox-01-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Lightbox-01-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Lightbox-01-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Lightbox-01-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Lightbox-01-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Under the <strong>Variables <\/strong>panel, expand the <strong>Content <\/strong>tab to see the lightbox settings.&nbsp;<\/p>\n\n\n\n<p>Step 3: You can select the type of content that you want to appear in the lightbox. For this example, we are using the <strong>Image<\/strong> type.&nbsp;<\/p>\n\n\n\n<p>Step 4: You can edit the image by clicking under the <strong>Image <\/strong>panel to open the edit window. Once you select the image, press <strong>OK <\/strong>to save.&nbsp;<\/p>\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 the reveal animations, first select the <strong>Reveal <\/strong>element on the canvas.&nbsp;<\/p>\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<p>Step 3: You can adjust the reveal animations by expanding the <strong>Others <\/strong>tab under the <strong>Micro-Themes <\/strong>panel.<\/p>\n\n\n\n<p>Step 4: Click on the <strong>(categories) <\/strong>dropdown and select the reveal option and choose the reveal transition.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Video<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit the video background, first select the <strong>Video (Container Background) <\/strong>element on the canvas.&nbsp;<\/p>\n\n\n\n<p>Step 2: Under the <strong>Variables <\/strong>panel, select your <strong>Video Type. <\/strong>Each video type will have slightly different settings.&nbsp;<\/p>\n\n\n\n<p>Step 3: Depending on the video type you selected, you will need to find the video ID of your video. In this example, we are using a Vimeo video source. The video ID can be found after the slash on the vimeo link.&nbsp;<\/p>\n\n\n\n<p>Step 4: Copy the numbers at the end of the link and paste it in the <strong>Video ID <\/strong>tab. Make sure the <strong>Fill Entire Background <\/strong>box is selected.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>[Bonus] Ticker bar animation<\/strong><\/h3>\n\n\n\n<p>Alternative 1: Directly edit the text<br>Step 1: To edit the information in the animated bar you can directly select the text, on the right side click on the box to edit the content.<br><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdne2UUsVVN4qR0WQUCD5IwLciOP1uu5N4loK6u5Nuh9lGQdz4jzg-pl-dJelD2imTyayNBymS7_Ke1XUnaXwU5F3EcoHCM5pZDYfsVK4Y0R3suMLjCwympVnVgjUzOIw6Gu7Ri?key=-00pgH_hju4alEIazS6xAA\" width=\"624\" height=\"193\"><\/p>\n\n\n\n<p>Step 2: Replace the text with your content and save.<br><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXd3ha8b87OwbmYco7rei6z2F7kk9vmkdJQVRC5jS7q2tn9zQ1KGJzgWclgLEdCcK1rXWZ-6kha4CW-3y_8_wMJYkkDTDXfexTZS1SwZnWz9hzhuptAdRgMn8ro-G_9bweLi2gqIOQ?key=-00pgH_hju4alEIazS6xAA\" width=\"624\" height=\"429\"><\/p>\n\n\n\n<p>&nbsp;Alternative 2: Update de Page Rules<br>Step 1: The text inside two curly brackets is used to add dynamic content,&nbsp; you can edit the content on the Page Rules tab.<br><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcUHczvloSE6ixKskdhkUkVyW-Yf0vBUTZbjqV1AwCrXiNuFQI8WtswVnn_8nVE6nXD6_HWUyZPSBeLq7seJwxBYkTmgcmZYtmkIeB66V6bAPGypMuHOyL9JcKIUMH27H_hg5Es?key=-00pgH_hju4alEIazS6xAA\" width=\"624\" height=\"472\"><\/p>\n\n\n\n<p>Step 2: Once opened you can edit the contents and save. Dynamic content such as {{CurrentYear}} allows the year to be updated automatically.<br><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdY3iiR9TTuTl_uczrNF9POtuWPGhTP8S7lbxN5ejxVKf6ikUfmG9MUgzfi8YnBvMxKq15lPazGEVlC6s7wy6-0sDnR2N_JfSA_iZEQLPGYsx7w0LpgNkTQTdjBDapxiy9nE3MZmw?key=-00pgH_hju4alEIazS6xAA\" width=\"624\" height=\"311\"><\/p>\n\n\n\n<p>Adjust the speed:<br>Step 1: On Creative Settings open the Creative custom CSS tab.<br><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXecFulQzKIvDogOIDtT6uqLw_TctG3aLssk7IT5DJECQNN2jsAmSRIappD4Hm2TWwmriWlw6wK9SEFE-l05o5jTCdlflI8GNUQFlr3jUhteQoZSaKdeBcrhKplckWIF53vQYBe0qQ?key=-00pgH_hju4alEIazS6xAA\" width=\"624\" height=\"423\"><\/p>\n\n\n\n<p>Step 2: Adjust the speed to your liking, in seconds, and save.<br><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcN04FzpbzkeR70WSPafZ7kpin8XQp4MSRR0DjhgCsYV5YQpBMq4HZtyzAidixGSZxT5TJSFCqooXbk8p4FXvKtj-kfM1X-qxHYNU86bGCcy0legLzAciY5ZIkuKQkQYmk3GFfJ3Q?key=-00pgH_hju4alEIazS6xAA\" width=\"624\" height=\"429\">Step 3: There is a different speed for smaller screens, don\u2019t forget to adjust it too.<br><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfVYkx1yxTCAX-_8xgjuVS6wipGFv48jPwvrHgdSeArU8UARtluJzbvHYRODMADJvudQ6j-ruyenl2ThB2ynu-zI4sRaGkjDPCyYNWkYAfmbRUPVpNAGGCMCouNST3dsZnNaskAsQ?key=-00pgH_hju4alEIazS6xAA\" width=\"624\" height=\"475\"><\/p>\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\/1gT7tB9pmuQzrTl3UnkHsJicGez86HfIuxZT58OJn-Fc\/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\/sales-presentation\/\">Sales Presentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/app-tour\/\">App Tour&nbsp;<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/scrollable-product-tour\/\">Scrollable Product Tour<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/professional-services-tour\/\">Professional Services Tour&nbsp;<\/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 Event Microsite is a high complexity, one page template that focuses on brand awareness. This engaging template includes a variety of interactive elements to help your visitors learn more about your brand. With [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":5883,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-4398","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\/4398","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=4398"}],"version-history":[{"count":5,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4398\/revisions"}],"predecessor-version":[{"id":7605,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4398\/revisions\/7605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5883"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=4398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=4398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=4398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}