# Con illustrazione e pulsanti

## Panoramica

Il [Avonni Banner](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-banner) Il componente è progettato per catturare l'attenzione dell'utente con elementi visivi coinvolgenti e pulsanti interattivi. 

Ecco come configurare un banner con un'illustrazione allineata a sinistra o a destra, un pulsante che apre un dialogo per guardare un video e un altro pulsante che reindirizza l'utente a una pagina diversa.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FuyhENfprFjwyDH79nUPq%2F2023-11-07_15-33-26%20(1).gif?alt=media&#x26;token=c082d68a-34b2-4cf0-b72f-37c881bdcef9" alt=""><figcaption><p>Risultato in tempo reale</p></figcaption></figure>

## Guida interattiva alla configurazione passo dopo passo

{% @arcade/embed flowId="Q5libBUKTVUpYqPkUrGJ" url="<https://app.arcade.software/share/Q5libBUKTVUpYqPkUrGJ>" %}

### Aggiungere il Banner

1. **Posiziona il componente Banner:**
   * Nell'Experience Builder, trascina il componente Avonni Banner sulla tua pagina nel punto in cui desideri che appaia il banner.
2. **Imposta il media:**
   * Trova l'opzione per aggiungere un'immagine o un'illustrazione all'interno delle impostazioni del banner (Media CMS O URL del media)
   * Carica o seleziona l'illustrazione che desideri utilizzare e posizionala sul lato sinistro o destro del banner (usando l'attributo Posizione Media)

### Configurazione dei pulsanti

3. **Aggiungi un pulsante per aprire una finestra video:**
   * Trascina il Layout Avonni per creare un layout di 2 colonne e aggiungere pulsanti all'interno di ciascuna colonna.
   * Trascina il componente Avonni Button Dialog.
   * Regola le impostazioni del pulsante (Etichetta, Variante, Allineamento)
   * Etichetta il pulsante in modo appropriato, ad esempio "Guarda il video".
   * Clicca sul pulsante per aprire la finestra modale.
   * All'interno della modale, trascina il lettore video usando il [componente Avonni Video](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-video) (nella zona dialogContent)
   * Configura il componente Avonni Video.
4. **Aggiungi un pulsante per reindirizzare a una pagina:**
   * Inserisci un pulsante aggiuntivo nell'altra colonna del banner Avonni Layout precedentemente creato.
   * Etichetta questo pulsante con una call-to-action, come "Scopri di più".
   * Configura la [interazione Naviga](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/naviga#overview) nella sezione 'Link a' specificando la pagina di destinazione per il reindirizzamento dell'utente.

## Esempio di implementazione

Supponiamo che tu stia creando un banner promozionale per il lancio di un nuovo prodotto:

1. **Illustrazione:**
   * Aggiungi un'illustrazione accattivante del nuovo prodotto sul lato sinistro del banner per attirare l'attenzione.
2. **Pulsante per la modale video:**
   * Il primo pulsante dice "Guarda la demo". È impostato per aprire una finestra modale in cui è incorporato un video dimostrativo del prodotto. Puoi usare il [Avonni Button Dialog](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-finestra-di-dialogo-pulsante) per questo.
3. **Pulsante di reindirizzamento:**
   * Il secondo pulsante, "Dettagli prodotto", quando cliccato, [naviga verso una pagina](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/naviga#named-page) con ulteriori informazioni sul prodotto.
4. **Stile e test:**
   * Stilizza il banner e i pulsanti per abbinarli al marchio della tua azienda.
   * Testa entrambi i pulsanti per assicurarti che uno apra il video correttamente e l'altro reindirizzi come previsto.
5. **Pubblica:**
   * Dopo aver confermato che tutto funziona correttamente, pubblica le tue modifiche.

### Suggerimenti per l'efficacia

* Assicurati che l'illustrazione sia pertinente e migliori il messaggio del banner.
* Il video dovrebbe essere breve, coinvolgente e informativo.
* Il pulsante "Scopri di più" dovrebbe indirizzare gli utenti a una pagina che prosegue la narrazione iniziata dal banner.