In this guide, we will show you how to use the “Horizontal Timeline widget” on your Elementor website. The Horizontal Timeline widget allows you to display events, milestones, or progress steps in a chronological horizontal layout, creating a visually appealing and interactive experience for your visitors. It’s perfect for showcasing a company’s journey, project development stages, or historical events in a sleek, scrollable format. With customizable design options, date markers, and smooth navigation, the Horizontal Timeline widget makes it easy to guide users through a sequence of information while maintaining a clean, modern look.
Let’s explore the customization options available in the “Horizontal Timeline widget” for Elementor below.
Elementor Free Horizontal Timeline Tutorial Video
Add a Free Horizontal Timeline to Elementor
Add a Free Horizontal Timeline Widget to an Elementor Page
Elementor Horizontal Timeline Widget General Settings
Items Source
Items – Manually input content directly into the widget.
Posts – Pulls content from regular WordPress posts or a specified Custom Post Type.
WooCommerce Products – Retrieves data from WooCommerce product listings.
ACF Custom Field – Uses values from fields created with the Advanced Custom Fields plugin.
JSON or CSV – Imports content from an external JSON or CSV file.
Gallery – Displays images from a WordPress gallery.
Terms – Loads taxonomy terms (such as categories or tags).
Users – Pulls information from registered WordPress users.
Menu – Displays items from a WordPress navigation menu.
RSS – Retrieves data from an external RSS feed.
Instagram – Pulls posts or media from an Instagram feed (requires integration).
API Integrations – Connects and pulls data dynamically from an external API source.
Debug - Show Input Data
A troubleshooting toggle to display the raw data the widget is processing.
Autoplay
Controls whether the timeline slides automatically.
Loop
Makes the timeline continuously loop from the last item back to the first.
Autoplay Hover Pause
Pauses the automatic sliding when the user hovers over the widget.
Number of Items
Sets how many timeline items are visible at one time.
Autoplay Timeout (Milliseconds)
Defines how long (in ms) the timeline waits before sliding to the next item.
Transition Speed (Milliseconds)
Controls the animation speed of the slide transition.
Button Text
Sets the label for the button on each timeline item.
Stage Padding Type
Defines the padding or spacing at the beginning and end of the carousel track.
Center
Centers the active item within the viewport.
RTL (Right-to-Left)
Enables right-to-left display mode for RTL websites.
Open Link In
Sets whether the item link opens in the same browser tab or a new tab.
Item Image Size
Specifies which WordPress image size to use for the timeline items.
Show Arrows
Displays navigation arrows to move between timeline slides.
Show Dots
Shows pagination dots below the timeline for easier navigation.
Show Label
Toggles the visibility of the item’s label or category text.
Show Date
Controls the visibility and position of the date element (e.g., before or after the icon).
Show Time Ago
Displays a “time ago” indicator such as “3 days ago.”
Show Title
Shows the main title of each timeline item.
Disable Link In Title
Removes the clickable link from the item’s title.
Show Description
Displays the main descriptive text or excerpt of each timeline item.
Show Button
Shows the “Read More” button (as defined in General Settings).
Bullet Type
Defines the style of the marker on the timeline (icon, text, or dot).
Icon
Specifies the icon used as the bullet marker on the timeline (e.g., calendar icon).
Show Content
Controls the visibility of the entire content area, including title, description, and image.
Show Pointer
Displays a small connector (pointer) linking the content box to the timeline line.
Show Vertical Line
Shows the vertical connecting line between the content box and the timeline line.
Enable Remote Connection
Allows other remote control widgets to interact with and control this timeline.
Sync
Synchronizes the timeline’s sliding action with other connected widgets.
Show Debug
Displays information about remotely connected widgets for troubleshooting purposes. Recommended to turn off before the site goes live.
Title
The main heading for this timeline event.
Label
A sub-label or category tag for the item.
Icon
The icon is displayed as the bullet marker on the timeline.
Image
The featured image for this timeline item.
Date
The specific date for the timeline entry.
Description
The detailed content describing this timeline item.
Link
The URL associated with this specific item.
Button Text
The text for the button on this item. If left empty, it inherits the value from the General Settings.
Override Content Background Color
Option to customize the background color for this item’s content area.
Override Title Color
Option to set a custom color for the item title.
Override Description Color
Option to set a custom color for the item description.
Override Button Color
Option to set a custom color for the button.
Override Bullet Color
Option to customize the color of the bullet marker.
Override Bullet Line Color
Option to customize the color of the line connecting bullets.
Override Pointer Color
Option to set a custom color for the pointer linking content to the timeline.
Override Vertical Color
Option to customize the color of the vertical connecting line.
Elementor Horizontal Timeline Widget Style Settings
Item Layout
Sets the overall visual structure of the timeline item card.
Item Radius
Controls the border radius of the item’s corners.
Item Border Type
Defines the style of the item’s border.
Alignment
Sets the alignment of content inside the timeline item.
Item Background
Allows you to set a custom background color or image for the item.
Item Inside Spacing
Controls the inner padding of the item content in pixels.
Content Background
Sets a custom background color or image for the content area.
Content Padding
Defines the internal padding around the content on all sides.
Content Border Type
Specifies the border style for the content box.
Content Min Height
Sets the minimum height for the content box.
Content Border Radius
Controls the border radius of the content box corners.
Date Color
Sets the text color for the date element.
Date Typography
Controls the font style, size, and weight for the date text.
Date Shadow
Applies a text shadow effect to the date.
Date Padding
Defines the padding around the date element.
Date Alignment
Sets the alignment of the date text within its container.
Bullet Line Color
Sets the color of the vertical line that passes through the bullet.
Bullet Line Height
Controls the thickness or height of the bullet line.
Bullet Outer Size
Determines the size of the outer circle of the bullet.
Bullet Inner Size
Determines the size of the inner circle of the bullet.
Bullet Background Color
Sets the background color of the inner bullet.
Bullet Color
Sets the color of the bullet itself, usually the inner circle or dot.
Bullet Radius
Defines the border radius of the bullet’s corners, shaping it (typically a circle if values are equal).
Bullet Margin
Sets the spacing around the bullet, including top, bottom, left, and right margins.
Bullet Line Spacing
Controls the space between consecutive bullets along the timeline.
Bullet Border Type
Specifies the style of the border around the bullet (e.g., solid, dashed).
Image Height
Sets a fixed height for the image in pixels or other units.
Image Radius
Controls the border radius of the image corners.
Image Opacity
Adjusts the transparency of the image.
Image Grow On Item Hover
Enables a slight zoom or "grow" effect when the user hovers over the timeline item.
Image Position
Determines the alignment of the image within its container (e.g., center, top left).
Category Background Color
Sets the background color of the category label.
Category Color
Sets the text color of the category label.
Category Typography
Controls the font family, size, weight, line height, and other text properties of the label.
Category Padding
Defines the internal spacing around the label text (top, right, bottom, left).
Category Radius
Sets the border radius of the label corners, giving them rounded edges.
Button Typography
Controls all font properties of the button text, including font family, size, weight, and line height.
Button Padding
Sets the internal spacing around the button text (top, right, bottom, left).
Button Radius
Controls the border radius of the button corners.
Button Background Color
Sets the background color of the button in its normal state.
Button Background Color Hover
Sets the background color of the button when hovered.
Button Text Color
Defines the color of the button text in its normal state.
Button Text Color Hover
Defines the color of the button text when hovered.
Button Border Type
Sets the style of the button’s border in its normal state.
Button Border Hover Type
Sets the border style when the button is hovered.
Button Style
Determines the display style of the button (e.g., Inline, Block).
Button Hover Effect
Applies animation effects to the button on hover (e.g., Grow, Shrink).
Horizontal Position
Controls the left/right placement of the navigation arrows.
Vertical Position
Controls the up/down placement of the navigation arrows.
Nav Arrow Radius
Sets the border radius of the arrow container, shaping it (e.g., circular).
Nav Arrow Background Size
Determines the overall size of the arrow’s background container.
Nav Arrow Icon Size
Sets the size of the arrow icon inside the container.
Nav Arrow Background
Sets the background color of the arrow container.
Nav Arrow Icon Color
Sets the color of the arrow icon.
Nav Arrow Border Type
Defines the style of the border around the arrow container (e.g., solid, dashed).
Nav Arrow Border Width
Controls the thickness of the border on each side of the arrow container.
Nav Arrow Border Color
Sets the color of the arrow container’s border.
Button Hover Effect
Applies animation effects to the button on hover (e.g., Grow, Shrink).
Nav Dots Size
Sets the diameter or size of the navigation dots in pixels.
Dot Color
Defines the color of inactive navigation dots.
Dot Active Color
Sets the color of the dot corresponding to the currently active timeline item.
Dot Spacing
Controls the spacing or margin around the entire set of navigation dots.
Dot Space Between
Controls the horizontal space between individual navigation dots.
Dot Alignment
Determines the horizontal alignment of the dot pagination group (Left, Center, Right).
Pointer Width
Sets the width of the pointer shape.
Pointer Height
Sets the height of the pointer shape.
Pointer Color
Defines the color of the pointer.
Pointer Shape
Determines the shape and direction of the pointer (e.g., Triangle Up, Triangle Down, None).
Pointer Margin
Sets the spacing around the pointer element (top, right, bottom, left).
Horizontal Timeline Widget Design Examples For Elementor
Here are some live use cases for the Horizontal Timeline widget.
Horizontal Timeline With Journey Towards Success.
Horizontal Timeline with The World’s Tallest Buildings.
Thank you for using the Horizontal Timeline widget for Elementor! This elegant and interactive tool allows you to display events, milestones, or progress steps in a clean, horizontal layout, helping users visually follow your story or timeline with ease. Perfect for showcasing company history, project phases, achievements, or event schedules, it brings a dynamic and engaging element to your website. Designed for flexibility and responsiveness, it offers full customization options to perfectly match your site’s design and functionality. For support or inspiration, please don’t hesitate to get in touch or explore our demo.
