Timeline

Adding a Timeline

The  Timeline feature can be placed into different blocks via Drag & Drop. To add the feature:

  • In the Site Editor, hover over the left sidebar and click Build:

  • Under the Features section, click Content:

  • Drag and drop the Timeline to the preferred area of the page:

Customizing a Timeline

Hover over a Timeline element to display the Edit button in its top-right corner and be able to modify the item:

You can modify the Layout and Design of the Timeline:

Layout

  • Image: Allow to add an image (Available in №2 and №3 styles).
  • Date: Allow to add the date.
  • Title: Allow to add title.
  • Description: Allow to add a description.

Design

Style: Click on the style preview to select the preferable Timeline design and select a style that you want:

  • №1:

  • №2:

  • №3:

Alignment:

To align the timeline to the left or to the right or to the center of the section:

  • Center:

  • Left:

  • Right:

Line Color: Click the Color square to select the background color:

Please Note: Available only in №1 and №2 styles.

Circle Color: Click the Color square to select the background color:

Please Note: Available only in №1 style.

Shape Color: Click the Color square to select the background color ():

Please Note: Available only in №3 style.

Shape: Allow to change the shape (Available only in №2 and №3 styles):

  • Circle:

  • Square:

  • Hexagon:

Adding a Timeline Item

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

Deleting a Timeline Item

  • Click [X] to Delete the selected item:

Customizing Text

Select a text to display the Editing Menu:

Customizing Image

Click on the Image to display the Editing Menu.

  • You can Replace an image, add an Overlay, or add Alt Text:

Replace:

  • Click the Image icon on the toolbar to open the Upload Image dialog:

  • In the Image Library, select Upload Image:

Please Note: Your interface for image upload may differ if your plan doesn't include the Image Editor functionality.

  • Click Select a Photo to locate an image on your computer:

  • Or, you can Drag&Drop the image:

Also, you can use Free Stock Photos:

  • Open the Image Library and click the Search Stock Photos button. 
  • You can search for photos using the search input at the top of the page.
  • Select the photo, then click Edit to modify it according to your preferences. Or click Use Image to add the photo to your project.