{"id":5050,"date":"2023-10-19T13:12:46","date_gmt":"2023-10-19T13:12:46","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=5050"},"modified":"2025-02-17T11:53:25","modified_gmt":"2025-02-17T11:53:25","slug":"how-to-use-the-timeline-infographic-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-timeline-infographic-template\/","title":{"rendered":"How to use the Timeline Infographic Template"},"content":{"rendered":"\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.loom.com\/embed\/8d241f1dbe954f8786e1e931aec44aa7?sid=2a55c08d-ddc8-4eb3-8a77-f22c80f64b28\n<\/div><\/figure>\n\n\n\n<p>The <a href=\"https:\/\/iontemplates.rockcontent.com\/live\/timeline-infographic\" target=\"_blank\" rel=\"noreferrer noopener\">Timeline Infographic<\/a> is a unique and engaging long page experience that provides an entertaining way to display the timeline of your product, service, brand, or organization. With interactive elements along the way and countdown timer at the end, visitors will scroll through and participate as they learn more and create a deeper engagement with your brand.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Experience type: Infographic<\/li>\n\n\n\n<li>Complexity: Low<\/li>\n\n\n\n<li>Use case: Engagement<\/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><a href=\"#animation\">Animation<\/a><\/li>\n\n\n\n<li><a href=\"#countdown-timer\">Countdown Timer<\/a><\/li>\n\n\n\n<li><a href=\"#scroll-to-sections\">Scroll to sections<\/a><\/li>\n\n\n\n<li><a href=\"#tabs\">Tabs<\/a><\/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<h3 class=\"wp-block-heading\" id=\"animation\"><strong>Animation<\/strong><\/h3>\n\n\n\n<p>Step 1: Select the element that you wish to animate<\/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\/2025\/01\/1.-Animation-Framing-1024x576.png\" alt=\"\" class=\"wp-image-7177\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Animation-Framing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Animation-Framing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Animation-Framing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Animation-Framing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Animation-Framing.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Under the animation panel, choose the type of animation trigger<\/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\/2025\/01\/2.-Animation-Framing-1024x576.png\" alt=\"\" class=\"wp-image-7178\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Animation-Framing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Animation-Framing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Animation-Framing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Animation-Framing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Animation-Framing.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: From the list of animations, select the desired animation<\/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\/2025\/01\/3.-Animation-Framing-1024x576.png\" alt=\"\" class=\"wp-image-7179\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Animation-Framing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Animation-Framing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Animation-Framing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Animation-Framing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Animation-Framing.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\" id=\"countdown-timer\"><strong>Countdown Timer<\/strong><\/h3>\n\n\n\n<p>Step 1: Select the countdown timer to edit settings.<\/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\/2025\/01\/1.-Countdown-Framing-1024x576.png\" alt=\"\" class=\"wp-image-7180\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Countdown-Framing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Countdown-Framing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Countdown-Framing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Countdown-Framing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Countdown-Framing.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: From the <strong>Variables <\/strong>settings, you can adjust the countdown date under the <strong>End Date <\/strong>tab. The message that will show after the timer is complete can be adjusted in the <strong>End Message <\/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\/2025\/01\/2.-Countdown-Framing-1024x576.png\" alt=\"\" class=\"wp-image-7181\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Countdown-Framing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Countdown-Framing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Countdown-Framing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Countdown-Framing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Countdown-Framing.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Border size, color, style of the timer and text settings can be changed within their respective tabs.&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\/2025\/01\/3.-Countdown-Framing-1024x576.png\" alt=\"\" class=\"wp-image-7182\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Countdown-Framing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Countdown-Framing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Countdown-Framing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Countdown-Framing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Countdown-Framing.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\" id=\"scroll-to-sections\"><strong>Scroll to Sections<\/strong><\/h3>\n\n\n\n<p>Step 1: Select a section where you want the CTA to scroll to and add an anchor.&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\/2025\/01\/1.-Scroll-to-Frmaing-1024x576.png\" alt=\"\" class=\"wp-image-7183\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Scroll-to-Frmaing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Scroll-to-Frmaing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Scroll-to-Frmaing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Scroll-to-Frmaing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Scroll-to-Frmaing.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Assign the anchor with a unique name (Ei. Section 1 &#8211; Topic).&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\/2025\/01\/2.-Scroll-to-Framing-1024x576.png\" alt=\"\" class=\"wp-image-7184\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Scroll-to-Framing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Scroll-to-Framing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Scroll-to-Framing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Scroll-to-Framing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Scroll-to-Framing.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Select the button and under the behavior panel, select the anchor and assign a unique 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\/2025\/01\/3.-Scroll-to-Framing-1024x576.png\" alt=\"\" class=\"wp-image-7185\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Scroll-to-Framing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Scroll-to-Framing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Scroll-to-Framing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Scroll-to-Framing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Scroll-to-Framing.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\" id=\"tabs\"><strong>Tabs<\/strong><\/h3>\n\n\n\n<p>Step 1: To update the content within your Tabs, 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:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/1.-Tabs-Framing-1024x576.png\" alt=\"\" class=\"wp-image-7186\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Tabs-Framing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Tabs-Framing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Tabs-Framing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Tabs-Framing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/1.-Tabs-Framing.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: From the Variables settings, select a Tab tab dropdown that contains content within it. Like the Accordion you are able to edit the Label and a Tag.<\/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\/2025\/01\/2.-Tabs-Framing-1024x576.png\" alt=\"\" class=\"wp-image-7187\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Tabs-Framing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Tabs-Framing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Tabs-Framing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Tabs-Framing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/2.-Tabs-Framing.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: On the Canvas and within the Tabs content section, hover over the general area until you highlight the Tab Section and then select it. Within it there is currently a two column Responsive Grid, feel free to edit the grid itself, the contents within it&#8217;s columns, or remove it and in other interactive elements.<\/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\/2025\/01\/3.-Tabs-Framing-1024x576.png\" alt=\"\" class=\"wp-image-7188\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Tabs-Framing-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Tabs-Framing-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Tabs-Framing-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Tabs-Framing-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/3.-Tabs-Framing.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\/1Jl46ItdU7FNsGSpm38hsJnE-LQQiiJNBEe1TdqkXRDw\/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\/easy-infographic\/\">Easy Infographic<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/branded-infographic\/\">Branded Infographic<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/abm-infographic\/\">ABM Infographic<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/gated-infographic\/\">Gated Infographic<\/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 Timeline Infographic is a unique and engaging long page experience that provides an entertaining way to display the timeline of your product, service, brand, or organization. With interactive elements along the way and [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":5160,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-5050","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\/5050","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\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=5050"}],"version-history":[{"count":17,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5050\/revisions"}],"predecessor-version":[{"id":7468,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5050\/revisions\/7468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5160"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=5050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=5050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=5050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}