Atomic Element · Free
Drop in four ready milestones, add as many as you need from one Items panel, and style every number, year, title and description like any Elementor 4 element. Free, on Elementor Free.
The short answer
The Elementor timeline widget from Animation Addons is an Elementor 4 Atomic Element that lists milestones in a single vertical column. Each Timeline Item holds a Number, a Year, a Title and a Description as separate atomic children. You add, duplicate, rename and reorder items from one Items panel and style every part on its own.
Many "Elementor V4 compatible" addons are classic v3 widgets running inside the new editor. The Animation Addons for Elementor Timeline is a native Atomic Element styled with Classes and Variables.
| Plan | Free |
|---|---|
| Element type | Native Elementor 4 Atomic Element (open composite) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Child elements | Timeline Item > Timeline Number, Timeline Year, Timeline Title, Timeline Description (locked in place). Items also accept Heading, Paragraph, SVG, Button, Image, Divider, Flexbox and Div Block |
| Default content | Four items, 2022 to 2025 |
| Settings | Apply Preset, Items (add, duplicate, reorder, rename, remove), ID |
| Layout | One vertical column on every screen size; no horizontal or alternating mode |
| Limit | Out of the box it is a plain vertical list. The connecting line and dot markers come from a preset or your own styling |
| Title tag | H3, fixed (no tag setting); descriptions are paragraphs |
| Script | None. The element loads no JavaScript and no extra stylesheet |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with the Timeline and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.
A narrow column with a thin rail on the left, a dot beside each year, large accent-coloured years and two-line descriptions.
Quarters instead of years, a status pill under each title, shipped items in grey and planned items in full colour.
Big outlined numbers 01 to 05 on a dark background, no years, one sentence per step and a "Book a discovery call" button at the end.
A screenshot under each week's description and a "View the live site" button on the last milestone.
Times and session names on the left; a venue photo and map on the right that stay in view while visitors scroll.
Dark theme, white role titles, company and dates in small caps, one neon accent on the dots.
Features
Every option below is a real control in the Timeline panel or part of how the element renders. Nothing here needs custom code.
Apply Preset swaps the plain default for a finished timeline with its own rail, markers and typography. The plugin source names five designs: editorial rail, heritage split, roadmap track, case study and social. Presets are fetched from the Animation Addons preset library.
The Items list mirrors the real Timeline Items. Add a new item, duplicate one with its styles, drag to reorder, rename for the Navigator, or remove one. The last item can't be removed by accident.
Number, Year, Title and Description stay in place in every item, so a long timeline stays consistent, while each item still accepts extra elements.
Year and Number are plain text. Use "2024", "Q3", "Week 6", "09:30" or "Step 1". Hide either part from its Style panel when a step needs only a title and text.
Built on the atomic base
Why it mattersInstead of one fixed card per event, each milestone is an open container of real elements.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Download freeInstall and activate Animation Addons for Elementor, then open a page in Elementor with the Atomic Editor on.
Find Timeline in the Elements panel and drag it onto the canvas. It drops in with four milestones in a plain vertical list.
Open Presets and use Apply Preset to pick a design with a rail and markers, or keep the plain list and style it yourself.
Select each Number, Year, Title and Description and edit its text in the panel.
Open Items to add, duplicate, reorder or remove milestones. Drop an image or button into any item that needs one.
Style the parts with Classes, check the mobile view and publish.
Honest comparison
Elementor 4 has no native atomic timeline element. The realistic alternatives are stacking Flexbox containers by hand, or a classic v3 timeline widget from another addon.
| Feature | Flexbox and headings by hand | Animation Addons Timeline |
|---|---|---|
| Same structure in every milestone | Up to you | Number, Year, Title, Description locked in each item |
| Add or reorder milestones | Copy and drag containers | Items panel: add, duplicate, drag, rename, remove |
| Ready-made rail and markers | Build and style yourself | Apply Preset designs |
| Extra content per milestone | Yes | Yes, items are open containers |
| JavaScript | None | None |
| Requires Elementor Pro | No | No |
Compared with Elementor 4.3.3 (September 2026).
Who it's for
The people who get the most out of it, and what they use it for.
Putting their story on the About page.
Publishing a public roadmap.
Explaining their process before the first call.
FAQ
Install the free Animation Addons for Elementor plugin and drag the Timeline element onto your page. The Animation Addons Timeline starts with four milestones, each with a number, year, title and description. Add or reorder milestones from the Items panel and pick a design with Apply Preset. It runs on Elementor Free with the Atomic Editor on.
A freshly dropped Animation Addons Timeline is a plain vertical list, so there is no rail or dot yet. Apply a design from Apply Preset to get a styled line and markers. To build your own, style the Timeline Number as the dot, then enable the free Custom CSS extension on the Timeline and give its items a left border.
No. The Animation Addons Timeline is a vertical, single-column timeline on every screen size, and no preset changes that. For a horizontal story, build a row of Flexbox cards instead. The Timeline is best for histories, roadmaps and process steps that read from top to bottom, which also works well on phones.
The Animation Addons Timeline stays one column at every width, so it needs no separate mobile layout. Every part, including numbers, years, titles and descriptions, has responsive style controls, so you can shrink the year, tighten spacing or hide the number on phones from each part's Style panel.
Yes. Each Animation Addons Timeline Item is an open container. Alongside the Number, Year, Title and Description you can add an Image, Button, Heading, Paragraph, SVG, Divider, Flexbox or Div Block, then style each one from its own Style panel.
The Animation Addons Timeline outputs plain HTML with no script: each title is an H3 heading and each description is a paragraph, so search engines, AI crawlers and screen readers read every milestone in order. The title tag is fixed at H3, so place the Timeline under an H2 to keep your heading outline clean.
No. The Animation Addons Timeline loads no JavaScript and no stylesheet of its own; its look comes from Elementor 4's style system. Pro animation extensions only add script if you choose to use them, and Animation Addons Pro's Lazy Animation loads the animation library when an animated element nears the viewport.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Timeline on the same page or template.
A free, native Elementor 4 timeline with ready-made designs and every part styleable.
