With Illustration and Buttons


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.

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.

Last updated