< All Topics

Timeline is a special type of widget using which you can create beautiful timelines for Organizations History, Startup Storyline, Event/Program History, Step by Step Tutorials Timeline, and Lifetime Achievements, etc. This widget depicts a complete history of a particular organization or an event in a visual way.

Pro tip
The most common examples where timeline widget is used are listed above. But, we have one more to add to the list. Why not create a timeline for your travel/vacation stories?

How to use the Timeline widget of The Plus Addons For Elementor

The Timeline widget comes in two different styles. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

General Steps

Search for the Timeline Widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Content

Style

Select your preferred style from the dropdown.

Masonry Layout

Slide to enable the Masonry Layout.

Content Alignment

Set the Content Alignment here.

Add Timeline

You can add multiple Pin Hotspot here by clicking Add Item.

Icon: Select your icon here using the options provided. You can also add an image based icon.
Pin Title: Set the title of your Pin.
Pin Position: Set the position of your Pin.
Content: Add the content of your timeline.
Advance: Set the alignment and animation options here.

Pin Start/End Options

Pin Center Style

Select a preferred style of your pin.

Pin Start/End Options

Start Pin/End Pin
Select Icon – Select Icon or Image for start and endpin.
Icon Font – Select the Icon Font for start and endpin.
Icon Library – Select the Icon for start and endpin from the Icon Library.

2. Style

The Style tab is used for customizing the appearance of all the Animated Service Boxes widget components. Let’s understand each of these customization options. 

Loop Pin Style

Set Margin, Alignment, Typography, and Text color for the Title here.

Title Style

Set Margin, Alignment, Typography, and Text color for the Title here.

Description/Content Style

Set Margin, Alignment, Typography, and Text color for the Description here.

Button Options

Set Margin, Padding, Alignment, Typography, Size, Radius, Background, Box shadow and color for the toggle button here.

Pin Start/End Style

Set the Border Color, Icon Size, and Color here.

Extra Options

Set the width of the divider gap content here.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?