The Post Horizontal Timeline is an innovative design widget that can be used on the Elementor Website to present chronological events or milestones in a visually appealing way. This layout shows posts along a horizontal axis, allowing users to scroll or navigate left to right to explore the sequence of events. The Post Horizontal Timeline is particularly effective for Storytelling or displaying Milestones, or Personal achievements, as it creates a clear and intuitive flow of information. By leveraging horizontal space, it can also enhance the overall user experience, making the content more accessible and engaging. In this guide, I will show how to add a Post Horizontal Timeline to your Elementor website with easy-to-follow steps. The guidelines are straightforward, ensuring everyone can follow them without any hassle.
Common Use Cases for Adding a Post Horizontal Timeline to Your Elementor Website
Project Roadmaps
Show the progress of a project with key milestones and deadlines in a visually appealing manner. This helps stakeholders understand the sequence and timing of different project phases.
Company History
Present a company's evolution over time, highlighting important events, product launches, and achievements. This can be a great way to visually communicate a brand's legacy and growth.
Event Schedules
Display the schedule of an event or conference, including key activities, sessions, and breaks. A horizontal timeline can help attendees quickly grasp the flow of the event.
Blog Series
Displaying blog posts in a chronological order allows readers to follow the progression of a story or theme over time. This is particularly useful for series that build on previous posts.
Product Development
Outline the development stages of a product from inception to launch, including major updates or feature releases. This helps users see how a product has evolved and what to expect in the future.
Educational Content
Provide a chronological overview of historical events, scientific discoveries, or other educational material. This can help users visualize the progression and context of the information being presented.
Research and Development
Show the timeline of research projects, including key findings, experiments, and progress over time. This can be valuable for academic or scientific websites.
Career Path
Outline the professional journey of an individual or team, highlighting key achievements, roles, and transitions. This can be useful for personal portfolios or company team pages.
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 Post 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 creating the Post Horizontal Timeline.
Step #2: Adding the Post Horizontal Timeline widget to your Elementor website
To create a Post Horizontal Timeline you need to install the Post Horizontal Timeline widget from the Unlimited Elements Widget library.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Post Horizontal Timeline"
Hover over the widget and click install
Then, in the Elementor editor, Find the Post Horizontal Timeline widget and drag it to the desired part of your page.
Step #3: Configure the Post Horizontal Timeline Widget
Configuring the Post Horizontal Timeline Widget is very easy. All the settings and options are self-explanatory, making it simple for every user to design a stylish and interactive horizontal timeline. Additionally, all the options in the Style settings are available to help you tailor the widget to your design needs.
Below are all the settings and options, each explained individually.
General Settings
Post Image Size
Select the post image size accordingly to the layout.
Autoplay
We can turn on or off the autoplay option.
Loop
Turn on or off the loop option for timeline.
Autoplay Hover Pause
Autoplay will pause the timeline over mouse hover.
Number of Items
Set the number of posts to display at a time.
Autoplay Timeout
Set the time for autoplay timeout.
Transition Speed
Set the transition speed in milliseconds.
Button Text
Add the post button text.
Intro Number of Characters
Set the number of characters for the post intro.
Stage Padding Type
Select the stage padding type to Left, Right or Both if needed.
Center
We can make the timeline center.
RTL
RTL option is for right to left websites only.
Layout Options
Show Arrows
We can Show or Hide the navigation arrows.
Show Dots
We can also Show or Hide the navigation dots.
Show Category
We can also Show or Hide the post category.
Show Date
Show the date before or after the icon, or we can hide it if needed.
Date Meta Field
Get date from post meta field or ACF field. Leave it empty to show post date by default.
Show Title
We can Show or Hide the post title.
Show Intro
We can Show or Hide the post intro.
Show Button
We can Show or Hide the post button.
Bullet Type
Select the bullet type to icon, index, or empty.
Icon
Choose the icon from the icon library, or upload svg icon.
Show Content
We can Show or Hide the post content. This will hides the whole content part.
Show Pointer
We can Show or Hide the pointer.
Show Vertical Line
We can Show or Hide the vertical line.
Arrows
If you have selected to show the arrows, then you can choose the arrow icons here.
Left Arrow
Choose an icon for left navigation arrow.
Right Arrow
Choose an icon for right navigation arrow.
Posts Query Settings
In the Post Query selection, we can select from a variety of post types, whether it’s regular posts, pages, products, or custom post types. We can even select multiple post types in one display.
Posts Source
Select the posts source to either Custom Posts, Current Query Posts, Related Posts or Manual Selection.
Post Types
Select the post type, we can choose custom post type as well. We have all the options to Include or Exclude the post terms if needed.
Max Posts
Set the maximum number of posts to display on the timeline.
Order
Select the posts order and order direction accordingly.
Query ID
Give your Query unique ID to been able to filter it in server side using add_filter() function.
Posts Pagination and Filtering Options
Add the AJAX-based faceted filter system, seamlessly empowering you to craft diverse layouts with ease. Take control by applying multiple filters, ensuring a super-fast and dynamic filtering experience tailored to your website needs.
Pagination
Select the pagination to show Numbers, Using Pagination Widget or None.
Enable Post Filtering
When turned on, you can use all the post filters widgets like tabs filter, load more etc with this grid
Filters Behaviour
Select the filter behaviour to either Ajax, Ajax and URL Change or Ajax, URL Change and Back Button.
Group
Select the group, and allow filtering group of widgets at once.
Disable Third Party Modifications
Disable other themes or plugins hooks and their code so they will not influence on the query.
Wrapping it Up!
Incorporating a Post Horizontal Timeline into your Elementor Website is an effective way to visually represent a sequence of events or milestones in a horizontal style. By arranging posts horizontally, users can easily navigate through the timeline, often with the help of interactive elements like sliders or swiping arrows, making it highly engaging and user-friendly. Additionally, Post Horizontal Timeline can be integrated seamlessly into responsive designs, ensuring it remains visually appealing and functional across different devices and screen sizes. Showing such timelines can enhance the storytelling aspect of your website, providing a clear and attractive way to present information.
