The Hover Box widget by Atomic Addons fills a tall box with a grid of items. Each item has an icon, a sub title, a title, a short text and a button, plus its own background image. When a visitor points at an item, the whole box changes to that item's image. It suits service lists, destinations or project showcases. This guide covers adding the widget, building the items and setting up the grid.
Enable the Hover Box Widget
Hover Box is a Free widget and works with the free Atomic Addons plugin. A few of its settings carry a Pro badge and need Atomic Addons Pro; they are marked below. Switch the widget on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Hover Box. You can also open the Creative category.
- 4
Turn the Hover Box widget on.
- 5
Click Save Settings.
Add the Hover Box Widget
Hover Box works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Hover Box. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Hover Box Items
Open the widget and go to Content → Hover Box Items. Layout Style picks the look of the items: Style 01, the default, shows every part of each item at all times; Style 02 centers the items, drops their borders and shows only the title until the item is active or pointed at, when the icon, sub title, text and button slide in. Layout Style has a Pro badge and needs Atomic Addons Pro; the free plugin uses Style 01.
Below it, the Items list holds one entry per item, six by default. Click an item to open it. Its Content tab holds:
- 1
Icon: The item's icon, picked from the icon library or uploaded as an SVG. A star by default.
- 2
Title: The item's title. Dynamic tags are supported here and in the fields below.
- 3
Sub Title: A short label shown above the title.
- 4
Button Text: The button's label, Read More by default. Clear it and the item has no button.
- 5
Button Link: Where the button goes. Shown while the item has button text.
- 6
Background Image: The image that fills the whole box while this item is active. It starts as Elementor's placeholder image, which the widget treats as no image.
The Optional tab holds:
- 1
Title Link: Turns the title into a link. Shown while the item has a title.
- 2
Text: The item's text, in a rich text editor. It shows only while Show Text is on (see below).
- 3
Background Type: A color or gradient for the box while this item is active. As the note under it says, it applies only when the item has no background image.
Additional Settings
Content → Additional Settings sets up the box and the grid of items:
- 1
Height: The height of the box, 100 to 1200px. Without a value the box is 480px tall on phones, 560px on tablets and 640px on desktops.
- 2
Content Width: The width of the area that holds the items.
- 3
Content Position: Where the items sit inside the box: Default, one of the four corners, the middle of a side, or Center, the default. Pro badge: the free plugin keeps Center. On phones the items always sit in the normal flow of the box.
- 4
Content Gap: The space between the items and the edge of the box: Small, Medium (the default) or Large.
- 5
Columns: How many items share a row, 1 to 6: 3 on desktops and 2 on tablets and phones. Pro badge: the free plugin keeps these numbers.
- 6
Column Gap: The space between items: Small (the default), Medium, Large, Collapse for none, or Custom, which adds a Gap slider in pixels.
- 7
Select Event: What makes an item active: Hover, the default, when the visitor points at it, or Click. An item also becomes active when it gets keyboard focus. Pro badge: the free plugin uses Hover.
- 8
Active Item: The item that is active when the page loads, by its position in the list: 1 for the first item, the default. A number below 1 or above the number of items falls back to 1. Pro badge.
- 9
Image Size: Which image size WordPress serves for the background images, Full by default.
- 10
Alignment: Left, center, right or justified alignment of the text in each item, per screen size.
- 11
Show Title: Shows the titles. On by default.
- 12
Title HTML Tag: The titles' markup, H1 to H6, div, span or p. H2 by default.
- 13
Show Icon: Shows the icons. On by default.
- 14
Show Sub Title: Shows the sub titles. On by default.
- 15
Show Text: Shows each item's text. Off by default.
- 16
Show Button: Shows the buttons. Off by default, so turn it on to use the Button Text and Button Link of each item.
- 17
Item Match Height: Gives every item the height of the tallest one, so their borders line up. Off by default.
- 18
Image Effect?: Animates the background image when an item becomes active. Pick one of three in Effect: Effect 01 (the default) zooms the image in, Effect 02 zooms it out from a larger size and Effect 03 wipes it in from the left. Pro badge.
The active item keeps its state until the visitor moves to another one, so the box always shows one image. A darker overlay sits over the images so the white text stays readable; change it with Overlay Color under Style → Hover Box.
Style the Hover Box
Everything below is on the Style tab. Sections that belong to a part you turned off are hidden.
- Hover Box: the overlay color, the box's background color and border radius, and the items: background, padding, border, border radius (or an Advanced Radius value such as a blob shape, with a Pro badge) and box shadow, with Normal, hover and Active tabs.
- Icon: color, background, size, rotation, spacing, box shadow, border, border radius (or an advanced radius) and padding, with Normal, Hover and Active tabs.
- Title, Sub Title and Text: the color, hover color and active color, typography and, for the sub title and text, spacing.
- Button: color, background, border, border radius (or an advanced radius), padding and typography, with Normal, Hover and Active tabs, and the space above the button.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.