Timeline

Note: This article applies to Free Trial accounts created on or after 16 December 2024 and Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before these dates, please refer to the article Elements Management.

Adding a Timeline

Option 1

  • Hover over the desired section and click Add Element:

  • Choose Timeline from the modal that appears:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Option 2

  • Hover over the left sidebar of the Site Editor and click Build (+) button:

  • Choose the element:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Moving and Resizing a Timeline

Please refer to the Elements Management (New Grid) article to learn more about moving and duplicating elements.

Customizing a Timeline

To edit, add the item, duplicate, or delete the element, click on it and switch between the buttons that appear in its toolbar:

Editing the Timeline

You can modify the Layout and Design of the Timeline:

Layout Tab

  • Image: Add an image (available for styles #2 and #3).
  • Date: Add the date field.
  • Title: Add title field.
  • Description: Add a description field.

Design Tab

  • Style: Choose a preferred timeline design from the available options (style #2 is set by default).
  • Alignment: Align the timeline to the section's center, right, or left.
  • Line Color: Select the background color for the line (available for styles #1 and #2).
  • Circle Color: Select the background color for the circle (available for style #1).
  • Shape Color: Select the background color for the shape (available for style #3).
  • Shape: Change the shape (available for styles #2 and #3): Circle, Square, or Hexagon.

Adding the Item to the Timeline

  • Click [+] in the top-left corner to add a new item:

  • To duplicate the timeline item, click on it and choose the Duplicate button that appears in its toolbar:

  • To delete a timeline item, click on it and choose the Remove button [Bin] that appears in its toolbar:

  • Select a text to display the Editing Menu to use the AI Writer, make the text bold, italic, underlined, or strikethrough, and choose the font, text size, color, or clear the format of the selected text:

  • Click the Image to display the Editing Menu. You can Replace an image, add an Overlay, or add Alt Text:

Duplicating the Timeline

  • To duplicate the timeline, click on it and choose the Duplicate button that appears in its toolbar:

  • The duplicate of the element will appear immediately.

Deleting the Timeline

  • To delete a timeline, click on it and choose the Remove button [Bin] that appears in its toolbar:

  • The element will be removed immediately.