# Con illustrazione e pulsanti

## Panoramica

Il [Avonni Banner](/experience-cloud/experience-cloud-it/experience-components/ax-banner.md) 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="/files/02c8ce30e4a59e4845fff1c26459385d4f85306f" 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](/experience-cloud/experience-cloud-it/experience-components/ax-video.md) (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](/experience-cloud/experience-cloud-it/pannello-proprieta/interazioni/naviga.md#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](/experience-cloud/experience-cloud-it/experience-components/ax-dialogo-pulsante.md) per questo.
3. **Pulsante di reindirizzamento:**
   * Il secondo pulsante, "Dettagli prodotto", quando cliccato, [naviga verso una pagina](/experience-cloud/experience-cloud-it/pannello-proprieta/interazioni/naviga.md#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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/componenti/banner/con-illustrazione-e-pulsanti.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.