An info banner shows a short headline until someone hovers it, then turns over and shows the detail on its back. It is a tidy way to fit an offer, a stat or a promise into a small block.
The Animated Service Boxes widget builds these with its Info Banner layout, and lets you choose which edge the back slides in from.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Animated Service Boxes ships only in The Plus Addons for Elementor Pro. With Pro deactivated the widget does not render at all, and the free plugin has no equivalent widget.
- Prerequisite: Elementor (free) installed and active.
- Widget to enable: go to The Plus Addons > Widgets, search for Animated Service Boxes and turn its toggle on.
- Prerequisite: the images you want to show, already in the Media Library. Every item has its own Featured Image; with none set, Elementor’s grey placeholder is used.
- Nothing else to switch on: no extension and no site-wide setting is needed for this widget.
Build the banners
- Edit the page with Elementor and drag in the Animated Service Boxes widget.
- In Content > Animated Service Boxes, set Main Style to Info Banner, then pick a Style — two pictures, Style 1 and Style 2, with Style 1 the default.
- With Style 1 selected you also get Hover Orientation: Top, Bottom, Left or Right, which is the edge the back content comes in from. The default is Left. Choose Style 2 and this control disappears.
- Turn Image/Icon on if the front of each banner should carry an icon, an image or a Lottie file.
- Open the Animated Service Boxes list — three items to start. In each one set the Title and, if you turned the switch on, pick Select Icon: None, Icon, Image or Lottie.
- Add a Sub Title for the second line on the front, and put the text that should appear on hover in Description — that one lives on the back.
- Set the Featured Image for the banner, and if you want a button, turn Button on and fill in Button Text and Button Link.
- In Content > Columns Manage, set Desktop Column, Tablet Column and Mobile Column — the option text is the number of banners in a row.
Use Content > Layout for the banner Height and the Text Alignment of the content inside.
Settings for this layout
| Setting | Where | What it does | Default |
|---|---|---|---|
| Style | Content > Animated Service Boxes | Two banner designs shown as pictures. | Style 1 |
| Hover Orientation | Content > Animated Service Boxes | Which edge the back content arrives from. Only shown with Style 1. | Left |
| Image/Icon | Content > Animated Service Boxes | Master switch for the per-item Select Icon field. | Hide |
| Image Resolution | Content > Animated Service Boxes | The image size the Featured Image is loaded at. | Full |
| Desktop Column / Tablet Column / Mobile Column | Content > Columns Manage | Banners per row, per device. | Column 4 / Column 3 / Column 2 |
How It Behaves
- The front carries Title and Sub Title; the back carries the Description. The widget renders two stacked blocks per banner — a front with the icon, title and sub title, and a back holding the description.
- The description is hidden until you hover. On load all three descriptions measured opacity 0. Hovering the first banner took its description to opacity 1 while the other two stayed at 0.
- Only the hovered banner turns. The others keep showing their front, so a row never flips as a group.
Limitations
- Hover Orientation belongs to Style 1 only. If you switch to Style 2 the control is hidden and you cannot pick the direction.
- An icon needs two switches. Choosing Icon in an item’s Select Icon field does nothing until Image/Icon is on for the whole widget.
- Text that must always be visible should not go in Description. That field is on the back of the banner and is invisible until hover, which also means it is not read at a glance on a touch screen.
Not verified
So you know exactly what has and has not been checked:
- Hover Orientation Top, Bottom and Right. Only the default Left was watched on the front end.
- Style 2. Only the default Style 1 was checked on the front end for this layout.
- Select Icon. Icon, Image and Lottie were not rendered with a real icon font or Lottie file, so nothing is claimed here about how they look.
- Image Resolution. Only the default Full was used; no other size was measured.
- Button Style 2 and Style 3. Only the default Style 1 button was rendered.
- The Style tab. No styling control was exercised, so this doc names the sections that exist and does not describe what each one does.
- Responsive behaviour. Nothing was measured at tablet or mobile width for this layout; every measurement here is from a 1200 px viewport.
Troubleshooting
Nothing happens on hover
Check that the items actually have a Description. With that field empty there is nothing to reveal on the back.
I cannot find Hover Orientation
You are on Style 2. Switch Style back to Style 1 and the control returns.
My icon does not show
Turn on Image/Icon in Content > Animated Service Boxes, then set Select Icon inside the item.
The banners are too small
Lower Desktop Column so fewer fit in a row, and raise Height in Content > Layout.
