Timeline Infographic

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.

COMPLEXITY

Low

TYPE

Infographic

USE CASE

Engagement

Features available

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

Animation

Animation will allow you to animate elements via microthemes. A use case for this would be to have a section fade up and in to a page via scroll.

Anchor Link

Anchor will allow you to link a section or page element to a specfic link or button. A use case for this would be to place an anchor on an about section that links to the About link in the page's navigation.

Custom Code

Custom Code will allow you to add custom interactivity via Javascript or CSS to your creative. A use case for this would be this odometer script that is added to the page and text element in order to have it act as number counting up.

Tabs

Tabs will allow you to organize content into separate tabs vertically or horizontally. A use case for this would be to create a timeline of events organized by dates, where each tab label would have it's own date and list of events within the tab section.

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.

Select the element that you wish to animate.

Under the animation panel, choose the type of animation trigger.

From the list of animations, select the desired animation.

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

Assign the anchor with a unique name (Ei. Section 1 - Topic).

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

Select the countdown timer to edit settings.

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.

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

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

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.

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 structure

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.
Preview Content Writing TemplateOpens in a new window.

Best practices

Be sure to tag everything that is "taggable" so that you are able to review everything at a later time in your reports.

Reveals
Flows
Flowsteps
Links
Tabs
Accordions
Lightboxes
Rotators
Sliders

Your conversion point is the most important measurement in determining whether your creative is converting visitors. We recommend having one conversion point per creative. Here is the element and methods in which to set your conversions:

Links
Behaviors
Actions

Before going live with your experience, you want to run a final proofing process. This will review the experience as a whole, with any final revisions necessary. Here is the most important items to be reviewed before GoLive:

  • Review of any integrations
  • Review of conversion point
  • Review of tagging
  • External links are working correctly (opening in a new window)
  • Mark respondents as always new if used for conference or live event
  • Uncheck the robot meta directives (no archive, no follow, no index)
  • Remove path description (if applicable)
  • Make sure traffic source has been added to social share — og URL, twitter (create bit.ly), email share
  • Once live, debug on Facebook (if applicable)

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, so we can make sure to have this page constantly up to date.