Timelines are a great way to visually organize content and guide your audience through a chronological journey. The Horizontal Timeline widget is an excellent tool for this purpose, allowing you to showcase events or updates in a sleek, scrollable layout that highlights key dates. In this tutorial, we’ll show you how to create a stunning Horizontal Timeline in Elementor. But we won’t stop there—we’ll take it up a notch by connecting the timeline with a background slider and content slider, making your design more dynamic and engaging.
Popular Use Cases for using Horizontal Timeline in an Elementor Website
Project Milestones
Visualize key phases, goals, and achievements in your project using a structured horizontal timeline. This layout simplifies tracking progress and fosters better alignment and understanding among team members and stakeholders.
Event Schedules
Organize events, activities, or meetings into a horizontal timeline for clarity. This visually appealing format ensures participants can quickly grasp schedules, promoting efficiency and keeping everyone on the same page.
Product Development
Map your product's journey, from initial concept to final launch, with a horizontal timeline. This method highlights progress and key stages, offering a consistent, professional view of your development process.
Company History
Showcase your brand’s evolution with a horizontal timeline, emphasizing major milestones and achievements. This visually engaging format tells your story chronologically, creating a compelling narrative for your audience.
Educational Progress
Illustrate academic goals and milestones with a clean horizontal timeline. This layout helps students or educators visualize objectives clearly, offering an organized roadmap for tracking educational progress effectively.
Portfolio Showcases
Display project timelines dynamically with a horizontal format. This approach visually emphasizes your work’s progression, showcasing your creativity and expertise in managing and delivering successful projects.
Roadmaps
Highlight organizational goals, updates, and future plans with a horizontal timeline. This visually engaging format fosters clarity, ensuring stakeholders can easily grasp your roadmap’s direction and milestones.
Travel Itineraries
Present detailed day-by-day travel plans in a horizontal timeline format. This structured layout offers a clear overview of trip schedules, helping travelers easily follow and anticipate their itinerary.
Step #1: Install and activate Unlimited Elements
Before getting started you will need to purchase Unlimited Elements pro from the link below to access the Horizontal Timeline widget.
Then follow these steps:
Go to Plugins → Add New → Upload Plugin.
Choose the zip file you downloaded, upload, and then click Activate.
Once activated, you’ll need to enter your license key.
Now that you have the plugin installed, it’s time to start using the Horizontal Timeline widget.
Step #2: Adding the Horizontal Timeline widget to your Elementor website
To create a horizontal timeline, install the Horizontal Timeline widget from the Unlimited Elements Widget library.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Horizontal Timeline"
Hover over the widget and click install
Step #3: Add Horizontal Timeline widget to your Elementor page
Now, in the Elementor editor, Find the Horizontal Timeline widget and drag it to the desired part of your page.
Choose the Items Source
Choose the Items Source from the dropdown. We can select Posts, Woo products, ACF repeater fields, JSON or CSV files, gallery, terms, users, menu items, and more. For our guide, we’ll use static data and leverage the items repeater to add our content.
General Settings
Autoplay
Enable the autoplay option for timeline.
Loop
Turn on the loop option for horizontal timeline.
Autoplay Hover Pause
Autoplay will pause on hover.
Number of Items
Set the number of items to display in timeline.
Autoplay Timeout
Set the autoplay time for timeline.
Transition Speed
Set the transition speed for horizontal timeline.
Button Text
Type text for button.
Intro Number of Characters
Set the number of character to display in intro.
Stage Padding Type
Set the stage padding type.
- None
- Both
- Left
- Right
Center
Turn on the center option for timeline if needed.
RTL
Enable the "RTL" (Right-to-Left) option if your layout requires it.
Open Link In
Set to open link to either in the "Same Tab" or in the "New Tab".
Item Image Size
Choose the "Item Image Size" according to your layout.
Layout Settings
Show Arrows
Show/hide the arrows on timeline.
Show Dots
Show/Hide the navigation dots.
Show Label
Show or hide the label.
Show Date
Show date on horizontal timeline.
- Hide
- Before Icon
- After Icon
Show Time Ago
Show or hide the time ago element on timeline.
Show Title
Show/hide the title.
Disable Link In Title
Disable the link in title.
Show Description
Show/hide the description.
Show Button
Show or hide the button.
Bullet Type
Select the bullet type.
- Empty
- Icon
- Index
Icon
Choose an icon to display.
Show Content
Show or hide the content part.
Show Pointer
Show pointer on horizontal timeline.
Show Vertical Line
Show vertical line on timeline.
Arrows Settings
Left Arrow
Choose icon for left arrow.
Right Arrow
Choose icon for right arrow.
Connected Widgets Settings
Enable Remote Connection
Widget Name for Connection
Choose this to "Auto Detectable", so it will automatically detect the remote widgets.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Timeline Items
Title
Type text for title.
Label
Type the label element.
Icon
Choose an icon to display.
Image
Choose an image to display.
Date
Type date for timeline item.
Description
Type text for description.
Link
Type or paste the URL to link with timeline item.
Button Text
Type text to show in button.
Override Colors
We can also override the colors, such as the background color, title color, button color, and more, if needed.
Now proceed to add content for the remaining timeline items and style them to match your overall design layout.
Step #4: Add the Content Carousel Widget
Now, let’s add the Content Carousel widget and include the desired content. Ensure the number of content items matches the number of items in the Timeline widget. Also, use the same connected widget settings as those in the Timeline widget.
Step #5: Add the Remote Arrows widget
Optionally, we can add remote control widgets to make unique layouts, Add the Remote Arrows Widget to the page, Set it to “Auto Detectable” and it will automatically connect with the Horizontal Timeline, we can style the remote arrows accordingly to match our website design.
Step #6: Add a Background Slider
Finally, to complete the design, let’s add a background slider and sync it with the Timeline. Ensure the number of slider items matches the number of items in the Timeline widget.
Enable Sync and Remote
Enable the Sync and Remote option to synchronize the background slider with the Timeline items.
Sync Group
Select the same Sync Group used in the Timeline's connected widget settings.
Remote Parent Name
Set this option to Auto Detectable.
Wrapping it Up!
By following this step-by-step guide, you’ve learned how to create an eye-catching Horizontal Timeline in Elementor and enhance it with interactive elements like a background slider and content slider. This combination not only adds visual appeal but also improves usability, helping you craft a memorable user experience. Take your website to the next level by experimenting with these techniques, and watch as your content truly stands out!
