How to Create a Timeline in Elementor (Vertical, Horizontal & Post Timeline)

Elementor has no timeline widget of its own, in the free version or in Pro. To put a timeline on an Elementor page you add one from an addon. This guide uses the Timeline widget in the free Master Addons plugin, which covers vertical layouts, horizontal carousels, and timelines that build themselves from your blog posts.

Every screenshot below comes from Elementor 4.2.4 with Master Addons 3.2. Custom timelines, both layouts and the whole Style tab are free. Post Timeline needs Pro, and it is labelled where it comes up.

Can you make a timeline in Elementor without a plugin?

Technically yes, and it is more work than it looks. You would stack containers, give one a left border to fake the central line, absolutely position a dot on each row, and alternate left and right alignment with custom CSS. Then you would write the responsive rules yourself, because that alternating layout has to collapse to a single column on phones.

It falls over on maintenance. Adding a milestone in the middle means re-alternating every row below it by hand. A widget keeps the line, the markers, the alternation and the breakpoints as settings, so adding an entry is one click.

Search the widget panel for “timeline” on a stock Elementor install and exactly one result comes back, the Master Addons widget.

Install the plugin

From the WordPress dashboard go to Plugins → Add Plugin, search for Master Addons for Elementor, then install and activate. Open any page with Elementor and search the widget panel for timeline.

If nothing comes up after activating, check Master Addons → Widgets Library and make sure Timeline is switched on. Widgets can be disabled individually to keep unused code off the front end, which is worth doing anyway if you care about Elementor page speed.

How to add a timeline in Elementor, step by step

Step 1: Drag the widget onto the page

Edit a page with Elementor, search for Timeline, and drag it into a container. It arrives with three sample entries already filled in, so you can see what each field does before you change anything.

Step 2: Choose the timeline type

In the Content tab, open the Timeline section. The first dropdown is Timeline Type.

Custom Timeline is the free one. You type each entry yourself, which is what you want for a company history, a product roadmap or an event schedule, where the content is fixed and editorial.

Post Timeline is a Master Addons Pro feature. It reads your WordPress posts and builds the timeline from them, so publishing a post adds an entry on its own. There is a section on it further down.

Step 3: Choose vertical or horizontal

The second dropdown is Timeline Style.

Vertical runs down the page with cards alternating left and right of a central line. Horizontal lays the entries out side by side as a carousel with arrows. Both are free, and you can switch between them at any point without losing your entries.

One limit worth knowing now: Timeline Style only appears for Custom Timelines. Post Timelines are vertical only, and the dropdown disappears when you switch the type.

Step 4: Edit your entries

Under Items, each entry is a repeater row. Click one to open it.

Each row has a Content tab and a Media tab. The fields that matter:

• Show: Date or Custom Label. Date gives you a date picker; Custom Label lets you write anything, which is how you get “Q3 2026” or “Founded” on the line instead of a calendar date.
• Date Format: presets plus Custom. Custom takes a PHP date string, so F Y prints “June 2019” and keeps a milestone timeline from looking like a changelog.
• Link: makes the whole card clickable. Leave it off if the card’s text already contains a link, because a link inside a link is invalid HTML and browsers will drop one of them.
• The content box is a full editor. There is no separate title field, so the entry’s heading goes in here as a Heading 3.
• The Media tab adds an image to the card and sets its resolution.

Add Item creates a new row, the copy icon duplicates one, and rows drag to reorder.

Step 5: Publish and look at it

Four entries, dates formatted as month and year, flag icons on the markers, all of it on the free plugin.

The cards alternate sides and the dates sit opposite each one without you positioning anything.

Why the cards look blank until you scroll

Timeline cards start hidden and animate in when they scroll into view, and the point nearest your scroll position takes a focused state, which you style separately in the Points section.

So a timeline placed below the fold looks empty in a screenshot tool, in a PDF export, or in a page-speed audit that never scrolls. Scroll the page and the entries appear.

Making a horizontal timeline in Elementor

Set Timeline Style to Horizontal Timeline and the layout rotates: entries sit side by side, points sit above the cards on a horizontal line, and arrows scroll through them.

