With Illustration and Buttons

Overview

The Avonni Banner component is designed to capture user attention with compelling visual and interactive buttons.

Here's how to configure a banner with an illustration aligned to the left or right, a button that triggers a dialog to watch a video, and another button that redirects the user to a different page.

Live Result

Interactive Step-by-Step Configuration Guide

Adding the Banner

1. Place the Banner Component:

   • In the Experience Builder, drag the Avonni Banner component onto your page where you want the banner to appear.

2. Set the Media:

   • Find the option to add an image or illustration within the banner settings (CMS Media OR Media URL)

   • Upload or select the illustration you want to use and position it to the left or right side of the banner (using the Media Position attribute)

Configuring Buttons

1. Add a Button to Open a Video Modal:

   • Drag the Avonni Layout to create a layout of 2 columns to add buttons inside each column.

   • Drag the Avonni Button Dialog component.

   • Adjust the settings of the Button (Label, Variant, Alignment)

   • Label the button appropriately, such as "Watch Video".

   • Click on the Button to open the Modal.

   • Inside the modal, drag the video player using the Avonni Video component (in the dialogContent zone)
   • Configure the Avonni Video component.

2. Add a Button to Redirect to a Page:

   • Include an additional button in the other column of the previously created Avonni Layout banner.

   • Label this button with a call-to-action, like "Learn More".

   • Configure the button's Navigate interaction in the 'Link To' section by specifying the destination page for user redirection.

Example Implementation

Let's say you're creating a promotional banner for a new product launch:

1. Illustration:

   • You add an eye-catching illustration of the new product on the left side of the banner to draw attention.

2. Video Modal Button:

   • The first button says "Watch Demo". It's set to open a modal dialog where a product demo video is embedded. You can use the Avonni Button Dialog for that.
3. Redirect Button:

   • The second button, "Product Details", when clicked, navigates to a page with more information about the product.
4. Styling and Testing:

   • Style the banner and buttons to match your company's branding.

   • Test both buttons to ensure one opens the video correctly and the other redirects as expected.

5. Publish:

   • After confirming everything works smoothly, publish your changes.

Tips for Effectiveness

• Ensure the illustration is relevant and enhances the banner's message.

• The video should be short, engaging, and informative.

• The "Learn More" button should direct users to a page that continues the narrative from the banner.