---
title: "How to Add an Advertisement Banner in Elementor WordPress?"
url: https://theplusaddons.com/docs/add-advertisement-banner-in-elementor-wordpress/
date: 2024-04-02
modified: 2026-09-18
lang: en
author: "Aditya Sharma"
description: "An advertisement banner is an image with a headline, a short line of supporting text and a button on top of it, plus a hover effect that tells visitors the..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Add-an-Advertisement-Banner-in-Elementor-WordPress_-1024x536.jpg
word_count: 797
---

# How to Add an Advertisement Banner in Elementor WordPress?

## 

- Advertisement Banner in The Plus Addons for Elementor Pro combines an image, a headline, supporting text, a button, and a hover effect in one widget.
- The Plus Addons for Elementor Pro offers 8 styles for Advertisement Banner, with Style 1 selected by default and Style 8 using its own hover animation instead of Hover Styles.
- Hover Styles includes Blur Effect, Simple, Vertical, and Parallax, while Content Hover Effects includes Grow, Push, Bounce In, Float, Wobble Horizontal, Wobble Vertical, Float Shadow, Grow Shadow, and Shadow Radial.
- The Plus Addons for Elementor Pro requires the widget to be active under The Plus Addons > Widgets; if Pro is deactivated, the banner disappears from the page.

An advertisement banner is an image with a headline, a short line of supporting text and a button on top of it, plus a hover effect that tells visitors the banner is clickable.

The **Advertisement Banner** widget in The Plus Addons for Elementor builds that in one widget: pick a layout, add the image and text, switch the button on and choose how the banner reacts on hover.

***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/banner-widget/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Advertisement Banner is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor, and a page that already uses it shows nothing where the banner was.- **Widget to enable:** Advertisement Banner, switched on under **The Plus Addons > Widgets**. Search for the widget name there and turn its toggle on.- **An image:** a landscape image works best, because the title, sub title and button sit on top of it.

