Timeline

Inserting Timeline

Much like accordions, tabs are a great way for presenting information in a limited amount of space.

Step 1: Switch To Backend Editor

To insert a timline, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Tabs (Horizontal or Vertical)

Click "Timeline" in the Visual Composer Modal to insert a timline, for example:

Timline
Step 3: Edit Tab Settings

Once the timeline element has been inserted click the Edit Link(pen icon) of the tab wrapper, for example:

Timline Settings

Here is an overview of available timeline options:

  • Timeline Title

    Enter a timeline title.

  • With Indication

    Determines whether the timeline should use a vertical step indication.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Border Width

    Determines the indication border width.

  • Color Options

    Dot Background Color
    Dot Border Color
    Line Background Color
    Date Color

Step 4: Add Content

Once you have edited the timeline settings, click the Edit Link(pen icon) of the timeline panel you wish to edit, for example:

Timeline Add Content

Here is an overview of available panel content options:

  • Date

    Enter the event date

  • Description

    Add the event description.

  • Padding Bottom

    Determines the bottom padding of timeline events. Use this option to space out the timeline events.

  • Date Animation Type

    Determines the type of animation that will be applied to the date column.

  • Description Animation Type

    Determines the type of animation that will be applied to the description column.

Can't find what you're looking for? Submit a request in our forum.