---
title: "How to Add an Elementor Timeline?"
url: https://theplusaddons.com/docs/add-an-elementor-timeline/
date: 2024-06-24
modified: 2026-04-14
author: "Aditya Sharma"
description: "Using the timeline style allows you to display a chronological sequence of events in a structured, scannable format. The Timeline widget in The Plus Addons for Elementor lets you add..."
image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-Animated-Headings-In-Elementor-2-1024x541.jpg
word_count: 1790
---

# How to Add an Elementor Timeline?

## Key Takeaways

- The Plus Addons for Elementor includes a Timeline widget that offers customizable pins and multiple content types.
- The Timeline widget features two preset layout styles for visual structure without custom layout building.
- Users can add buttons to timeline items to link to related pages, enhancing navigation for visitors.
- The Timeline widget allows the use of Elementor templates within timeline items for complex layouts.
- The Timeline widget requires the PRO version of The Plus Addons for Elementor and the Elementor FREE Plugin installed.

Using the timeline style allows you to display a chronological sequence of events in a structured, scannable format.

The Timeline widget in The Plus Addons for Elementor lets you add a timeline in the Elementor editor with customizable pins, multiple content types, entrance animations, and two preset layout styles. Unlike standalone timeline plugins such as Timeline Widget Addon for Elementor or the Content Timeline feature in Essential Addons for Elementor, this widget integrates directly into your existing The Plus Addons for Elementor setup. No separate plugin is required.

**Best Used For:**

- Company or brand history pages that walk visitors through key milestones and achievements

- Product roadmap sections on SaaS or software sites displaying past releases and upcoming features

- Agency portfolio pages showing project timelines, phases, and deliverables

## Check the Live Widget Demo

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/timeline/)

## Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Timeline widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Timeline and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=9AVvXE-e-IY

## How to Activate the Timeline Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![Timeline widget activation in The Plus Addons for Elementor — Widgets panel with Timeline toggled on](https://theplusaddons.com/wp-content/uploads/2024/06/timeline.png)

## Key Features

- **Two Preset** – Choose from two predefined layout styles for the Timeline widget. Use this when you want to set the overall visual structure of your timeline without building a custom layout from scratch.

