Timeline Widget

ElementsKit, the all-in-one Elementor addon gives you the ultimate ability to build websites with WordPress. With 85+ highly customizable widgets and extensions, you have all the page builder’s features in one plugin. Eliminates the need for individual plugins, and reduces the loading time of your WordPress site.

The Timeline widget from ElementsKit is designed to show your content in a chronological timeframe. You can create a stylish timeline to display your post, achievements, and other content with the Elementor Timeline for WordPress. Read this documentation to learn how to add Elementor timeline in WordPress using ElementsKit.

Step-1: Configure the Elementor Timeline #

First, open the Elementor editor and drag the Elementor Timeline widget into your design. Then configure the timeline content and settings to add Elementor Timeline in WordPress.

1.1 Add Content and Choose Layout #

1. Choose the Timeline Style to be Horizontal or Vertical. For the Vertical timeline style, you get to select the Content Style between the Same Side or Both Sides.

2. You can include Timeline Content with the ADD ITEM button. Also can delete any content when you want.

3. For each Time Line Content, you can set the Title, Sub Title, Title Link, Description, Title Icon, timeline Date, and Address.

4. To customize timeline content, edit the Repeater Item Style. Choose Icon Text Color, Icon Background Color, Sub Title Color, and Content box Background color for Normal and Hover states.

1.2 Settings for Elementor Timeline #

To configure the settings for Elementor Timeline:

1. Choose the Date Icon for the timeline.
2. Choose the Address Icon for the timeline.
3. Select Content Box Entrance Animation from the available list.
4. Select Address, Date Entrance Animation from the available list.

5. Set the Pinpoint Style to Default or Icon. For Icon Pinpoint Style, choose the Pinpoint Icon.

Step-2: Customize Elementor Timeline Widget #

You can customize Content, Line, and Container design under the Style tab.

2.1 Content #

To customize the Content style:

1. Set Alignment for the content inside the box.
2. Adjust the Padding, Inner Padding, and Border Radius.

3. Choose the color, typography, and margin for Sub Title.
4. Choose Color, Anchor Color, Typography, and Margin for content Title.
5. Select the Color, Typography, and margin for Content Text.

6. For Round Icon, set the Icon Color and Icon Background color.
7. For Timeline Info, set its Color, Typography, and Margin, and adjust the Icon Size.
8. For Address, set its Color, Typography, and Margin, and adjust the Icon Size.

9. Set On Hover color for Sub Title, Title, Title Anchor, Content Text, Round Icon, Round Icon Background, and Timeline Info.

2.2 Line #

To customize the Line and Line Icon styles:

1. Choose the Line Color.
2. Set the line Icon Color. then Background color type, Border Type, width, color, and Border Radius for the line Icon.
3. You can also set the On Hover colors for those elements.

2.3 Container #

To Customize the Container,

1. Adjust the gap between Info (address and date) and Icon.
2. Adjust the Item Bottom Spacing for container items.

Finally, you can now add Elementor Timeline in WordPress using the ElementsKit Timeline widget and display your content in a stylish way.