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.

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.

  • Flexibility: This feature is particularly useful for rapidly changing content or for testing different messaging strategies.

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: For more specific needs, you can use the Avonni dedicated styling customization at the bottom of the custom property editor. 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 Alignment

highly customizable

Define Media element

media attributes

Adding a background image

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

Background image can be added using 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 for 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 Media: One of the key interactive features of the Avonni Banner component is the ability to make media elements clickable. This transforms passive viewers into active participants, encouraging them to engage more deeply with the content.

Defining Interactions: When a user clicks on the media, the component can trigger a predefined interaction. This level of customization ensures that the user experience is not only interactive but also tailored to the specific needs and goals of the site.

Interaction TypeDescription

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 Dialog

Triggers a confirmation dialog post-interaction. Essential for actions requiring user confirmation or acknowledgment.

Implementing Interactions

To implement these interactions, users can configure the Avonni Banner component by defining the desired interaction in the component settings 'Link to' section. This approach ensures a seamless integration of the interactive features with the visual and textual elements of the banner.

Settings

SettingDescription

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.

Properties

Media Attributes Properties

Styling Properties

Size

Width, Height, Overflow

Define the banner's dimensions and how overflow content is managed.

Border

Size, Style, Color, Radius

Customize the banner's border in terms of width, appearance, color, and corner roundness.

Caption

Color, Font Size, Font Style, Font Weight

Adjust the visual appearance of the caption text.

Title

Color, Font Size, Font Style, Font Weight, Horizontal Alignment

Modify the visual appearance and alignment of the title text.

Content

Color, Font Size, Font Style, Font Weight, Horizontal Alignment, Width

Configure the appearance, alignment, and width of the content section.

Background

Color, Image Object Fit

Set the banner's background color and how background images fit within it.

Media

Object Fit

Control how media is resized to fit its container.

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.

Last updated