The Horizontal Timeline widget for Elementor enables you to present content in a chronological sequence, emphasizing dates along a sleek, scrollable timeline. This feature is ideal for showcasing updates, events, or any time-based information in an engaging and organized manner. With its customizable design, you can seamlessly integrate the timeline into your website’s aesthetic, enhancing user experience and content presentation.
Let’s look at each of the options in the Horizontal Timeline widget for Elementor below.
Elementor Horizontal Timeline Video Tutorial
Add a Horizontal Timeline Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Horizontal Timeline”
- Hover over the widget in the search results and click install
- Add the “Horizontal Timeline” widget to any Elementor Page
Source Settings
The Horizontal Timeline widget supports multi-source functionality, allowing you to populate dynamic, data-driven content from a variety of sources. These include items, posts, meta fields, JSON or CSV files, galleries, terms, users, menus, and even API integrations for ultimate flexibility.
Items
You can use the item repeater field as item source.
WordPress Posts
Display WordPress posts dynamically in horizontal timeline, including custom post types and fields for maximum flexibility.
Meta Field
Use Meta as an item source for your horizontal timeline to dynamically display and manage content from your Meta data.
JSON or CSV
Load your horizontal timeline with data from JSON or CSV files to easily manage and display structured content.
Gallery
You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.
Terms
Use Terms as a source for your horizontal timeline to dynamically display and manage taxonomy terms from your WordPress site.
Users
You can use WordPress Users as an item source for your horizontal timeline to display and manage dynamic content from your site’s user data.
Menu
Use your WordPress Menu as a source for the horizontal timeline to dynamically display and manage menu items in a visually engaging layout.
API Integrations
Integrate an API into your horizontal timeline to dynamically fetch and display data from external systems or services.
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 carousel.
RTL
Turn on for right to left websites.
Open Link In
Set to open link in
- Same Tab
- New Tab
Item Image Size
Select the image size for timeline items.
- Full
- Large
- Medium Large
- Medium
- Thumbnail
- 1536x1536
- 2048x2048
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 Dates
Show dates 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
Connected Widgets Settings let you create dynamic, interactive layouts with advanced features. Use remote control widgets for creative layouts or sync item-based widgets together for smooth integration.
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Items Setting
Manage the items of the horizontal timeline using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit 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 Color
Override colors for different elements of timeline.
Horizontal Timeline Widget Styling
There are a number of styling options that allow you to control every aspect of the widget’s design. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Item Styling
Set the item layout, radius, border, alignment, background, spacing, and shadow.
Content Styling
Set the content background, padding, border, height, and border radius.
Date Styling
You can set the date color, typography, shadow, padding, and alignment.
Bullet Styling
Here, you can set the bullet line color, height, size, color, radius, margin, spacing and border.
Image Styling
You can set the image height, radius, opacity, border, and positioning.
Label Styling
You can style the category background color, typography, padding, and radius.
Title Styling
Here, you can set the color, typography, and spacing of title.
Description Styling
You can set the description color, typography, and spacing.
Button Styling
You can style the button typography, padding, radius, background color, text color, spacing, and border.
Nav Arrows Styling
You can style the horizontal and vertical positioning, radius, icon size, color, background color, and border of nav arrows.
Nav Dots Styling
You can style the nav dots size, color, spacing, and alignment.
Vertical Line Styling
You can set vertical line width, height, color and margin.
Pointer Styling
You can style the pointer width, height, color, shape and margin.
Horizontal Timeline Design Examples For Elementor
Here are some live use cases for the Horizontal Timeline Widget.
Horizontal Timeline with colors overrides.
Horizontal Timeline with filters.
We’re excited for you to make the most of the Horizontal Timeline widget for Elementor! It’s a powerful tool for showcasing your story, updates, or events in a visually striking way. If you have any questions or need additional support, feel free to reach out.
