Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Free

Timeline Widget for Elementor A vertical timeline for events, history and project stages

Build an Elementor vertical timeline for your story. Add as many steps as you need, each with an icon or a number, an image, a date, a title and text. Pick a left-aligned layout or a center line layout. It is a free Elementor timeline widget and it runs on Elementor Free.

Try it free See the live demos
  • Free on WordPress.org
  • Two timeline styles
  • Icon or number steps
  • Image, date, title and text

Classic widget · Elementor 3 and 4Updated

Live demos

Three timeline designs, live

Three timelines on small sites: a studio history, a building process and a company history by year. Each step rises in as it enters the view (an Animation Addons Pro animation, not part of the free widget). Press Replay to see it again.

Arolax®WorkStudioContact
Our journey

From one desk to a studio of seventy

01
A designer reviewing a printed layout
Jan 01, 2021

Opened our first office in New York

Designer
We opened with two designers, one client and a rented desk near Union Square.
02
A brand system on a studio wall
Mar 14, 2022

First brand system shipped

Creative director
Our first full identity went live, with a motion kit the client team still uses today.
03
The new studio space with project boards
Sep 02, 2023

Moved into a bigger studio

Studio manager
Twenty people, a shared workshop and a wall for every project in progress.
Studio history

Studio history on a center line

The studio page of a design agency. Three milestones sit on either side of a center line. Each has a photo, a date, a title, a role and a short note. This is an Elementor timeline with images.

Press Replay

Set Style to Two and Image Position to Top. In each item of Timelines, set Step Type to Text and type 01, 02 and 03 in Step Text.

Halden WorksProjectsEngineeringCareers
Engineering

How a project moves

Every build follows the same three stages, so clients always know what comes next.

01
An engineer reviewing plans on site
Jan 01, 2021

Survey and design

Site engineer
We walk the site, check the ground and agree a design and a budget in writing.
02
A crew working on a structure
Jun 20, 2021

Build and inspect

Project lead
Crews build in stages. A named inspector signs off each stage before the next starts.
03
A finished building at dusk
Dec 10, 2021

Hand over

Client manager
You receive the drawings, the test records and a named contact for the first year.
Process steps

A project in three stages

The engineering page of a builder. A short intro sits on the left. Three stages follow on one dashed line, each with a photo, a date, a role and a note. This is a left aligned timeline.

Press Replay

Set Style to One and Title HTML Tag to H3. In the Style tab, under Step Line, set Line Style to Dashed.

Maison FormeProjectsStudioContact
About us

Where we started and where we work

2015
An early house project by the studio

Company establishment

Two architects open a small studio in Lyon and take on their first house.
2017
A library designed by the studio

First public building

A library wins the regional prize and the practice grows to ten people.
2020
Material samples in the studio lab

Opened a materials lab

A workshop for timber and stone samples, open to clients and suppliers.
2024
A recent project by the studio

Work in four countries

Projects in France, Spain, Portugal and Belgium, led from one studio.
Company history

Company history by year

The about page of an architecture studio. Four years, from 2015 to 2024, sit on a center line, each with a photo and a short note. The date field is left empty. It works as an Elementor company history timeline.

Press Replay

Set Style to Two and add four items to Timelines. Type each year in Step Text and leave Date empty.

Features

Key features of the Timeline Widget

Every feature below is a real setting in the widget panel. Nothing needs custom code.

Left or center line

Set Style to One for an Elementor left aligned timeline, or Two for an Elementor center line timeline that alternates sides. Two collapses to one side on tablets and phones.

Icon or number steps

In each item choose Step Type Icon or Text. Use Step Icon for a marker, or Step Text for 01, a year or any short label.

Images with every step

Add a Choose Image per item to get an Elementor timeline with images. Set the Image Size, and place the image on top or aside with Image Position.

Date, title and text

Each item has a Date with a Date Icon, a Title, a Sub Title and Content. Pick the Title HTML Tag for SEO.

Links on titles and images

Add a Link to an item and both its title and its image become clickable.

Line and indicator

Style the Step Line with a line style, thickness and colour. Show or hide the Indicator and set its width, height and gap.

Step styling

Change the step Size, Padding, Border Radius, colour and background, and move it with Step icon position-x.

Spacing and typography

Set the Space between items, the Content bottom space, and the colour, typography and spacing of date, title, subtitle and description.

Step by step

How to add a timeline in Elementor

Five steps, no code. The bold names are the labels in the Elementor panel.

  1. Install and activate Animation Addons for Elementor from WordPress.org, and turn on Timeline under Widgets.

  2. Open your page in Elementor, search the panel for Timeline and drag it onto the page.

  3. In Layout, choose the Style, the Title HTML Tag and the Image Position.

  4. Open Timelines, edit each item, and set its Step Type, Date, Title, Sub Title, Content and image. Add more items as needed. This is how to create a timeline in Elementor for a company history or a project timeline.

  5. Style the step, line, indicator and text in the Style tab, check it on mobile and publish.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about the Timeline Widget

How do I add a timeline in Elementor?

Install the free Animation Addons plugin, drag the Timeline widget onto your page and edit the items in Timelines. It works on Elementor Free.

How to create a timeline in Elementor for my history?

Add the Timeline Widget, set Style to Two for a center line, and type each year or date in its own item. Add a photo, a title and a short text per step.

Is the Timeline Widget free?

Yes. It is part of the free Animation Addons plugin on WordPress.org and works with Elementor Free and Elementor Pro. It is a free Elementor timeline widget.

Is there a horizontal timeline?

No. This widget lays steps out vertically. Style Two alternates cards left and right around a center line, and Style One keeps them on one side.

How do I make a center line timeline?

Set Style to Two in the Layout section. Cards alternate around a center line on desktop and fall back to one side on tablets and phones.

Can I use icons or numbers for the steps?

Yes. In each item set Step Type to Icon and pick a Step Icon, or set it to Text and type 01, a year or any short label in Step Text.

Can each step have an image and a link?

Yes. Each item has Choose Image and Link. With a link, the title and the image both open it. Set Image Position to top or aside.

Can I animate the timeline on scroll?

Entrance animations for items and images come from the Animation Addons Pro animation settings. The timeline itself works fully on the free plugin.

Can I build a project timeline with it?

Yes. Use one item per stage, with a date, a title and a short note. The Halden Works demo above shows an Elementor project timeline in three stages.

Should I use this or Posts Timeline?

Use this widget for history, process or event steps you write yourself. Use Posts Timeline to list your blog posts by month and date.

Animation Addons Pro · Elementor 4

Tell your story step by step

A vertical timeline with icon or number steps, images and two styles, free on Elementor Free.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license