Components for Flows Get It on the AppExchange

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.

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