LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Installation & License Management
    • Quick Start Guide
    • Learning the Basics
    • Reactive Data Components
  • Experience Components
    • 🖼️View All Components
    • Accordion
    • Accordion Section
    • Alert
    • Audio
    • Avatar
    • Avatar Group
    • Banner
    • Bar Code
    • Blockquote
    • Button
    • Button Dialog
    • Button Group
    • Button Menu
    • Calendar
    • Card
    • Chip Container
    • Container
    • Data Table
    • Feed
    • Gallery
    • Icon
    • Illustration
    • Image
    • Kanban
    • Language Selector
    • Layout
    • List
    • Map
    • Media Object
    • Metric
    • Navigation
    • Profile Card
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Publisher
    • Record Detail
    • Separator
    • Tabs
    • Text Block
    • Timeline
    • Video
  • Properties Panel
    • Appearance
    • Interactions
      • Show Toast
      • Navigate
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
  • Tutorials
    • General
      • Expressions for Aura Sites
      • Expressions for LWR Sites
    • Components
      • Banner
        • With Illustration and Buttons
        • With Content centered
      • Card
        • Creating a MapCard Showcase
      • Data Table
        • Configuring the Data Table to display current related record information
        • Displaying Salesforce CMS Files in a Data Table
      • Image
        • Utilizing Avonni Image Component for Before-and-After Image Comparisons
      • Layout
        • Configuring the Layout to be responsive
      • Map
        • Set up the map to show record details information
      • Profile Card
        • Set up the Profile Card to display current user information
      • Tabs
    • Interactions
      • Configure the Open Flow Dialog to open a flow by clicking a button
    • Reactive Components
      • Interactive Map
      • Linked Data Tables
      • Guide to Implementing
    • Use Cases
      • Building a record detail page header
      • Creating a MapCard Showcase
      • Creating a Grid Layout
      • Utilizing Avonni Image Component for Before-and-After Image Comparisons
  • HELP
    • How do I contact support?
    • How do I report bugs?
    • Release Notes
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Overview
  • Interactive Step-by-Step Configuration Guide
  • Adding the Banner
  • Configuring Buttons
  • Example Implementation
  • Tips for Effectiveness

Was this helpful?

  1. Tutorials
  2. Components
  3. Banner

With Illustration and Buttons

Last updated 1 year ago

Was this helpful?

Overview

The 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.

    • 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".

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:

  3. Redirect Button:

  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.

Inside the modal, drag the video player using the (in the dialogContent zone)

Configure the button's in the 'Link To' section by specifying the destination page for user redirection.

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 for that.

The second button, "Product Details", when clicked, with more information about the product.

Avonni Video component
Navigate interaction
Avonni Button Dialog
navigates to a page
Avonni Banner
Live Result