How to use the Timeline Infographic Template

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 countdown timer at the end, visitors will scroll through and participate as they learn more and create a deeper engagement with your brand. 

  • Experience type: Infographic
  • Complexity: Low
  • Use case: Engagement

Features available

Here are the major features, abilities, and interactive elements used in this template.

  • Animation
  • Countdown Timer
  • Scroll to sections
  • Tabs

How-to use

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.

>> Framing screenshots

Animation

Step 1: Select the element that you wish to animate

Step 2: Under the animation panel, choose the type of animation trigger

Step 3: From the list of animations, select the desired animation

Countdown Timer

Step 1: Select the countdown timer to edit settings.

Step 2: From the Variables settings, you can adjust the countdown date under the End Date tab. The message that will show after the timer is complete can be adjusted in the End Message tab. 

Step 3: Border size, color, style of the timer and text settings can be changed within their respective tabs. 

Scroll to Sections

Step 1: Select a section where you want the CTA to scroll to and add an anchor. 

Step 2: Assign the anchor with a unique name (Ei. Section 1 – Topic). 

Step 3: Select the button and under the behavior panel, select the anchor and assign a unique tag. 

Tabs

Step 1: To update the content within your Tabs, begin by selecting it on the canvas.

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.

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’s columns, or remove it and in other interactive elements.

Content Writing Template

Here is the content structure’s template 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.

Related templates

If you like this template, you might want to check out these other similar models.

Have a question?

Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions to [email protected], so we can make sure to have this article constantly up to date.

Share this:

Silvia is a UX/UI designer at Rock Content who has been designing for over a decade. Silvia is driven to create interactive experiences that are user-friendly, visually appealing, and functional for all. Aside from designing, she is passionate about learning and improving her logic skills. When she's not working, find her working on puzzles or spending time with family and friends.

Site Footer