The “Interactive Banner Module” allows users to engage with a dynamic and visually appealing banner on a website. It may offer various interactive elements, such as buttons, sliders, animations, or other interactive elements, designed to capture the users’ attention and encourage them to take specific actions or explore the content further.

UABB Interactive Banner

With the Interactive Banner Module in the Beaver Builder, you can customize various elements of the banner, including background images, text, buttons, animations, and more. You can also add interactive features such as hover effects, click actions, and transitions to make the banner visually appealing and engaging for your website visitors.

Overall, you will be able to display all the necessary information with an image background in a few clicks.

Step 1 — Add the Banner widget to the page

Open your website’s dashboard and find the page where you want to place a banner. Open it with the Beaver Builder page builder and find the Banner widget using the search field at the top. Drag and drop it on the page, where you want it to be placed.

Step 2 — Choose the content and define the settings

In the left-side menu, you can notice the General tab.

Let’s go through the features that this section includes:

• Banner Image: Here you can select the background image from your media library;
• Banner Style: From this drop-down menu you can choose the banner style of your choice.
• Image Size: From this drop-down menu you can choose the size of the picture;
• Banner Height: You can control the banner height here, by default it depends on the selected image size;
• Title: The text you will enter here will be displayed as a title over the image.

Next, you will notice the Hover tab;

Let’s go through the features that this section includes:

• Description: If you need to add some explanation or notification to the banner – you can insert it here. This text will also be displayed over the image;
• Background Overlay Color: It refers to the color applied to the background of an element, such as an image to create an overlay effect.
• Icon Above Description: Select an icon from the ultimate library. You can also select the icon color and size here.
• Call To Action Below Description: The CTA is positioned below a description, If your banner is supposed to lead the user to a certain page – insert the link to it here.