{"id":4658,"date":"2022-09-15T09:01:53","date_gmt":"2022-09-15T09:01:53","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=4658"},"modified":"2023-12-10T19:51:12","modified_gmt":"2023-12-10T19:51:12","slug":"how-to-use-the-professional-services-tour-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-professional-services-tour-template\/","title":{"rendered":"How to use the Professional Services Tour Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/f38aa537d9a445e99187aec315942b04?sid=92acd5d2-3b08-4ed1-803d-60b94a94e01d\" 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\/professional-services-tour\">Professional Services Tour<\/a> is an un-gated low complexity quick start that focuses on consultation. This multi-page template includes a landing page along with 6 separate pages that focus on different topics. This engaging template includes video backgrounds, scroll-to-sections and other interactive elements. Each page is in the same layout so visitors become familiar with what information is to be expected in each section. This template is perfect for large amounts of content due to the number of individual pages. On the interior pages, a sticky navigation bar is displayed on the top so visitors can switch between different pages for their convenience. At the end of each page, visitors can sign up for your company\u2019s newsletter.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type: Microsite<\/li>\n\n\n\n<li>Complexity: Low<\/li>\n\n\n\n<li>Use case: Consulting B2B<\/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>Anchors<\/li>\n\n\n\n<li>Animations<\/li>\n\n\n\n<li>Form<\/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\/1br0R8pA2iqdUprDOKNnX5y9MKpmM372a?usp=share_link\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Anchors<\/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-1-1024x576.png\" alt=\"\" class=\"wp-image-4659\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-01-min-1.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-1-1024x576.png\" alt=\"\" class=\"wp-image-4660\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-02-min-1.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-1-1024x576.png\" alt=\"\" class=\"wp-image-4661\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-03-min-1.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-1-1024x576.png\" alt=\"\" class=\"wp-image-4662\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-04-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Anchor-Link-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>Animations<\/strong><\/h3>\n\n\n\n<p>Step 1: To add or edit an animation, first select the element you wish to animation 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-4-1024x576.png\" alt=\"\" class=\"wp-image-4663\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-4-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-4-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-4-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-4-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-4-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-4-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-01-min-4.png 1600w\" 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=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Animation-02-min-5-1024x576.png\" alt=\"\" class=\"wp-image-4664\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-5-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-5-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-5-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-5-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-5-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-5-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-02-min-5.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: After selecting the trigger, click on the <strong>(choose) <\/strong>dropdown to select the desired animation.&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-5-1024x576.png\" alt=\"\" class=\"wp-image-4665\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-5-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-5-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-5-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-5-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-5-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-5-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-03-min-5.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-5-1024x576.png\" alt=\"\" class=\"wp-image-4666\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-5-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-5-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-5-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-5-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-5-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-5-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Animation-04-min-5.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>Form<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit the form field within your form, 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:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Form-01-min-5-1024x576.png\" alt=\"\" class=\"wp-image-4667\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-01-min-5-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-01-min-5-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-01-min-5-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-01-min-5-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-01-min-5-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-01-min-5-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-01-min-5.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Select the <strong>Textbox <\/strong>element within the <strong>Form field <\/strong>element.<\/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\/Form-2-min-1-1024x576.png\" alt=\"\" class=\"wp-image-4668\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-2-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-2-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-2-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-2-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-2-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-2-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-2-min-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Under the <strong>Variables <\/strong>panel, click under the <strong>Data field <\/strong>&nbsp;panel to open the edit options.&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\/Form-03-min-5-1024x576.png\" alt=\"\" class=\"wp-image-4669\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-03-min-5-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-03-min-5-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-03-min-5-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-03-min-5-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-03-min-5-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-03-min-5-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-03-min-5.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: Select the data field you wish to apply then press <strong>OK <\/strong>to save.<\/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\/Form-04-min-5-1024x576.png\" alt=\"\" class=\"wp-image-4670\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-04-min-5-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-04-min-5-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-04-min-5-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-04-min-5-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-04-min-5-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-04-min-5-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Form-04-min-5.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>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<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\/Video-01-min-1-1024x576.png\" alt=\"\" class=\"wp-image-4671\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-01-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-01-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-01-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-01-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-01-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-01-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-01-min-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\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<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\/Video-02-min-1-1024x576.png\" alt=\"\" class=\"wp-image-4672\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-02-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-02-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-02-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-02-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-02-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-02-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-02-min-1.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\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<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\/Video-03-min-1024x576.png\" alt=\"\" class=\"wp-image-4673\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-03-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-03-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-03-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-03-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-03-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-03-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-03-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\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<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\/Video-04-min-1-1024x576.png\" alt=\"\" class=\"wp-image-4674\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-04-min-1-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-04-min-1-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-04-min-1-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-04-min-1-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-04-min-1-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-04-min-1-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Video-04-min-1.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><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1sARnW4T4tUx6r5szwzHdWkt9TcqdAdTsNZkLPuWPWhY\/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<\/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\/scrollable-product-tour\/\">Scrollable Product Tour<\/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 Professional Services Tour is an un-gated low complexity quick start that focuses on consultation. This multi-page template includes a landing page along with 6 separate pages that focus on different topics. This engaging [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":5922,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-4658","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\/4658","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=4658"}],"version-history":[{"count":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4658\/revisions"}],"predecessor-version":[{"id":5924,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4658\/revisions\/5924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5922"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=4658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=4658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=4658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}