Compatibility:

WebSite X5 Evo and Pro

Timelines are perfect to tell a story and show the one's progress in a project: they're nice to see, easy to read and help the reader identify the most important stages of a process. Timelines can be used in many situations: tell the story of your company, the evolution of your product/service or the stages of your school and working career. A timeline is much better than a long descriptive text, because it helps visualize the most important information: the message is the same, but it is more likely to be read!


With the Vertical Timeline Object you can create timeline easily and without any effort: see how it works on the Preview page. 



Do you want to find out how Vertical Timeline works? Check out this video or keep reading:



How to create boxes

The first thing you need to do is to identify the most important stages and report the necessary information for each:

  • Double-click the Vertical Timeline Object to open the setting window.
  • Open the Contents section and select Box 1 from the Contents list.
  • Report a Date, Title and Description. 
  • Repeat these steps for all the stages by proceeding chronologically: from the oldest to the newest or vice versa. You can add up to 10 boxes. 
  • You can possibly report a Button text and a Link: in this way, a button will be added which leads to a related page. 


How to define the graphic layout

You can easily define the graphic layout for the timeline, so it better adapts to the rest of the website:

  • Go to Style section and use the options to define the Line, Placeholder and Background color. You can also activate a Shadow to make the boxes stand out more.
  • Select each element (Date, Title, Description and Button) and define the Font and Text Color for each. For the Button, you can define the Background Color and the Bevel as well. 
  • Confirm your choices when you are happy with the result.


Are you curious to use this Object on your website? Install Vertical Timeline now


You don't have enough Credits for this Object? Check out our Credit Packs