How to Add an Advertisement Banner in Elementor WordPress?

Updated on September 30, 2024 by Editorial Team
Table Of Content

Do you want to add interactive Elementor banners to highlight important sections on your website? These banners not only enhance the aesthetic of the website but also provide an interactive experience for users.

With the Advertisement Banner widget from The Plus Addons for Elementor, you can create advertisement banners with different interactive styles.

Required Setup

Learn via Video Tutorial:

How to Activate the Advertisement Banner Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save.

Activate advertisement banner

Key Features

  • Multiple Styles – You can select from multiple pre-designed styles.
  • Multiple Background Hover Styles – You can choose from multiple background hover styles.
  • Button – You can easily add a button on the banner.
  • Multiple Content Hover Effects – You can add different content hover effects.

How to Use the Advertisement Banner in Elementor?

Add the Advertisement Banner widget to the page. 

Advertisement Banner

From the Style dropdown, you can select a pre-defined style.

Advertisement banner content

In the Banner Image section, you can add a background image to the banner.

Then from the Image Resolution dropdown, you can set the image size.

In the Title field, you can add a title to the advertisement banner.

Then in the SubTitle field, you can add a subtitle to the banner.

From the Hover Styles dropdown, you can add different background hover effects to the banner. Here you’ll find four options –

  • Blur Effect – This will add a blur effect to the background image on hover.
  • Simple – This will not add any effect.
  • Vertical – This will add a zoom or grow effect to the background image on hover.
  • Parallax – This will add a 3d parallax effect to the background image on hover.

Note: The Hover Styles is not available for the Style 8.

Button

By enabling the Button toggle, you can add a button on the banner. When enabled you’ll see different options to customize the button.

Advertisement banner button

From the Button Style dropdown, you can select from different pre-defined styles for the button.

Then from the Button Text field, you can edit the button text.

Note: For some button styles you’ll find an additional field to add different button text on hover.

You can add a URL to the button and title from the Button Link field.

From the Icon Font dropdown, you can select the icon library.

Then based on the selected icon library you’ll get an option to select an icon.

From the Icon Position dropdown, you can place the icon before or after the button text.

You can adjust the icon spacing from the button text from the Icon Spacing section.

Then from the Icon Size section, you can manage the icon size.

Note: For some button styles you’ll not find the icon options.

Advertisement banner demo

How to Style the Advertisement Banner Widget?

You’ll find all the styling options in the Style tab to style the Advertisement Banner widget.

Title Style – From here, you can manage the title typography and color for normal and hover states.

Advertisement banner style

Subtitle Style – From here, you can manage the subtitle typography and color for normal and hover states.

Button Style – You’ll see this option only when the Button toggle is enabled from the Content tab. From here you can manage the button style.

Animation Settings – From the Content Hover Effects dropdown, you can add different hover effects to the advertisement banner. Here you’ll find 8 effects – 

  • Grow – This will add a grow or zoom effect to the banner on hover.
  • Push – This will add a push effect to the banner on hover.
  • Bounce In – This will add a bounce effect to the banner on hover.
  • Float – This will add a floating effect to the banner on hover.
  • Wobble Horizontal – This will add a horizontal wobble effect to the banner on hover.
  • Wobble Vertical – This will add a horizontal wobble effect to the banner on hover.
  • Float Shadow – This will add a floating effect with a shadow at the bottom of the banner on hover.
  • Grow Shadow – This will add a grow effect with a shadow at the bottom of the banner on hover.
  • Shadow Radial – This will add a shadow at the bottom and top of the banner on hover.

Background Setting – From here you can add border radius and box shadow for normal and hover states on the background.

On Scroll View Animation –  This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport. You can learn more about this from here.

Advanced options remain common for all our widgets, you can explore all its options from here.

View Advanced tab tutorial.

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X