> 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/experience-components/ax-banner.md).

# AX - Banner

## Panoramica

**AX - Banner** è un componente di Experience Cloud che visualizza messaggi in evidenza con titoli, immagini e contenuti testuali nelle pagine dei siti Experience.

Usalo per annunciare nuove funzionalità, condividere aggiornamenti importanti, mettere in evidenza promozioni o dare il benvenuto agli utenti del portale con messaggi personalizzati. Combina testo, immagini, icone e pulsanti di invito all'azione per creare annunci accattivanti nella parte superiore delle pagine.

Perfetto per le home page del portale, le sezioni annunci, gli highlight delle funzionalità o ovunque tu debba comunicare informazioni importanti a clienti o partner che visitano il tuo sito.

{% hint style="danger" %}
Questo componente [utilizza gli slot](/experience-cloud/experience-cloud-it/per-iniziare/learning-the-basics.md#understanding-slots) per una personalizzazione avanzata, rendendolo ideale per i siti LWR. I siti Aura non supportano questo livello di personalizzazione.
{% endhint %}

<figure><img src="/files/3a72e1b91aad36ed7afd80dd9558a0a4f31a01db" alt=""><figcaption></figcaption></figure>

***

## Configurazione dell'Avonni Banner

### Aggiunta di titolo e contenuto

Configurare il titolo e il contenuto è un processo semplice che incide in modo significativo sull'efficacia del tuo banner.

**Aggiunta di titolo e contenuto**

**1. Utilizzo dell'editor delle proprietà personalizzate:**

* **Inserimento del contenuto**: Puoi digitare rapidamente il titolo e il contenuto direttamente nell'editor delle proprietà personalizzate fornito all'interno del componente Avonni Banner. Questo approccio è intuitivo ed efficiente e consente aggiornamenti e modifiche rapidi.

**2. Opzioni di stile del testo:**

* **Ereditarietà dal tema del sito**: Il componente Avonni Banner consente al titolo e al contenuto di ereditare gli stili di testo dalle impostazioni del tema del sito Experience Cloud. Ciò garantisce coerenza in tutto il sito, mantenendo un aspetto omogeneo.
* **Stile personalizzato**: Puoi utilizzare la personalizzazione degli stili dedicata di Avonni nella parte inferiore dell'editor delle proprietà personalizzate per esigenze più specifiche. Questa opzione consente di impostare manualmente lo stile del titolo e del contenuto, indipendentemente dal tema generale del sito.
* **Vantaggi dello stile personalizzato**: Lo stile personalizzato è particolarmente utile per far risaltare il banner, mettere in evidenza i messaggi chiave o quando il banner deve avere uno stile distinto che differisce dal resto del sito

### Definisci l'allineamento orizzontale del contenuto

* **Centro:** Posiziona il testo al centro del banner per un aspetto equilibrato.
* **Sinistra:** Allinea il testo a sinistra per un layout tradizionale.
* **Destra:** Allinea il testo a destra per un design unico

### Definisci elemento multimediale

Il componente Avonni Banner non è limitato al testo e alle immagini statiche. Incorpora video nel design del tuo banner per rendere il messaggio più vivace e aumentare il coinvolgimento degli utenti.

* **Valorizza il tuo banner con il video**
  * Aggiungi un elemento video per rendere il banner più dinamico e coinvolgente.
  * Posiziona il video per ottenere il massimo impatto visivo. Scegli tra queste opzioni: destra, in alto a sinistra, in alto al centro, in alto a destra, sinistra, in basso a sinistra, in basso al centro, in basso a destra.
  * Opzionalmente, rendi il video cliccabile in modo che gli utenti possano interagirvi facendo clic.
* **Impostazioni video aggiuntive**
  * Scegli se il video deve avviarsi automaticamente quando il banner viene caricato.
  * Fai riprodurre il video ripetutamente in loop.
  * Decidi se mostrare o nascondere i controlli del lettore video.
  * Controlla la velocità di riproduzione del video.
  * Imposta il livello del volume iniziale del video.

<figure><img src="/files/cf238860b8cd2cc33b3f36d0b6a7ca00473be318" alt=""><figcaption></figcaption></figure>

### Aggiunta di un'immagine di sfondo

Questa funzionalità è utile per creare una prima impressione visivamente accattivante e può essere utilizzata per allineare l'aspetto del banner con il branding o il tema generale del sito.

Le immagini di sfondo possono essere aggiunte in tre modi diversi:

**1. Caricamento manuale:**

* Gli utenti possono caricare un file immagine direttamente dal proprio dispositivo.
* Questa opzione è ideale per grafiche personalizzate, loghi aziendali o materiali di marketing specifici già preparati e archiviati localmente.

**2. Generato tramite un'espressione del sito Experience Cloud:**

* L'immagine di sfondo può essere generata dinamicamente in base alle espressioni del sito.
* Questo metodo consente la personalizzazione del banner in tempo reale in base alle interazioni degli utenti, ai dati del sito o a criteri specifici definiti all'interno del sito Experience Cloud.

**3. Da CMS Media:**

* Gli utenti possono selezionare un'immagine dal sistema di gestione dei contenuti (CMS) integrato.
* Questa opzione offre accesso a una libreria di immagini, fornendo un modo pratico per scegliere grafiche pertinenti e di alta qualità già presenti nel repository dei contenuti del sito.

### Funzionalità di interazione

**Banner cliccabile**

Una delle principali funzionalità interattive del componente Avonni Banner è la possibilità di essere cliccabile. Ciò trasforma gli utenti passivi in partecipanti attivi, incoraggiandoli a interagire più a fondo con il contenuto.

<figure><img src="/files/f7d0a1c6e29aa73c464078b8dadfd8fd0211db72" alt=""><figcaption></figcaption></figure>

**Implementazione delle interazioni**

Per rendere il banner cliccabile, attiva prima l'interruttore cliccabile. Quindi, usa la sezione "Link a" per scegliere cosa succede quando qualcuno fa clic sul banner. Questo ti consente di aggiungere funzioni interessanti al banner.

<figure><img src="/files/d997c53c12e28f2e5288c2e72a45697b228148f0" alt="" width="365"><figcaption></figcaption></figure>

**Definizione delle interazioni**

Quando un utente fa clic sul banner, il componente può attivare un'interazione predefinita. Questo livello di personalizzazione garantisce che l'esperienza utente sia interattiva e adattata alle esigenze e agli obiettivi specifici del sito.

<table><thead><tr><th width="184.5">Tipo di interazione</th><th>Descrizione</th></tr></thead><tbody><tr><td><a href="/pages/2a5a8f0a741ddd38e1fcb8252665851c2a47a2f2">Mostra notifica toast</a></td><td>Visualizza un breve messaggio informativo dopo il clic. Ideale per confermare azioni o fornire contesto.</td></tr><tr><td><a href="/pages/cfdf7918d4aa95cff7d749e71608ef71d5367a06">Naviga</a></td><td>Reindirizza gli utenti a un'altra pagina o risorsa al clic. Adatto per guidare verso contenuti o risorse correlati.</td></tr><tr><td><a href="/pages/5fb3a061fbc78eba12d7de2e347d2b3c78ff5b89">Apri finestra modale di avviso</a></td><td>Presenta informazioni o avvisi in una finestra modale di avviso dopo un clic. Utile per annunci importanti.</td></tr><tr><td><a href="/pages/07218d6d788e0816b97b69834d231c53f296dd7f">Apri dialogo Flow</a></td><td>Avvia un flusso Salesforce in una finestra di dialogo, consentendo interazioni complesse. Aiuta a guidare processi passo dopo passo.</td></tr><tr><td><a href="/pages/7eebe19d78ed58d83caf1fe91159db6cba52c090">Apri conferma</a></td><td>Attiva una finestra di dialogo di conferma dopo l'interazione. Essenziale per azioni che richiedono la conferma o l'accettazione dell'utente.</td></tr></tbody></table>

***

## Specifiche

{% tabs %}
{% tab title="🎛️ Proprietà" %}

<table><thead><tr><th width="264">Impostazione</th><th>Descrizione</th></tr></thead><tbody><tr><td><strong>Titolo</strong></td><td>Definisci il titolo principale del banner, attirando immediatamente l'attenzione sul tuo messaggio principale.</td></tr><tr><td><strong>Stile del testo del titolo</strong></td><td><p>Personalizza l'aspetto del titolo con diversi stili di testo:</p><ul><li><strong>Titoli</strong>: Scegli tra i livelli di titolo da 1 a 4 per diversi gradi di enfasi.</li><li><strong>Paragrafi</strong>: Seleziona gli stili di paragrafo 1 o 2 per il tono e la rilevanza appropriati.</li></ul></td></tr><tr><td><strong>Didascalia</strong></td><td>Accompagna il titolo con un sottotitolo o descrittore conciso, offrendo ulteriore contesto o un'anticipazione del contenuto successivo.</td></tr><tr><td><strong>Stile del testo della didascalia</strong></td><td><p>Personalizza l'aspetto della didascalia con stili di testo predefiniti:</p><ul><li><strong>Titoli</strong>: Seleziona tra i Titoli da 1 a 4 a seconda dell'importanza.</li><li><strong>Paragrafi</strong>: Scegli i Paragrafi 1 o 2 per completare il titolo</li></ul></td></tr><tr><td><strong>Contenuto</strong></td><td>Arricchisci il banner con testo dettagliato, fornendo una panoramica completa, una spiegazione o un invito all'azione. Qui puoi approfondire gli aspetti specifici del tuo messaggio.</td></tr><tr><td><strong>Allineamento orizzontale del contenuto</strong></td><td>Regola la posizione orizzontale del testo del contenuto. Che tu preferisca un layout allineato a sinistra, centrato o allineato a destra, questa proprietà garantisce che il contenuto sia coerente con la tua filosofia di design complessiva.</td></tr><tr><td><strong>Sfondo CMS</strong></td><td>Utilizza il contenuto del tuo sistema di gestione dei contenuti come sfondo per il banner, garantendo coerenza e facilità di aggiornamento.</td></tr><tr><td><strong>URL di sfondo</strong></td><td>Definisci un collegamento web specifico da cui recuperare l'immagine di sfondo del banner, fornendo un contesto visivo o un miglioramento del contenuto.</td></tr><tr><td><strong>URL multimediale</strong></td><td>Collega un elemento multimediale che desideri mettere in evidenza accanto al banner o come parte di esso. Può trattarsi di un video, audio o altro contenuto multimediale interattivo.</td></tr><tr><td><strong>Visualizzazione del media come sfondo</strong></td><td>Scegli di impostare il tuo media come sfondo del banner, consentendo un'esperienza multimediale immersiva mantenendo il contenuto testuale in primo piano.</td></tr><tr><td><strong>Posizione del media</strong></td><td>Specifica la disposizione spaziale del media nel banner, che sia centrato, a sinistra, a destra o in qualsiasi altra posizione personalizzata che completi il layout.</td></tr><tr><td><strong>Colore di sovrapposizione</strong></td><td>Aggiungi una sovrapposizione colorata al banner, utile per migliorare la leggibilità, creare atmosfera o allinearsi ai colori del branding.</td></tr><tr><td><strong>Cliccabile</strong></td><td>Trasforma il banner in un elemento interattivo. Una volta abilitato, l'intero banner può agire come elemento cliccabile, reindirizzando gli utenti a un link specifico o attivando un'azione definita.</td></tr></tbody></table>
{% endtab %}

{% tab title="🏞️ Attributi del media" %}

| Impostazione                 | Descrizione                                                                                                                                                                                             |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Riproduzione automatica**  | Consenti al media di iniziare la riproduzione automaticamente quando la pagina viene caricata, offrendo un'esperienza multimediale immediata.                                                           |
| **Loop**                     | Abilita il media a essere riprodotto in un loop continuo, assicurando che ricominci una volta raggiunta la fine.                                                                                        |
| **Nascondi controlli**       | Scegli di mantenere nascosti i controlli del lettore multimediale per un aspetto più pulito, consentendo al media di essere riprodotto senza interruzioni da parte dell'utente.                         |
| **Velocità di riproduzione** | Regola la velocità di riproduzione del media. Questo può essere utile per adattare il ritmo del contenuto in base alle preferenze dell'utente o all'intento di design.                                  |
| **Volume**                   | Controlla il livello audio del media per assicurarti che sia in linea con l'esperienza utente che desideri offrire, che si tratti di musica di sottofondo discreta o di una narrazione audio dominante. |
| {% endtab %}                 |                                                                                                                                                                                                         |

{% tab title="🎨 Aspetto" %}

{% endtab %}
{% endtabs %}

### **Nota**

**Adattamento dell'oggetto**:

* **`fill`**: Estende l'immagine per adattarla al contenitore, con la possibilità di distorcerla.
* **`contain`**: Mantiene il rapporto d'aspetto dell'immagine e la adatta al contenitore senza ritagliarla.
* **`cover`**: Mantiene il rapporto d'aspetto dell'immagine ma potrebbe ritagliare alcune parti per assicurare che il contenitore sia completamente coperto.
* **`none`**: L'immagine manterrà le dimensioni originali indipendentemente dalle dimensioni del contenitore.
* **`scale-down`**: Confronta la differenza tra `none` e `contain`, e fornisce una dimensione dell'oggetto concreta più piccola.

**Stili del bordo:**

* **`none`**: Non verrà visualizzato alcun bordo.
* **`solid`**: Una linea continua e ininterrotta crea il bordo. È lo stile più comune e semplice.
* **`dashed`**: Il bordo appare come una serie di brevi segmenti di linea o trattini.
* **`dotted`**: Il bordo è composto da una serie di punti rotondi.
* **`double`**: Per il bordo vengono utilizzate due linee solide parallele. Lo spazio tra le due linee è trasparente o corrisponde allo sfondo.
* **`groove`**: Il bordo sembra inciso nella pagina, dando un aspetto 3D. L'effetto dipende dal valore del colore del bordo.
* **`ridge`**: Opposto di groove, sembra emergere dalla pagina, offrendo un altro effetto 3D. Il risultato visivo è influenzato dal colore del bordo.
* **`inset`**: I bordi superiore e sinistro sono ombreggiati per sembrare che l'elemento sia incastonato nella pagina, mentre i bordi destro e inferiore sono evidenziati.
* **`outset`**: Opposto di inset, i bordi destro e inferiore sono ombreggiati, mentre i bordi superiore e sinistro sono evidenziati, dando l'illusione che l'elemento sporga dalla pagina.

**Stile del font**:

* **`normal`**: Visualizza il testo con uno stile di carattere standard, non corsivo.
* **`italic`**: Visualizza il testo in stile corsivo, inclinando i caratteri verso destra.

**Allineamento orizzontale**:

* **`sinistra`**: Allinea il contenuto al lato sinistro del contenitore.
* **`centro`**: Centra il contenuto orizzontalmente all'interno del contenitore.
* **`destra`**: Allinea il contenuto al lato destro del contenitore.


---

# 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/experience-components/ax-banner.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.