Elementor Advanced Dynamic Timeline Design

Elementor Advanced Dynamic Timeline Design

Element.How also offers premium tutorials! Check them here:

Table of Contents

In this tutorial, I will show you how to create an advanced timeline design with Elementor.

On the right, we have the timeline events, and on the left we have the sticky animation of the years.

The years are populated automatically from the dates of all the events on the page.

On mobile, the years are at the top of the screen. The same animation is preserved.

See the demo here. Use the Mobile icon in the top right to see what it looks like on mobile.

Please note that the demo might be offset by one at the end when viewed here, through an iFrame*. Visit the demo page directly to see it working flawlessly.

Please purchase access and be logged in to access this template.

 

Here is a simplified version of the template:

Please purchase access and be logged in to access this template.

 

Features:

  • Dynamic: The years take care of themselves.
  • Flexible design: The events on the right are from a Loop Template, which could be designed any way you wanted. The colors and size of the years animation are customizable.
  • Polyvalent: You have events going back to the 19xx ? It still works, in that case you can choose what to do with the circle animation: either make it large enough to have the years within it, or make it smaller and more of a background progress element.
  • Mobile ready: Works on mobile too!
  • CPT Feed: Stay organized, and make it easy for your client to edit any event.
  • Future events: We are not using the "Published" date here, but a custom field for the dates, so we can also have timeline events in the future, or the whole timeline could be a "What's to come?" section.

We are going to be using a Custom Post Type (CPT) and the Elementor Loop Grid element for this.

If you have not worked with CPTs before, I suggest you start by watching this tutorial by Paul. The current tutorial presumes you will know how to create and use a CPT.

*The demo above might be a bit buggy in the iFrame because we are using the IntersectionObserver API here, which works really well, however not so much through an iFrame.

Let's get started!

First, let's create your CPT

This is a premium tutorial. Purchase access to unlock the full tutorial.

Access tutorial

$49/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial:
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 30 day money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2737 Elements right here:

Checkout the Elementor Addon Finder directly

8 Responses

    1. Greetings Chethan,

      I don't have a video tutorial. If you get stuck, just write to me, ideally with login info to your test website, and I will go in and help you set it up.

      Cheers!

  1. Great tutorial. If I want to do it in descending order to show the most recent ones first. What changes should I make?

    1. Hey Felipe!

      In the PHP code snippet for the custom query, change this line

      $query->set( 'order', 'ASC' );

      to this:

      $query->set( 'order', 'DESC' );

      and in the JavaScript part of the code, change this line:

      const uniqueSortedYears = [...new Set(years)].sort((a, b) => a - b);

      to this:

      const uniqueSortedYears = [...new Set(years)].sort((a, b) => b - a);

      Cheers!

  2. Thank you. Yes I had already set that up, but when I set it up like that, when I load the page I get the oldest year highlighted.
    Once I do some scrolling it locates the correct year but it ends up getting out of order and overlapping the bottom content of the page.

    1. Ah yes I see what you mean...

      To fix the overlapping part, use z-index and background colors on your sections above and below the timeline...

      For the rest, I will get you the proper code for this to work in reverse.

      Cheers!

Leave a Reply