Timeline

Table of Contents

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 (Drag and Drop Grid) article to learn more about moving and duplicating elements.

Adding the Item to the Timeline

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

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

  • Click the Image to display the Editing Menu. Here you can access the Image and Overlay tabs:

  • In the Image tab, you can Replace an image, and add a Title and Description:

  • In the Overlay tab, you can add the Overlay Color, choose Filter and alter its Intensity:

Customizing a Timeline

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

Style Tab

  • Timeline type: Choose a preferred timeline design from the available options (style #2 is set by default).
  • Alignment: Align the timeline to the section's left, center, or right.
  • 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).
  • Text color: Select the text color for the timeline).
  • Shape: Change the shape (available for styles #2 and #3): Circle, Square, or Hexagon.
  • Image toggle: turn on the toggle to show images (available for style #2)
  • Date toggle: turn on the toggle to show dates.
  • Title toggle: turn on the toggle to show titles.
  • Description toggle: turn on the toggle to show descriptions.


Deleting the Timeline

To delete a button:

  • Click the Remove button [Bin]:

  • The element will be removed immediately.

More Menu

  • Click the More icon in the editing menu to access the available options:

  • Cut. Click Cut or Ctrl+X to cut your element.
  • Copy. Click Copy or Ctrl+C to copy your element.
  • Duplicate. Click Duplicate or Ctrl+D to duplicate your element. The duplicate will appear immediately.
  • Delete. Click Delete to remove the element. The element will be deleted immediately.
  • Move Forward. Click Move Forward or Ctrl+⇓ to move your element.
  • Move Forward. Click Move Forward or Ctrl+⇑ to move your element.

Please Note: The Move Forward or Move Backward options are available only when one element is added on top of another.