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

Posts Timeline for Elementor Your blog posts on a timeline, grouped by month and date

Turn your blog into a timeline. This posts timeline widget for Elementor reads your posts, puts them in date order on a vertical line, and adds a month label and a date label wherever the date changes. Pick a Normal, Aside or Overlay layout, choose what each post shows and style the line, dots and labels. Looking for a free Elementor posts timeline? This one needs no code.

Try it free See the live demos
  • Free in Animation Addons
  • Month and date labels
  • Normal, Aside and Overlay
  • Works with any post type

Classic widget · Elementor 3 and 4Updated

Live demos

Blog timelines, live

Three timelines for three kinds of blog: the photo on the left, on the right and on top. Hover a title or a Read More button, or load the next posts.

ArolaxWorkJournalContact
Arolax Journal

Notes from the studio

Sep 26
Sep 18, 2026
Oct 26
Oct 2, 2026
Oct 9, 2026
Studio blog

Blog timeline, photo on the left

A journal on a black page. Posts run down a thin line, with an orange label for each month and a ringed dot for each date. Every post has a photo, a bold-start title, views and date, and an orange Read More button. On phones the photo moves above the text.

Click Load More

Set Layout to Aside and Aside Position to Left. Turn on Show Highlight with a Highlight Length of 3, and set Pagination to Load On Click, which needs Pro.

Maison FormeProjectsJournalVisit
Maison Forme Journal

Room by room

Aug 26
Aug 21, 2026
Sep 26
Sep 4, 2026
Sep 12, 2026
Interiors journal

Blog timeline, photo on the right

The same timeline with the photo on the right and no Read More button, so the page reads as a clean list of titles and dates. The line is white on a dark grey page.

Hover a title

Set Aside Position to Right and switch Read More off. Change the Line Color to white and set Order to ASC so the oldest post comes first.

NorthlightFilmsNotesAbout
Northlight Notes

From the edit suite

Jul 26
Jul 30, 2026
Aug 26
Aug 7, 2026
Film studio notes

Blog timeline, photo on top

The photo sits above the text, which suits longer stories with bigger pictures. The white Read More button turns black when you hover it.

Hover Read More

Set Aside Position to Top. In Meta Data choose View and Date and set Separator Between to a dash, then colour the button in the Read More style section.

Features

Key features of Posts Timeline

Every item below is a setting in the widget panel. No code needed.

Grouped by month and date

The widget reads each post’s publish date, so it lists chronological posts in Elementor on its own. It adds a month pill when the month changes and a date label with a dot when the day changes.

Posts from a query

Set Query Type to Custom, Archive or Related, pick a Source such as Post or Pages, and narrow it with Include, Exclude and Post Format.

Three layouts

Choose a Layout: Normal, Aside or Overlay. With Aside, Aside Position puts the photo on the left, on top or on the right, per device.

Date range and order

Use Date to show only posts from the Past Week, Past Month or Past Year, and sort them with Order By and Order.

Show only what you need

Turn Show Thumb, Show Title, Show Excerpt, Show Taxonomy, Show Meta, Show Rating and Read More on or off, and drag them into order.

Titles and meta

Set Title Length and the Title HTML Tag, bold the first words with Show Highlight, and pick Meta Data items with a Separator Between.

Style the timeline

In the Timeline style section, set the Dot Color, Dot Size, Outline Color, Line Color and Line Width, and style the Month and Day labels.

Pagination for long archives

Choose Pagination: Numbers, Previous/Next or both work in the free plugin. For an Elementor timeline with a Load More button, Load On Click and Infinite Scroll need Animation Addons Pro, which adds the script that loads the next posts.

Step by step

How to add a posts timeline in Elementor

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

  1. Install Animation Addons for Elementor from WordPress.org, then turn on Posts Timeline in the plugin’s Widgets list under Dynamic.

  2. Open your page in Elementor, search the panel for Post Timeline and drag it onto the page. This is how you show blog posts as a timeline in Elementor.

  3. Under Query, pick the Query Type and Source, then set Date, Order By and Order.

  4. Pick a Layout and Aside Position, and choose what each post shows in Settings, such as Show Thumb, Show Meta and Read More.

  5. Style the line, dots and labels in the Timeline style section, choose Pagination, check it on mobile and publish.

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

Questions about Posts Timeline

How do I show blog posts as a timeline in Elementor?

Install the free Animation Addons plugin, turn on Posts Timeline, search the Elementor panel for Post Timeline and drag it onto your page. It lists your posts in date order on a vertical line with month and date labels. No code is needed.

Is there a free Elementor posts timeline?

Yes. Posts Timeline is part of the free Animation Addons for Elementor plugin on WordPress.org and works with Elementor Free. Load On Click and Infinite Scroll pagination need Animation Addons Pro.

Is there an Elementor timeline of blog posts?

Elementor’s own widgets do not include a timeline of blog posts. Posts Timeline from Animation Addons adds one, built from your posts and their dates.

Is it a separate Elementor post timeline plugin?

No. It is one widget inside Animation Addons for Elementor, so there is no extra Elementor post timeline plugin to install. Turn it on in the plugin’s Widgets list.

How are the month and date labels made?

From each post’s publish date. A month label appears when the month changes and a date label with a dot appears when the day changes. You style both in the Timeline section.

Can I make a news timeline or post history timeline?

Yes. For an Elementor news timeline, filter the Source by category. For an Elementor post history timeline, show a whole archive and set Order to ASC so the story runs from the first post to the latest.

Can I show the newest posts first?

Yes. Set Order By to Date and Order to DESC. Choose ASC to tell a story from the oldest post to the newest.

Can I use pages or a custom post type?

Yes. Source lists your public post types, such as Post, Pages and any custom post type. You can include or exclude posts by term or author.

How do I add an Elementor timeline Load More button?

Set Pagination to Load On Click. The script that loads the next posts comes with Animation Addons Pro. Numbers and Previous/Next links work in the free plugin.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets and it works on the same page as atomic elements.

Animation Addons Pro · Elementor 4

Tell your story post by post

A free blog timeline for Elementor, part of Animation Addons.

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