The Post Hover Box widget by Atomic Addons shows three posts side by side as tall columns over one shared background image. The background starts with the first post's featured image; when a visitor points at another column, its post's image fades in and the column's details slide up. This guide covers adding the widget, choosing the posts and setting up what each column shows.
Enable the Post Hover Box Widget
Post Hover Box 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 Hover Box. You can also open the Posts / Dynamic category.
- 4
Turn the Post Hover Box widget on.
- 5
Click Save Settings.
Add the Post Hover Box Widget
Post Hover Box works on any page, post or saved template:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Post Hover Box. 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
Item Height(px): The height of the columns, from 200 to 1200px. Left empty, they are 600px tall on tablets and desktops.
- 2
Border: A border around the whole box: type, width and color.
- 3
Border Radius: Rounds the box's corners.
- 4
Image Resolution: Which image size WordPress serves for the background. Large by default; it fills the full width of the box, so Full can look sharper on wide layouts.
On tablets and desktops (768px and wider) the three posts sit side by side with a thin line between them, and only the hovered post's image shows behind them. On phones the posts stack, each with its own image and its text over the bottom of it.
Query
Content → Query decides which posts appear:
- 1
Source: Which posts to pick from. The list has your public post types, such as Posts (the default), Pages and, with WooCommerce, Products, followed by three special sources. Manual Selection shows only the posts you search for and pick in Search & Select; they can be of any post type. Current Query shows the posts of the page being viewed — a blog, category, tag, author or search results page — which is what an archive template needs; the editor may not show them until you save and reload. Related shows, on a single post, other posts of the same type by the same author; narrow it with Include By → Terms, and add Exclude By → Current Post to leave out the post itself.
- 2
Include / Exclude: Two tabs, hidden for Manual Selection and Current Query. Include By keeps only posts by the Authors you pick or in the Terms you pick (categories, tags, formats or custom taxonomy terms). Exclude By leaves out Authors, Terms, posts you pick with Manual Selection (in its own Search & Select field) or the Current Post.
- 3
Offset: Skips this many posts from the start of the list. 0 by default.
- 4
Date: All (the default), or only posts published in the Past Day, Past Week, Past Month, Past Quarter or Past Year. Custom adds a Before and an After date; both are inclusive.
- 5
Order By: Title, ID, Date (the default), Author, Comment Count, Menu Order, Last Modified or Random.
- 6
Order: DESC (the default) puts the newest or highest first; ASC reverses it.
- 7
Ignore Sticky Posts: With the Posts source only. On by default, so sticky posts keep their normal place instead of jumping to the top.
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 hook into through the atomel/query/{your-id} action.
The widget always shows three posts, one per column. The Limit field in this section does not change that number. With Pagination on, each page shows the next three posts.
With Current Query the page's own query decides which posts show and in what order, so the filters, Offset and order settings are hidden. Current Post works with the Related source, and with the Posts source while Ignore Sticky Posts is on.
Additional
Content → Additional picks what each column shows, from top to bottom:
- 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 Author: The author's name, linked to their posts. On by default.
- 4
Show Category: The post's categories as small labels above the title. On by default.
- 5
Date: The publish date. On by default.
- 6
Human Different Time: Shows the date as elapsed time, such as “3 days ago”, instead of the date itself.
- 7
Time Short Format: With Human Different Time on: shortens it, such as “5h ago” or “3d ago”.
- 8
Show Time: With Human Different Time off: adds the publish time, with a clock icon, after the date.
- 9
Reading Time: An estimate such as “3 min 20 sec read”, worked out from the post's word count. Off by default.
- 10
Reading Speed: The words per minute the estimate assumes, 200 by default.
- 11
Separator: The character printed between the meta items, “·” by default.
- 12
Pagination: Page numbers under the box, with previous and next arrows; each page shows the next three posts. They appear only when there are more than three posts. Off by default.
- 13
Item Wrapper Link: Makes the whole item clickable, opening its post in the same tab. Off by default.
The meta line — author, date and reading time — stays hidden until a visitor points at the column, then slides in with the category and title.
Style the Post Hover Box
Everything below is on the Style tab:
- Items — Content Padding inside each column, the Item Border Color and Border Width of the lines between columns, and the Overlay over the image: None, Background (the default, a gradient from the bottom) or Blend, with an Overlay Color and, for Blend, a Blend Type (Multiply by default).
- Title — color, hover color, typography, text shadow, text stroke and spacing.
- Category — spacing, and the labels' color, background, border radius, padding, space between and typography in Normal and Hover tabs.
- Meta — color, Author Color, Author Hover Color, typography, separator color and space between.
- Pagination — alignment and the page numbers' look, when pagination is on.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.