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
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have The Plus Addons for Elementor plugin installed and activated.
- This is a Premium widget, and you need the PRO version of The Plus Addons for Elementor.
- 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:
How to Activate the Timeline Widget?
Go to
- The Plus Addons → Widgets
- Search the widget name and turn on the toggle.
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 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 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 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.
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. 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 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.
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 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.
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.
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 to explore all its options.
