# With Illustration and Buttons

## Overview

The [Avonni Banner](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-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.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FuyhENfprFjwyDH79nUPq%2F2023-11-07_15-33-26%20(1).gif?alt=media&#x26;token=c082d68a-34b2-4cf0-b72f-37c881bdcef9" alt=""><figcaption><p>Live Result</p></figcaption></figure>

## Interactive Step-by-Step Configuration Guide

{% @arcade/embed flowId="Q5libBUKTVUpYqPkUrGJ" url="<https://app.arcade.software/share/Q5libBUKTVUpYqPkUrGJ>" %}

### 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

3. **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](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-video) (in the dialogContent zone)
   * Configure the Avonni Video component.
4. **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](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/navigate#overview) 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](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-button-dialog) for that.
3. **Redirect Button:**
   * The second button, "Product Details", when clicked, [navigates to a page](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/navigate#named-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.