The Post Horizontal Timeline widget by Atomic Addons shows your posts along a horizontal line. Each post has a numbered marker on the line, with its image on one side and its title, text and meta on the other. The row slides sideways with arrows or by itself. This guide covers adding the widget, choosing the posts and setting up the slider.
Enable the Post Horizontal Timeline Widget
Post Horizontal Timeline is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Post Horizontal Timeline. You can also open the Posts / Dynamic category.
- 4
Turn the Post Horizontal Timeline widget on.
- 5
Click Save Settings.
Add the Post Horizontal Timeline Widget
Post Horizontal Timeline works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Post Horizontal Timeline. The widget sits in the Atomic Addons Pro category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Layout
Open the widget and go to Content → Layout:
- 1
Skin: Style 1 (the default) switches sides at each post: the image is above the line for one post and below it for the next. Style 2 puts every image above the line and the text below. Style 3 puts the text above and the image below.
- 2
Columns: How many posts show at once, 1 to 6: 3 by default, 2 on tablets and 1 on phones.
- 3
Item Gap: The space between posts, 20px by default on every screen size.
- 4
Item Height(px): The height of each post, 300 to 1000px. The default is 400px: half for the image and half for the text.
- 5
Image Resolution: Which image size WordPress serves, Medium by default. Posts without a featured image show a placeholder.
Query
Content → Query decides which posts appear:
- 1
Item Limit: How many posts the timeline holds, 1 to 20. 6 by default.
- 2
Source: Posts is the default. You can also pick Pages or any other public post type on your site. Manual Selection shows only the posts you search for and pick under Search & Select. Current Query shows the posts of the page being viewed, such as a category archive or search results. The editor may not show them until you save and reload. Related works on a single post: it shows posts of the same type by the same author.
- 3
Limit: A number field, 6 by default. Item Limit above takes its place, so set the number of posts there.
- 4
Include / Exclude: Include By keeps only posts in the Terms you pick (categories, tags, formats or custom taxonomies) or by the Authors you pick. Exclude By leaves out terms, authors, the Current Post or posts you pick with Manual Selection.
- 5
Offset: Skips this many posts from the start of the list. 0 by default.
- 6
Date: All (the default), or only posts from the past day, week, month, quarter or year. Choose Custom to set a Before and an After date.
- 7
Order By: Date (the default), Title, ID, Author, Comment Count, Menu Order, Last Modified or Random.
- 8
Order: DESC (the default) shows the newest posts or the highest values first. ASC reverses the order.
- 9
Ignore Sticky Posts: Posts source only. Keeps sticky posts in their normal place instead of putting them first. On by default.
Only Featured Image Post leaves out posts without a featured image. Query ID is for developers: it gives the query a name that custom code can filter.
With Current Query, the page's own query decides which posts show and in what order. The include, exclude, date and order settings are hidden.
Additional
Content → Additional picks what each post shows:
- 1
Title: The post title, linked to the post. On by default.
- 2
Title HTML Tag: The title's markup: H1 to H6, div, span or p. H3 by default.
- 3
Show Text: A short text under the title. It is cut to the Text Limit (20 words by default). Manual excerpts are cut to the limit too and end with “...”. Strip Shortcode (on by default) removes shortcodes from text taken from the post content.
- 4
Author: “by” and the author's name, linked to their posts. Off by default.
- 5
Separator: The character between the meta items,
·by default. - 6
Date: The publish date. On by default. Human Different Time shows the age instead, such as “3 days ago”. Time Short Format shortens hours, minutes and seconds.
- 7
Reading Time: An estimate such as “2 min 30 sec read”. Off by default. Reading Speed sets the words per minute, 200 by default.
- 8
Item Wrapper Link: Makes the whole post clickable. A click opens the post in the same tab. The panel warns that the title link stops working while this is on.
Carousel Settings
Content → Carousel Settings controls how the timeline moves. Previous and next arrows always show. Visitors can also swipe or drag.
- 1
Autoplay: Moves the timeline on by itself. On by default.
- 2
Autoplay Speed: How long each position stays, in milliseconds. 5000 (5 seconds) by default.
- 3
Pause on Hover: Stops autoplay while the pointer is over the timeline. Off by default.
- 4
Slides to Scroll: How many posts each move advances, 1 by default. Use the device icon to set it for tablets and phones.
- 5
Center Slide: Keeps the current post in the middle. On by default. The panel suggests using an even number of Columns.
- 6
Grab Cursor: Shows a hand cursor over the posts, a hint that they can be dragged.
- 7
Loop: Starts again from the first post after the last one. On by default.
- 8
Animation Speed (ms): How long one move takes, 500 by default.
- 9
Observer: Turn it on when the timeline sits in a tab, an accordion or a popup that is hidden when the page loads.
The current post is highlighted: its marker takes the Active colors, and its image and text shift slightly toward the line.
Style the Post Horizontal Timeline
Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.
- Timeline — Spacing, plus a Line tab (Line Style: Solid by default, Dashed, Dotted, Double or Groove; width and color) and a Number tab (the numbered marker's color, background, border, radius, size and typography, with Hover and Active colors).
- Content — the text area's background, padding, margin, border and radius, with a Hover state.
- Image — border radius.
- Title — a hover underline style, color, hover color, typography, text shadow and spacing.
- Text and Meta — colors and typography. Meta also has spacing and a separator color.
- Navigation — the arrows in Normal and Hover states (color, background, border, radius, padding, size), and Arrows Horizontal Offset.
If no post matches the query, the widget shows nothing.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.