Banner

Overview

The Avonni Banner component enhances your messages on your Experience Cloud site by allowing you to display rich media and text prominently. You can create detailed headlines, add descriptive captions, and include additional content to make your messages more engaging.

It’s ideal for announcing new features, sharing updates, or showcasing stories with a balance of text and visuals.

This component leverages slots for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization.

Configuring the Avonni Banner

Adding Title and Content

Configuring the title and content is a straightforward process that significantly impacts the effectiveness of your banner.

Adding Title and Content

1. Using the Custom Property Editor:

• Typing in Content: You can quickly type the title and content directly into the custom property editor provided within the Avonni Banner component. This approach is user-friendly and efficient, allowing for quick updates and edits.

2. Text Styling Options:

• Inheriting from Site Theme: The Avonni Banner component allows the title and content to inherit text styles from the Experience Cloud site theme settings. This ensures consistency across your site, maintaining a cohesive look and feel.

• Custom Styling: You can use the Avonni dedicated styling customization at the bottom of the custom property editor for more specific needs. This option allows you to manually set the styling for the title and content, independent of the site's overall theme.

• Advantages of Custom Styling: Custom styling is particularly useful for making the banner stand out, highlighting key messages, or when the banner needs to have a distinct style that differs from the rest of the site

Define Content Horizontal Alignment

• Center: Place your text in the center of the banner for a balanced look.

• Left: Align your text to the left for a traditional layout.

• Right: Align your text to the right for a unique design

Define Media element

The Avonni Banner component isn't limited to text and static images. Incorporate video into your banner design to spice up your message and increase user engagement.

• Enhance Your Banner with Video

  • Add a video element to make your banner more dynamic and engaging.

  • Position your video for the best visual impact. Choose from these options: right, top left, top center, top right, left, bottom left, bottom center, bottom right.

  • Optionally, make your video clickable so that users can interact with it by clicking.

• Additional Video Settings

  • Choose whether your video automatically plays when the banner loads.

  • Make the video play repeatedly in a loop.

  • Decide whether to show or hide the video player controls.

  • Control the speed at which the video plays.

  • Set the starting volume level for the video.

Adding a background image

This feature is handy for creating a visually striking first impression and can be used to align the banner's appearance with the site's overall branding or theme.

Background images can be added in three different ways:

1. Manual Upload:

• Users can upload an image file directly from their device.

• This option is ideal for custom graphics, company logos, or specific marketing materials already prepared and stored locally.

2. Generated Using an Experience Cloud Site Expression:

• The background image can be dynamically generated based on site expressions.

• This method allows real-time banner customization based on user interactions, site data, or specific criteria defined within the Experience Cloud site.

3. From CMS Media:

• Users can select an image from the integrated Content Management System (CMS).

• This option provides access to a library of images, offering a convenient way to choose high-quality and relevant graphics already part of the site's content repository.

Interaction capabilities

Clickable Banner

One of the key interactive features of the Avonni Banner component is the ability to be clickable. This transforms passive viewers into active participants, encouraging them to engage more deeply with the content.

Implementing Interactions

To make your banner clickable, first turn on the clickable toggle. Then, use the "Link To" section to choose what happens when someone clicks the banner. This lets you add cool features to your banner.

Defining Interactions

When a user clicks on the banner, the component can trigger a predefined interaction. This level of customization ensures that the user experience is interactive and tailored to the site's specific needs and goals.

Interaction Type	Description
Show Toast	Displays a brief, informative message post-click. Ideal for confirming actions or providing context.
Navigate	Redirects users to another page or resource upon clicking. Suitable for guiding to related content or resources.
Open Alert Modal	Presents information or warnings in an alert modal following a click. Useful for important announcements.
Open Flow Dialog	Initiates a Salesforce flow in a dialog, enabling complex interactions. Helps in guiding step-by-step processes.
Open Confirm	Triggers a confirmation dialog post-interaction. Essential for actions requiring user confirmation or acknowledgment.