- **Button** – [Add a button in the timeline](https://theplusaddons.com/docs/add-a-button-in-elementor-timeline/) to link individual timeline items to related pages. Use this when each event or milestone has a corresponding product page, case study, or blog post you want visitors to follow.

- **Elementor Template** – [Use an Elementor template in the timeline](https://theplusaddons.com/docs/use-elementor-template-in-a-timeline/) to insert a pre-built layout inside a timeline item. Use this when a timeline entry requires a multi-column layout, testimonial card, or product block that goes beyond a simple title and image.

If your timeline items link to detailed event descriptions or case studies, the [Popup Builder widget](https://theplusaddons.com/docs/popup-builder-elementor-widget-settings-overview/) lets you open that content in a modal overlay directly within the Elementor editor. Use this when you want visitors to explore milestone details without navigating away from the timeline page.

## How to Use the Timeline Widget in Elementor?

Add the Timeline widget from The Plus Addons for Elementor to the page.

> *Note: By clicking on the **Import Presets** button, you can import a ready-made design and customize it as per your requirements.*

### Content 

From the **Style** section, select a predefined layout style for the timeline. This sets the overall visual format of all timeline items at once. Use this when you want to establish the timeline's structure before customizing individual entries.

![Timeline widget Content tab in The Plus Addons for Elementor — Style, Masonry Layout, and Content Alignment settings](https://theplusaddons.com/wp-content/uploads/2024/06/timeline-content-new.gif)

Enable the **Masonry Layout** toggle to make the spacing between timeline items more compact. This is useful when your timeline items have varying amounts of content. Shorter items will sit closer to the next entry rather than leaving large gaps between them.

From the **Content Alignment** section, align the content inside timeline items. Use center alignment for full-width timelines where a balanced visual layout is the goal, and left alignment when the timeline sits inside a narrow column or alongside other page elements.

Then you will find a repeater section where you add the timeline content. Two items appear by default. Open one item to configure it.

From the **Select Icon** dropdown, add an icon or image to the timeline pin. Three options are available:

- **None** – No icon or image is added to the pin. Use this when you want a minimal pin style with only text or a plain marker.

- **Icon** – Add an icon to the pin. Use this when you want to visually categorize different event types. For example, use a calendar icon for dates, a star icon for milestones, or a flag icon for launch events.

- **Image** – Add an image to the pin. Use this when you want to display a logo, photo, or branded visual at each timeline position to reinforce identity or context.

> *Note: The options available below this dropdown depend on which option you select here.*

From the **Icon Font** dropdown, select the icon library to use. Then from the **Icon Library** section, select the specific icon.

In the **Pin Title** field, add a label that appears on the pin itself. For example, add a year, a short date, or a category label. This helps visitors scan the full timeline at a glance without reading the content of every individual item.

From the **Pin Position** dropdown, set the position of the pin label relative to the timeline line. Adjust this when the default position visually conflicts with the overall layout of your timeline.

In the **Title** field under the **Content** tab, add the headline for the timeline item. This is the main event name or milestone title that a visitor reads first.

In the **Description** section, add supporting body text for the timeline item. Keep descriptions concise so visitors can scan the full timeline without losing context between entries.

From the **Content Type** dropdown, select what appears after the item title. Three options are available:

- **Image** – Add an image after the item title. Use this when each timeline entry has a supporting photo, screenshot, or diagram that adds visual context to the written description.

- **Iframe/HTML** – [Add an iFrame or HTML content after the item title](https://theplusaddons.com/docs/add-iframe-content-in-elementor-timeline/). Use this when you want to embed a video, map, or external content directly inside a timeline entry instead of linking out to it.

- **Template** – Use an Elementor template inside the timeline item. Use this when a timeline entry needs a complex layout. For example, use a team member card, product feature block, or multi-column section that a single image cannot achieve. If you need tabbed navigation on the same page to organize your roadmap by phase or release quarter, the [Tabs Tours widget](https://theplusaddons.com/docs/tabs-tours-elementor-widget-settings-overview/) pairs naturally with the Timeline widget.

In the **Featured Image** section, add the image for the timeline item. From the **Image Resolution** section, choose the image size to balance display quality with page load performance.

In the **Link** field, add a URL to make the timeline item clickable. Use this when each event corresponds to a dedicated page, such as a blog post, case study, or product launch announcement.

Enable the **Display Button** toggle to add a call-to-action button to the timeline item. Use this when you want a clearly labeled action for visitors to follow from a specific event, separate from the item title link. For detailed button configuration, see [How to Add a Button in Elementor Timeline](https://theplusaddons.com/docs/add-a-button-in-elementor-timeline/).

From the **Advanced** tab within each item, use the **Content Alignment** dropdown to adjust the horizontal alignment of content inside the item.

From the **Section Alignment** section, move the item to the left or right side of the timeline. This is useful when you want alternating left-right placement that creates a more dynamic visual rhythm.

From the **In Animation Effect** dropdown, add an entrance animation so the item appears with motion as it scrolls into view.

From the **Top Offset Space** section, add top spacing to the item for specific screen sizes to fine-tune vertical positioning on mobile or tablet layouts.

After configuring one item, follow the same process for the remaining items. Click the **+ Add Item** button to add more timeline entries.

For content that benefits from an expand-and-collapse interaction rather than a scrolling timeline, the [Accordion widget](https://theplusaddons.com/docs/elementor-accordion-widget-settings-overview/) provides a collapsible layout that works well on the same page as your Timeline widget.

### Start / End Pin

From the **Pin Center Style** dropdown, select a predefined style for the terminal pins that appear at the top and bottom of the timeline. Use this when you want the start and end markers to visually stand out from the event pins along the timeline line.

![Timeline widget Start and End Pin settings in The Plus Addons for Elementor — pin style and icon options](https://theplusaddons.com/wp-content/uploads/2024/06/timeline-start-end-pin.gif)

From the **Select Icon** dropdown under the **Start Pin** tab, add a starting pin to the top of the timeline. Four options are available:

- **None** – No starting pin is added.

- **Icon** – Add an icon as the starting pin. Use this to mark the beginning of the timeline with a recognizable symbol, such as a flag, rocket, or play icon.

- **Image** – Add an image as the starting pin. Use this when you want to display a logo or branded visual at the very top of the timeline.

- **Text** – Add a text label as the starting pin, such as “Start”, a year, or a specific date. Use this when visitors need a clear written reference point at the beginning of the timeline. This matters most on timelines that span many years.

From the **End Pin** tab, configure the ending pin using the same four options. Setting a clearly styled end pin signals to visitors where the timeline concludes, which matters most on long timelines where the bottom of the page is not immediately visible.

## How to Style the Elementor Timeline Widget?

To style the Timeline widget, go to the **Style** tab.

**Loop Pin Style** – Controls the typography, color, and size of the pin titles and icons that appear along the timeline. Adjust this when you want the pins to use your brand color or match the heading style used elsewhere on the page.

![Timeline widget Style tab in The Plus Addons for Elementor — Loop Pin Style, Title Style, and Description options](https://theplusaddons.com/wp-content/uploads/2024/06/timeline-style.png)

**Title Style** – Manages the typography, color, and border for timeline item titles in both normal and hover states. Use this to keep timeline titles visually consistent with the rest of your page headings and to add hover effects when item titles are linked.

**Description / Content Style** – Controls the typography and color of the body text inside timeline items. Adjust this when the default text size or color does not match your site's reading style or content hierarchy.

**Button Options** – Styles the buttons added to timeline items, including background color, border, typography, and hover state. Use this when timeline buttons need to match the button style established elsewhere on the site for visual consistency.

**Pin Start / End Style** – Manages the color of the vertical divider line between events and the icon size and color for the start and end pins. Adjust this when you want to use a brand accent color for the timeline line, or when you want the terminal pins to be more visually prominent than the event pins.

**Extra Options** – Controls the gap between timeline items and the style of the timeline divider line. Use this when timeline items appear visually crowded or when the default spacing does not suit the density of your content.

Advanced options remain common for all Plus Addons widgets. [View Advanced Tab documentation](https://theplusaddons.com/help/plus-extras/) to explore all its options.

## Frequently Asked Questions

**Q: What should I do if the Timeline widget isn't showing up?**
A: If the Timeline widget from The Plus Addons for Elementor isn't appearing, ensure that both the Elementor FREE Plugin and The Plus Addons for Elementor plugin are installed and activated. Since this is a Premium widget, you also need the PRO version of The Plus Addons for Elementor. Check that the Timeline widget is activated by navigating to The Plus Addons u2192 Widgets and searching for 'Timeline'.

**Q: Can I use an Elementor template within the Timeline widget?**
A: Yes, you can use an Elementor template within the Timeline widget. This feature allows for greater customization, enabling you to integrate pre-designed elements into your timeline. Simply select the 'Template' option from the Content Type dropdown when adding a timeline item. This flexibility can enhance the visual appeal of your timeline significantly.

**Q: What are the best practices for styling the Timeline widget?**
A: Styling the Timeline widget effectively involves utilizing the options available under the Style tab. You can manage typography, colors, and hover states for titles and descriptions. Additionally, consider using the Loop Pin Style to customize the timeline pin's appearance. Proper styling enhances readability and user engagement, so pay attention to the spacing between items and the overall color scheme to maintain visual harmony.

**Q: Does the Timeline widget support adding buttons?**
A: The Timeline widget from The Plus Addons for Elementor supports adding buttons directly within the timeline items. You can enable this feature by toggling the Display Button option when editing a timeline item. Including buttons can provide users with a clear call to action, enhancing interaction with your timeline.

**Q: What content types can I add to a timeline item?**
A: You can add various content types to a timeline item, including Image, Iframe/HTML, and Elementor Template. This versatility allows you to enrich each timeline entry with different media, making your timeline more engaging. For example, using an Iframe can embed external content, while an Image can visually represent an event.

**Q: Are there any limitations with the Timeline widget?**
A: One limitation of the Timeline widget is that it is exclusively available through The Plus Addons for Elementor and requires the PRO version to access its features. Additionally, the widget's functionality is tied to the Elementor page builder, meaning it cannot be used with other page builders like Gutenberg or Divi. This specificity may limit users who are not utilizing Elementor.