Compatibility:

WebSite X5 Evo and Pro

Timelines aren't only nice to see and easy to read, they also help the reader identify the most important stages of a story or of a process. You can use them to tell the story of your company or the stages of your work career: you choose.


With the ZigZag Timeline Object, you can tell your own story with a timeline which zigzags through the different stages you report: check it out on the Preview page.



How to create blocks

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

  • Double-click on the ZigZag Timeline Object you just added and open the settings window.
  • Open the Contents section and select Box 1 from the list.
  • Report a Date, Title and Description in the specific fields.
  • If you want to, you can report a Button Text and a Link: in this way, a button will be reported below the text which you can use to link an in-depth page, for instance. 
  • 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:

  • Go to Style section and use the options to define, first of all,  the Line for the timeline: you can define the Color, the Thickness and the Bevel, i. e. the rounded corners.
  • Define the Placeholder style in the same way: again you can define the Size in pixel, the background and border Color and the Border Thickness.
  • Now you can move one to the Blocks reporting the dates and the corresponding texts.
  • Using the menu, select the block element you want to work on: Background, Date, Title, Description or Button. The available options will vary according to the element you select.
  • Confirm your choices when you are happy with the result.


#tip - Do you like timelines? Are you looking for alternative solutions? Check out the Vertical Timeline Object or the Slider Timeline Object.


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


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