With Content centered
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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)
Insert Avonni Layout Component:
In the Avonni Banner's content section, place an Avonni Layout component configured to two columns.
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.
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.
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.
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.