Specifications

🎛️ Properties

Setting	Description
Title	Define the primary headline of the banner, drawing immediate attention to your main message.
Title Text Style	Customize your title's appearance with various text styles: Headings: Choose from Heading levels 1 to 4 for varying degrees of emphasis. Paragraphs: Select Paragraph styles 1 or 2 for the appropriate tone and prominence.
Caption	Accompany your title with a concise subtitle or descriptor, offering additional context or a teaser to the following content.
Caption Text Style	Customize your caption's look with predefined text styles: Headings: Select from Headings 1 to 4 depending on importance. Paragraphs: Choose Paragraphs 1 or 2 to complement your title
Content	Enrich your banner with detailed text, providing a comprehensive insight, explanation, or call-to-action. This is where you can dive deeper into the specifics of your message.
Content Horizontal Alignment	Adjust the horizontal positioning of your content text. Whether you prefer a left-aligned, centered, or right-aligned layout, this property ensures your content aligns with your overall design ethos.
CMS Background	Utilize content from your Content Management System as the backdrop for your banner, ensuring consistency and ease of updates.
Background URL	Define a specific web link to source the background image for your banner, providing a visual context or enhancement to your content.
Media URL	Link to a multimedia element you wish to feature alongside or as part of your banner. This can be a video, audio, or another interactive media.
Media Display as Background	Choose to set your media as the banner's background, allowing for an immersive multimedia experience while keeping the text content at the forefront.
Media Position	Designate the spatial arrangement of your media on the banner, be it centered, left, right, or any other custom positioning that complements your layout.
Overlay Color	Add a color overlay to your banner, which can be useful in enhancing readability, setting mood, or aligning with branding colors.
Clickable	Turn your banner into an interactive element. Once enabled, the entire banner can act as a clickable entity, redirecting users to a specified link or triggering a defined action.

🏞️ Media Attributes

Setting	Description
Autoplay	Let your media begin playing automatically when the page loads, providing an immediate multimedia experience.
Loop	Enable your media to play in a continuous loop, ensuring it restarts once it reaches the end.
Hide Controls	Opt to keep the media player controls hidden for a cleaner look, allowing the media to play without user interruptions.
Playback Rate	Adjust the speed at which your media plays. This can be helpful in adjusting the tempo of the content based on user preference or design intention.
Volume	Control the audio level of your media to ensure it aligns with the user experience you aim to deliver, whether that's subtle background tunes or dominant audio narration.

🎨 Appearance

Note

Object Fit:

• fill: Stretches the image to fit the container, potentially distorting it.

• contain: Keeps the image's aspect ratio and fits it within the container without cropping.

• cover: Keeps the image's aspect ratio but could crop some parts to ensure the container is fully covered.

• none: The image will have its original size regardless of the container size.

• scale-down: Compares the difference between none and contain, and provides a smaller concrete object size.

Border Styles:

• none: No border will be displayed.

• solid: A continuous, unbroken line creates the border. It's the most common and straightforward style.

• dashed: The border appears as a series of short line segments or dashes.

• dotted: The border is made up of a series of round dots.

• double: Two parallel solid lines are used for the border. The space between the two lines is transparent or matches the background.

• groove: The border looks carved into the page, giving a 3D appearance. The effect depends on the border color value.

• ridge: Opposite of groove, it looks like it's coming out of the page, giving another 3D effect. The visual outcome is affected by the border color.

• inset: The top and left borders are shaded to appear as though the element is embedded into the page, while the right and bottom borders are highlighted.

• outset: Opposite of inset, the right and bottom borders are shaded, while the top and left borders are highlighted, giving the illusion that the element is popping out of the page.

Font Style:

• normal: Displays text in a standard, non-italic font style.

• italic: Displays text in an italicized style, slanting the characters to the right.

Horizontal Alignment:

• left: Aligns the content to the left side of the container.

• center: Centers the content horizontally within the container.

• right: Aligns the content to the right side of the container.