> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/components/banner/with-illustration-and-buttons.md).

# Con illustrazione e pulsanti

## Panoramica

La [Banner Avonni](/experience-cloud/experience-cloud-it/experience-components/ax-banner.md) Il componente è progettato per catturare l'attenzione degli utenti con elementi visivi accattivanti e pulsanti interattivi.

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

<figure><img src="/files/02c8ce30e4a59e4845fff1c26459385d4f85306f" alt=""><figcaption><p>Risultato in tempo reale</p></figcaption></figure>

## Guida interattiva alla configurazione passo dopo passo

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

### Aggiungere il banner

1. **Posiziona il componente Banner:**
   * In 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 nelle impostazioni del banner (CMS Media O Media URL)
   * Carica o seleziona l'illustrazione che vuoi usare e posizionala sul lato sinistro o destro del banner (usando l'attributo Media Position)

### Configurazione dei pulsanti

3. **Aggiungi un pulsante per aprire un video in una finestra modale:**
   * Trascina il layout Avonni per creare un layout a 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".
   * Fai clic sul pulsante per aprire la finestra modale.
   * All'interno della finestra modale, trascina il lettore video utilizzando il [componente video Avonni](/experience-cloud/experience-cloud-it/experience-components/ax-video.md) (nella zona dialogContent)
   * Configura il componente video Avonni.
4. **Aggiungi un pulsante per reindirizzare a una pagina:**
   * Includi un pulsante aggiuntivo nell'altra colonna del banner Avonni Layout creato in precedenza.
   * Etichetta questo pulsante con una call-to-action, come "Scopri di più".
   * Configura l'interazione [di navigazione](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/navigate.md#overview) nella sezione 'Link To' 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 della finestra modale video:**
   * Il primo pulsante dice "Guarda la demo". È impostato per aprire una finestra di dialogo modale in cui è incorporato un video dimostrativo del prodotto. Puoi usare il [Avonni Button Dialog](/experience-cloud/experience-cloud-it/experience-components/ax-button-dialog.md) per questo.
3. **Pulsante di reindirizzamento:**
   * Il secondo pulsante, "Dettagli del prodotto", quando viene cliccato, [reindirizza a una pagina](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/navigate.md#named-page) con ulteriori informazioni sul prodotto.
4. **Stile e test:**
   * Applica uno stile al banner e ai pulsanti in modo che corrispondano al branding della tua azienda.
   * Testa entrambi i pulsanti per assicurarti che uno apra correttamente il video e l'altro reindirizzi come previsto.
5. **Pubblicazione:**
   * Dopo aver confermato che tutto funziona senza problemi, pubblica le modifiche.

### Suggerimenti per l'efficacia

* Assicurati che l'illustrazione sia pertinente e valorizzi 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 continui la narrazione del banner.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/components/banner/with-illustration-and-buttons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.