Components for Flows Get It on the AppExchange

With Content centered

Overview

In the Avonni Banner component, you can create a visually engaging and interactive experience by incorporating a two-column layout within the content section. This layout will house two distinct buttons — an Avonni Button Dialog in the first column for modal interactions and a standard Avonni Button in the second column for external actions. Both buttons will be horizontally centered within their respective columns for a clean, symmetrical appearance.

Interactive Step-by-Step Configuration Guide

Drag the Avonni Banner component,

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

  • 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)

Preparing the Content Layout

  1. Insert Avonni Layout Component:

    • In the Avonni Banner's content section, place an Avonni Layout component configured to two columns.

Configuring Buttons

  1. Add Avonni Button Dialog to the First Column:

    • Drag an Avonni Button Dialog component into the first column of the layout.

    • Adjust the button settings to center it horizontally within the column.

  2. Insert Avonni Button to the Second Column:

    • Place an Avonni Button component into the second column.

    • Like the first button, set the horizontal alignment to center, ensuring it matches the layout of the Button Dialog in the opposite column.

Tips for Effectiveness

  • Ensure both buttons are clearly labeled with calls to action that are straightforward and compelling.

  • The horizontal centering of the buttons provides a tidy and professional look that is visually appealing and easy to navigate.

  • The two-column layout with centered buttons allows for a balanced design, encouraging user interaction with both options.

Conclusion

By utilizing an Avonni Layout with two columns and center-aligned buttons within the Avonni Banner component, you can create a focused and interactive section that prompts users to engage with your content. This arrangement not only enhances the visual appeal but also serves functional purposes, directing users toward desired actions on the Salesforce Experience Cloud platform.

Last updated