The Post Horizontal Timeline widget is a stylish tool that lets you display your WordPress posts in a clean, horizontal timeline format. With its sleek carousel design, it emphasizes the post dates, making it easy to present your content in chronological order. This widget is perfect for showcasing your posts in a visually engaging and organized manner.
Let’s look at each of the options in the “Post Horizontal Timeline Widget” below.
Install Post Horizontal Timeline Widget for 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 “Post Horizontal Timeline”
- Hover over the widget in the search results and click install
- Add your “Post Horizontal Timeline” widget to any Elementor Page
General Settings #
Post List Image Size
Select the masonry grid image size.
- Medium Large
- Large
- Medium
- Thumbnail
- Full Size
- 1536*1536
- 2048*2048
Autoplay
Turn on or off the autoplay option.
Loop
Turn on or off the loop option.
Autoplay Hover Pause
Autoplay will pause on mouse hover.
Number of Items
Set the number of items to show in timeline.
Autoplay Timeout
Set the timeout on autoplay.
Transition Speed
Set the transition speed in milliseconds.
Button Text
Type the text to show in the button.
Intro Number of Characters
Set the number of characters to be displayed as intro.
Stage Padding Type
Add the padding to left or right of the timeline.
Center
Turn on or off the center option.
RTL
Turn on to make content Right to Left for right to left websites.
Open Link In
You can choose how to open link.
- Same Tab
- New Tab
Layout Settings #
Show Arrows
Show/Hide the navigation arrows.
Show Dots
Show/Hide the navigation dots.
Show Category
Show/Hide the post categories.
Show Date
Show/Hide the post date.
- Hide
- Before Icon
- After Icon
Show Time Ago
Show/Hide time ago field.
Show Title
Show/Hide the title element.
Disable Link in Title
It will disable the link in title.
Show Post Content
Show/Hide the post content.
Show Button
Show/Hide the button.
Button Type
Select the button type.
- Empty
- Icon
- Index
Show Pointer
Show/Hide the pointer.
Show Vertical Line
Show/Hide the vertical line.
Arrows Setting #
Left Arrow
Choose an icon to show as left arrow.
Right Arrow
Choose an icon to show as right arrow.
Posts Query Setting #
Posts Source
Choose any of the below options for your post source.
- Current Query Post
- Custom Posts
- Related Posts
- Manual Selection
Include By
Include the posts from different options given below
- Include Sticky Posts
- Get Only Sticky Posts
- Author
- Date
- Post Meta
- Most Viewed
- ID's from PHP function
- ID's from Post Meta
- ID's from Dynamic Field
- Products on Sale Only
- Up Sells Products
- Out of Stock Products Only
Include By Terms
Choose specific posts that you would like to include from your selection by adding rules.
- Include By Terms Relation
- Include Terms Children
Exclude By
Choose specific posts that you would like to exclude from your selection by adding rules.
- Terms
- Current Posts
- Specific Posts
- Author
- Posts Without Featured Image
- Posts with current category
- Posts with current tags
- Offset
- Avoid Duplicates
- ID's from Dynamic Field
To know more about post query setting, please visit our article on Advanced Post Selection
Posts Pagination and Filtering #
Pagination
Display the pagination for your post tile
- None
- Numbers
- Using Pagination Widget
Enable Post Filtering
When turned on you can use all the post-filter widgets like tab filters, load more and infinite scroll.
Filters Behaviour
- Ajax
- Ajax and URL change - Will change the URL each time the filter changes and add the possibility to use browser back navigation.
Learn more about the different Ajax filters that can work with the Post Tile in the links bellow:
Post Horizontal Timeline Widget Styling #
A lot of styling options are provided to control every aspect of the widget’s appearance. Modify the colors to match your site’s look and feel. You can customize every single detail to perfectly blend with your website design.
Item Styling #
Set the item layout, radius, border, alignment, and background.
Content Styling #
Style the content background, padding, border and min height.
Date Styling #
You can set the date color, typography, shadow, padding and alignment.
Bullet Styling #
In this section, set the bullet line color, height, size, background color, radius, margin and spacing.
Image Styling #
Set the image height, radius, opacity, border, and positioning.
Category Styling #
You can set the category background color, typography, padding, and radius.
Title Styling #
Intro Styling #
Here you can set the intro color, typography, and spacing.
Button Styling #
You can set the button typography, padding, border radius, background color, spacing, border, and button hover effect.
Nav Arrows Styling #
Set the horizontal and vertical positioning, radius, icon size, background and icon color of nav arrows.
Nav Dots Styling #
Set the nav dot size, color, spacing, and alignment.
Vertical Line Styling #
You can set the vertical line width, height, color and margin.
Pointer Styling #
Style the pointer width, height, color, shape and margin.
Usage Examples #
Here are some live use cases for the Post Horizontal Timeline Widget.
