---
title: "How to Add an Info Banner in Elementor?"
url: https://theplusaddons.com/docs/add-an-info-banner-in-elementor/
date: 2024-05-29
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "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,..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-an-Info-Banner-in-Elementor_-1024x536.jpg
word_count: 907
---

# How to Add an Info Banner in Elementor?

## 

- Animated Service Boxes builds an Info Banner layout in The Plus Addons for Elementor Pro, and Style 1 exposes Hover Orientation with Top, Bottom, Left, or Right while Style 2 hides that control.
- The widget starts with three items, and each item uses Title, Sub Title, Description, Featured Image, and optional Button Text and Button Link fields.
- The front of each banner shows the icon, title, and sub title, while the back holds the Description and stays hidden until hover; only the hovered banner turns.
- The widget needs Elementor installed and active plus The Plus Addons for Elementor Pro activated, and it does not render at all when Pro is deactivated.

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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-animated-service-boxes/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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](https://wordpress.org/plugins/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.

![Info Banner: the hovered banner shows its Description, the other two show Title and Sub Title](https://theplusaddons.com/wp-content/uploads/2026/09/animatedservice-result-info-banner.webp)

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**.

## Related Docs

- [Animated Service Boxes Widget: Settings Overview](https://theplusaddons.com/docs/animated-service-boxes-widget-settings-overview/)- [How to Add an Article Box in Elementor?](https://theplusaddons.com/docs/add-an-article-box-in-elementor/)- [How to Create an Expandable Service Box in Elementor?](https://theplusaddons.com/docs/create-an-expandable-service-box-in-elementor/)