Arrows are configured in the Style tab under Navigation. Two controls, easy to mix up:

• Placement is inside or outside the carousel.
• Position is where they sit, from top-left through bottom-right.

Setting Position to a value that belongs to Placement drops the arrows into the top-left corner, on top of your first entry. Bottom-centre with outside placement is the safe pairing, and it is what the screenshot uses.

Horizontal suits four to six strong milestones above the fold, like a product launch sequence on a landing page. Past six entries the reader is clicking an arrow repeatedly to see content they cannot scan, and vertical wins. Vertical is also the safer bet on phones, where top-to-bottom reading is what people expect. Whichever you pick, check it against your responsive breakpoints before you ship, because the two layouts collapse differently.

Styling the line, the points and the cards

The Style tab has eleven sections: Carousel Items, Layout, Images, Posts, Cards, Arrow, Dates, Line, Points, Navigation and Patterns.

Line sets the central line’s colour and thickness. Cards handles background, border, shadow and padding. Dates and the typography controls match the entry text to your font system.

Points is the section worth spending time in. Its Type control picks what sits on each marker, and it has three state tabs: Default, Hover and Focused. Focused applies to the entry nearest the reader’s scroll position, so leaving it unstyled is what makes a timeline read as a flat list while the reader scrolls past it. Style all three.

Set Type to Icons and the marker takes an icon, which is what the screenshots here use. Check it on the front end straight away: if the marker renders as an empty circle, the icon has not loaded, and switching Type back to Default gives you a plain coloured dot that always works.

Building a timeline from your blog posts

Switch Timeline Type to Post Timeline and the panel changes completely. Instead of typing entries you describe which posts to pull, and the widget builds the timeline from them.

The controls worth setting:

• Show Title, Title Link and Heading Tag. Set the heading tag to H2 or H3 so post titles sit under the page’s H1 in the heading order. This is the same heading-order rule that matters when you build a blog page in Elementor.
• Show Image and Image Resolution put the featured image on the card.
• Date Format and Time Format. The default prints the time next to the date, which reads oddly on a milestone timeline. Set Time Format to none, or use a custom date format.
• Posts Per Page, Offset Post Count, Post Order and Order By.
• Category, Filter By Tag, Author and Posts to Exclude narrow the query, so one timeline can be “everything in News” and another a hand-picked set.
• Enable Links makes the whole card clickable. Same warning as the custom version: turn it off if the card content has its own links.

Because it reads posts directly, this version drops neatly into a Theme Builder archive or single template, and it updates itself when you publish. Post Timeline is part of Master Addons Pro.

Custom or post timeline: which one

If publishing a post should add an entry, use Post Timeline. If the entries are a story you wrote once, use Custom.

Where a timeline is worth using

• About pages. A vertical company history, with a Counter Up row above it for the headline numbers.
• Product pages. A horizontal roadmap of shipped features and what is next. Four to six entries, no more.
• Release notes. A post timeline filtered to one category, next to a Changelog widget.
• Portfolios and case studies. Dated entries with featured images, which is where the Media tab pays off.
• Event and course schedules. Custom labels instead of dates, so the line reads “Day 1, Day 2, Day 3”.

Seven things that make a timeline read better

1. Hold each card to two or three sentences. A timeline is a scanning format and full paragraphs defeat it.
2. Use custom labels for milestones. “2019” beats “Jun 17, 19” when the exact day does not matter.
3. Keep one heading level inside the cards. The content box has no title field, so set every entry’s heading to the same tag instead of mixing H2 and H4.
4. Switch to vertical past six entries, because horizontal scrolling gets tedious fast.
5. Style the Focused state. It is the one that tells the reader where they are.
6. Check your markers on the front end after choosing an icon. An empty circle means the icon did not load, and Default dots are the safe fallback.
7. Check it on a phone. The alternating layout collapses to one column, and long custom labels are the first thing to wrap badly.

Frequently asked questions

Related reading

• Elementor Timeline widget, the feature page with every control listed
• Timeline widget documentation
• How to create a blog page with Elementor
• SEO practices for Elementor pages
• Master Addons on WordPress.org