Compatibility:

WebSite X5 Evo and Pro

Timelines are perfect to tell a story and show the one's progress in a project. Generally, they are represented by a line that unfolds on the page connecting contents which represent the different stages of the process. However, there is also an alternative - graphically nicer and more compact - to set them up.  With the Slider Timeline Optional Object, each content box corresponding to a date is presented by a slide: the timeline progress is then displayed as a slideshow.


Check out the Preview page to see some examples of what you can achieve.



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 Slider Timeline Object to open the setting window.
  • In the Contents section, click on Add to a new Box.
  • Select the Box 1 added to the list.
  • Report the Date, the Title, the Description in the relative fields.  
  • You can possibly report a Button text and a Link: in this way, a button will be added which leads to a related page.  
  • Repeat these steps for all the stages by proceeding chronologically: from the oldest to the newest or vice versa. 


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:

  • Open the Style section and define the timeline Height in pixel.
  • Now you can work on the timeline Line style: you can set its Color and Thickness.
  • You can also set the Font for the dates reported on the timeline as well as the Color to be used for the other elements: dates, placeholders and possible scroll arrows.
  • Finally, you can move on to the Boxes style, which represent the different stages of the process.
  • Use the available menu to work on the element you want: the Background, the Title, the Description or the Button. Each element has it specific customization options. 
  • Confirm your choices when you are happy with the result. 


#tip - Do you like timelines? Are you looking for possible alternatives? Check out the Vertical Timeline Object or the ZigZag Timeline Object.


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


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