December 5, 2023

Walkthrough: Create a Horizontal Timeline in Elementor

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

Creating a horizontal timeline in Elementor is an innovative way to display content. This tutorial walks you through the process of using Elementor’s carousel widget to design a visually appealing and responsive timeline.

Horizontal Timeline in Elementor Preview
Horizontal Timeline in Elementor Preview


Please make sure you have the following installed and activated:

Why a Horizontal Timeline Benefits Your Users

Horizontal timelines are more than just a visual element on your website; they are powerful tools for storytelling and guiding your users through a narrative or process. Here are some reasons why a horizontal timeline can be exceptionally beneficial:

  • Clear Chronological Presentation
    Horizontal timelines excel in displaying events, processes, or histories in a clear, chronological order. For instance, a company might use a timeline to showcase its growth and milestones, from its inception to the present day. This visual representation helps users easily understand the company’s journey and evolution.
  • Interactive Learning Experience
    For educational websites, a horizontal timeline can turn a lesson into an interactive experience. Imagine a timeline showcasing the major events of World War II. As users scroll through the timeline, they can engage with different dates to reveal more information, making the learning process more dynamic and memorable.
  • Enhanced User Engagement
    In the realm of digital marketing, keeping users engaged is key. A horizontal timeline can captivate users, encouraging them to interact with your content longer. For example, a real estate website might use a timeline to depict the development stages of a property, engaging potential buyers by illustrating the project’s progress and future plans.
  • Improved Navigation and Clarity
    Timelines can also serve as navigational tools, allowing users to easily access different parts of your website based on time or sequence. A blog that uses a timeline format for its articles enables readers to navigate through posts chronologically, offering a more intuitive and user-friendly experience than a traditional list layout.
  • Visual Appeal and Storytelling
    Finally, horizontal timelines offer aesthetic value and storytelling capabilities. They can turn a simple series of events into a compelling story. For instance, a photographer’s portfolio displayed as a timeline not only showcases their work but also tells the story of their artistic growth and development over the years.

Horizontal Timeline in Elementor Summary

  • 0:00 – 0:27:
    Introduction to creating a horizontal timeline in Elementor using the carousel widget. Emphasis on flexibility in content (images, icons, videos). Mentions the seamless appearance on mobile devices and the need for a logical step-by-step process.
  • 0:27 – 1:09:
    Explains setting up the carousel. Involves adding a container for the carousel, setting it to full width, zeroing out margins and paddings, and removing a default third item to focus on two slides initially. Also includes a minor adjustment to navigation arrow visibility.
  • 1:09 – 2:10:
    Details on preparing slide one. Involves adding two child containers inside the slide for content stability. Emphasizes the importance of full-width settings for both the slide and child containers, and zeroing out margins and paddings for neat alignment.
  • 2:10 – 3:21:
    Adding content to the first child container in slide one. Involves placing a heading and text, centralizing them, and adjusting padding for visual spacing.
  • 3:21 – 4:07:
    Focus on the second child container. Unlike the first, no padding is added to ensure a seamless timeline appearance. A heading and a divider line are added and centered.
  • 4:07 – 5:09:
    Styling the year heading in the second child container. Includes setting a circular background, adjusting colors, and modifying layout settings for a circular shape. A divider line is adjusted to intersect with the year heading.
  • 5:09 – 7:59:
    The importance of two child containers is highlighted through an example. Explains how varying text lengths in one child container can disrupt the layout while using two maintains a seamless line regardless of content size.
  • 7:59 – 8:11:
    A quick check on mobile responsiveness. Adjustments to carousel settings are mentioned as a future step.
  • 8:11 – 9:26:
    Duplication of slide one to create a full timeline with several items. Suggests renaming each slide for clarity but notes this step was skipped in the tutorial for brevity.
  • 9:26 – 10:07:
    Adjusting carousel settings for seamless appearance. Involves zeroing out the gap between slides and discussing the flexibility of this approach compared to using a premium plugin or widget.
  • 10:07 – 11:29:
    Demonstrating the layout stability with different content types (like images) and highlighting the seamless line even with varied content lengths in the slides.
  • 11:29 – 13:00:
    Final adjustments to carousel settings. Includes disabling auto-play, infinite scroll, and modifying navigation settings. Emphasizes the need to adjust pagination and navigation for a cleaner look.
  • 13:00 – 14:06:
    Suggest adding padding to the parent container for a neater appearance on the desktop. Offers an alternative of using a boxed width instead of full width for the carousel.
  • 14:06 – 15:42:
    Final mobile responsiveness check and adjustments. Compromises in the mobile view are discussed, particularly regarding the seamless line and text alignment. Concludes with a recap of the process and emphasizes the versatility of this method in creating a horizontal timeline in Elementor.

Official Documentation

Horizontal Timeline in Elementor – Conclusion

This tutorial demonstrates a simple yet effective way to create a horizontal timeline in Elementor. With the flexibility to add various content types and the ability to fine-tune the layout, you can design a timeline that is both informative and engaging.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Walkthrough: Create a Horizontal Timeline in Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.