Free Elementor Timeline Widget: Vertical and Horizontal Timelines
Timeline is a free Master Addons widget for Elementor that lays out dates and events along a connecting line. Build a Custom Timeline by hand, with a date or label, rich content, an image and a link for each item, and show it vertically or as a horizontal carousel. With Master Addons Pro you can also build a Post Timeline straight from your blog posts. It suits company histories, roadmaps, event schedules and news archives.
Custom Timeline (free) or Post Timeline (Pro)
Custom Timeline is the free option. Each item gets a date, which you can swap for a custom label like “Phase 1”, a rich text content area, an image and an optional link for the whole card. Items can also have their own point and color settings. Post Timeline, part of Pro, builds the timeline from your posts: filter by category, tag or author, exclude specific posts, set the order and offset, and choose whether to show the title, featured image and excerpt.
- Custom Timeline: a date or custom label, content, image and link for each item.
- Per-item styling for the point, card and date colors.
- Post Timeline (Pro): category, tag and author filters, excluded posts, offset and order.
- Post cards can show the title, featured image, excerpt and a read more link.
Vertical timeline or horizontal carousel
The Vertical Timeline stacks cards along a center line. Align them left, center, right or as an overlay, and reverse the card positions with one switch. The Horizontal Timeline, available for Custom Timelines, turns the items into a carousel. Pick a standard slide or Coverflow layout, turn on autoplay and loop, and choose navigation with arrows, dots, a fraction counter or a progress bar.
- Vertical alignment: left, center, right or overlay, with reversible card positions.
- Horizontal carousel with Carousel or Coverflow layouts, autoplay and loop.
- Navigation with arrows, dots, fraction, progress bar or a scrollbar.
- Horizontal and vertical spacing controls for the cards.
Line and point styling
Style the line with a background color, a progress color, thickness and a border. Points can be plain dots, icons, images, numbers or letters, and each has Default, Hover and Focused styles for size, background color, point color and text shadow. That way the milestone a visitor is looking at stands out from the rest.
- Line background, progress color, thickness and border.
- Five point types: dots, icons, images, numbers or letters.
- Default, Hover and Focused states for every point.
Card and date styling with animations
Cards get padding, margin, content padding, border radius and separate title and content typography. Their color, background, box shadow and text shadow can change across the Default, Hover and Focused states. Turn on Animate Cards to reveal each card as it scrolls into view. Dates have their own typography, padding, margin, text shadow and colors for all three states.
- Card spacing, radius and typography controls.
- Default, Hover and Focused styles for cards and dates.
- Animate Cards to reveal items as they scroll into view.
Custom Timeline vs Post Timeline
Elementor has no timeline widget in either its free or Pro version, so without an addon you would build one from columns, dividers and custom CSS. Here is how the two Timeline types compare.
| Custom Timeline | Post Timeline | |
|---|---|---|
| Price | Free | Master Addons Pro |
| Content | Items you add in the panel | Your published posts |
| Updates | When you edit the items | Each time you publish a post |
| Layouts | Vertical or horizontal carousel | Vertical |
| Each entry shows | Date or label, content, image, link | Title, featured image, date, excerpt, read more |
| Best for | Histories, roadmaps, schedules | News archives, release notes |
For a full post grid next to your timeline, use the free Blog widget. To show the numbers behind your milestones, add Counter Up.
How to add a timeline in Elementor
These steps build a free Custom Timeline. The widget starts with three sample items, so you can see the layout before you change anything.
- In Elementor, search the widget panel for “Timeline” and drag the Master Addons widget onto the page.
- Keep Timeline Type on Custom Timeline and choose Vertical Timeline or Horizontal Timeline.
- Open each row under Items and set the date or a custom label, the content, an image and a link.
- Click Add Item for more milestones and drag the rows to reorder them.
- For a horizontal timeline, set the Navigation and Carousel Settings.
- Style the cards, dates, line and points in the Style tab, then publish.
Our timeline tutorial goes through each setting with screenshots.
Frequently Asked Questions For Timeline
Should I use the Post Timeline or Custom Timeline?
Use Custom Timeline, which is free, when you want to control every date and entry, like an Our History page or a roadmap. Use Post Timeline, part of Master Addons Pro, when the timeline should update itself from your blog posts, like a news archive.
How does the "Focused" state work?
The Focused state styles the item that is currently active as visitors scroll through the timeline or move through the carousel. Give it a different card background, date color or a larger point so the current milestone stands out.
Is the Elementor Timeline widget free?
Yes. Timeline is a free widget, including the Custom Timeline type and both vertical and horizontal layouts. The Post Timeline type, which builds entries from your blog posts, needs Master Addons Pro.
Can I link an entire timeline card to a page?
Yes. Each Custom Timeline item has a Link field that makes the whole card clickable. Post Timelines have an Enable Links switch that links each card to its post. Avoid other links inside a linked card, since links within links are not allowed.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