![The Plus Addons Widgets screen with the Advertisement Banner widget toggle](https://theplusaddons.com/wp-content/uploads/2024/04/advertisement-banner.png)

https://www.youtube.com/watch?v=ac9R_tQnh1c

## Add the Banner and Its Content

- Drag the **Advertisement Banner** widget onto the page.- In the **Advertisement Banner** section, pick a layout from **Styles**. There are 8 styles, shown as picture tiles; **Style 1** is selected by default. **Import Presets**, above the tiles, loads a ready-made design you can edit.

![Advertisement Banner section with the Styles picture tiles highlighted in the Elementor editor](https://theplusaddons.com/wp-content/uploads/2026/09/advbanner-styles.webp)

- Add your picture in **Banner Image** and pick a size in **Image Resolution** (default **Full**).- Type the headline in **Title** and the supporting line in **Sub Title**.- Choose a background effect in **Hover Styles**: **Blur Effect** (default), **Simple**, **Vertical** or **Parallax**.

![Banner Image, Image Resolution, Title, Sub Title and Hover Styles controls in the editor](https://theplusaddons.com/wp-content/uploads/2026/09/advbanner-content.webp)

> ***Hover Styles** is not shown when **Style 8** is selected. Style 8 has its own hover animation instead.*

## Add the Button

- Open the **Button** section and switch **Button** on.- Pick a **Button Style** (Style 1 to Style 22; default **Style 7**), then set **Button Text** and **Button Link**.- For **Style 4**, **Style 11** and **Style 14** you also get **Hover Text**, a second label used by the button's hover animation.- If the style has an icon, choose the library in **Icon Font**, pick the icon, and set **Icon Position**, **Icon Spacing** and **Icon Size**. Some styles do not show every icon option.

![Button section with Button Style set to Style 4, Button Text, Hover Text and Button Link](https://theplusaddons.com/wp-content/uploads/2026/09/advbanner-button.webp)

![Animated demo of Advertisement Banner designs reacting on hover](https://theplusaddons.com/wp-content/uploads/2024/04/Advertisement-Banner-Demo.gif)

## What You See on the Page

With **Blur Effect**, the background image goes soft when the pointer is over the banner, while the text stays sharp.

![The same banner at rest and on hover with Blur Effect, the image blurred on hover](https://theplusaddons.com/wp-content/uploads/2026/09/advbanner-result-blur.webp)

With **Vertical**, the background image zooms in on hover. **Simple** leaves the image unchanged. **Parallax** tilts the banner in 3D as the pointer moves over it.

![The same banner at rest and on hover with Vertical, the image zoomed in on hover](https://theplusaddons.com/wp-content/uploads/2026/09/advbanner-result-vertical.webp)

**Style 8** works differently: at rest only the title and sub title show near the bottom. On hover the text moves up and a bar with the button slides into view.

![Style 8 at rest with only the title and sub title, and on hover with the button bar revealed](https://theplusaddons.com/wp-content/uploads/2026/09/advbanner-result-style8.webp)

## Style the Banner

Everything visual is on the **Style** tab: **Title Style**, **Sub Title Style**, **Button Style** (only when the button is on), **Animation Settings**, **Background Setting** (border radius and background, for Normal and Hover) and **On Scroll View Animation**.

To animate the whole banner, open **Animation Settings** and choose a **Content Hover Effects** option: **Grow**, **Push**, **Bounce In**, **Float**, **Wobble Horizontal**, **Wobble Vertical**, **Float Shadow**, **Grow Shadow** or **Shadow Radial**.

![Style tab, Animation Settings, with Content Hover Effects set to Grow](https://theplusaddons.com/wp-content/uploads/2026/09/advbanner-content-hover.webp)

This effect applies to the whole banner, not just the image. With **Grow** the image, title, sub title and button all scale up together.

![The same banner at rest and on hover with Grow, the whole banner scaled up](https://theplusaddons.com/wp-content/uploads/2026/09/advbanner-result-grow.webp)

## How It Behaves

- **Hover Styles** moves only the background image. **Content Hover Effects** moves the whole banner.- In **Style 1**, the sub title appears *above* the title, even though **Title** comes first in the panel.- The button is off by default. Until you switch **Button** on, its options are hidden.

## Limitations

- Advertisement Banner needs The Plus Addons for Elementor Pro. If Pro is deactivated, the banner disappears from the page.- In our test on a clean page, the default **Button Style**, **Style 7**, showed its icon as an empty box, because no Font Awesome stylesheet was loaded. Clearing the icon or switching **Icon Font** did not remove the box.

## Troubleshooting

### The button shows an empty square instead of an arrow

Choose a different **Button Style**. In our test, **Style 1** (text with an underline) and **Style 4** (a solid pill) rendered without the empty icon box.

### I can't find Hover Styles

You are on **Style 8**, which hides it. Pick any of Style 1 to Style 7 to get the option back.

### My title and sub title look swapped

That is how **Style 1** lays them out: the sub title sits above the title. Swap the text between the two fields, or try another style.

### The banner is missing on the live page

Check that The Plus Addons for Elementor Pro is active and that **Advertisement Banner** is switched on under **The Plus Addons > Widgets**.

## Related Docs

- [How to Create an Elementor Background Overlay?](https://theplusaddons.com/docs/create-an-elementor-background-overlay/)- [How to Use Text Content with Hover Card in Elementor?](https://theplusaddons.com/docs/use-text-content-with-hover-card-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding an advertisement banner in Elementor WordPress?**
A: The key requirement is The Plus Addons for Elementor Pro, because Advertisement Banner is only available in the Pro plugin. The page also says the widget must be switched on under The Plus Addons > Widgets, or it will not appear in the editor. A landscape image works best since the title, sub title, and button sit on top of the image.

**Q: How do I make a clickable banner with image, text, and a button in Elementor?**
A: The Advertisement Banner widget in The Plus Addons for Elementor builds that layout in one place: image, headline, supporting text, and button on top of the banner. It also adds hover behavior so visitors can tell the banner is clickable. That matters because the hover effect is part of the signal, not just decoration.

**Q: Which banner style should I use if I want the text and button to behave differently on hover?**
A: Style choice changes how much control you get over hover behavior. Style 1 to Style 7 use Hover Styles like Blur Effect, Simple, Vertical, or Parallax, while Style 8 hides Hover Styles and uses its own hover animation. If you want a standard hover effect on the background image, avoid Style 8.

**Q: Why is Hover Styles missing in my Advertisement Banner widget?**
A: Hover Styles disappears when Style 8 is selected. That style has its own hover animation instead of the usual Blur Effect, Simple, Vertical, or Parallax options. If you need those background-image hover controls back, switch to any style from Style 1 to Style 7.

**Q: Why does my advertisement banner disappear on the live page?**
A: That usually happens when The Plus Addons for Elementor Pro is deactivated. The page says the banner disappears from the page if Pro is off, and an existing page using it shows nothing where the banner was. Also check that Advertisement Banner is switched on under The Plus Addons > Widgets.

**Q: Why does the button show an empty square instead of an arrow?**
A: That empty square points to an icon loading issue with the default Button Style 7. In the page test, it happened because no Font Awesome stylesheet was loaded. A practical workaround is to pick a different Button Style such as Style 1 or Style 4, which rendered without the empty icon box.