# AX - Banner

## Panoramica

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

Usalo per annunciare nuove funzionalità, condividere aggiornamenti importanti, evidenziare promozioni o dare il benvenuto agli utenti del portale con messaggi brandizzati. Combina testo, immagini, icone e pulsanti call-to-action per creare annunci che attirano l'attenzione in cima alle pagine.

Perfetto per le home page dei portali, le sezioni di annunci, i punti salienti delle funzionalità o ovunque sia necessario comunicare informazioni importanti ai clienti o ai partner che visitano il tuo sito.

{% hint style="danger" %}
Questo componente [sfrutta gli slot](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/per-iniziare/imparare-le-basi#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="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F0p4IXX31318MsMoyfXus%2F2024-02-14_20-48-00.png?alt=media&#x26;token=a1ca42ce-5a1d-4276-838d-708a63881508" alt=""><figcaption></figcaption></figure>

***

## Configurazione dell'Avonni Banner

### Aggiunta del titolo e del contenuto

Configurare il titolo e il contenuto è un processo semplice che incide notevolmente sull'efficacia del tuo banner.&#x20;

**Aggiunta del titolo e del contenuto**

**1. Utilizzando l'Editor delle Proprietà Personalizzate:**

* **Digitare nel contenuto**: Puoi digitare rapidamente il titolo e il contenuto direttamente nell'editor delle proprietà personalizzate fornito all'interno del componente Avonni Banner. Questo approccio è facile da usare ed efficiente, permettendo aggiornamenti e modifiche rapide.

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

* **Ereditarie 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. Questo garantisce coerenza in tutto il sito, mantenendo un aspetto e una sensazione omogenei.
* **Stile personalizzato**: Puoi utilizzare la personalizzazione dello stile dedicata di Avonni nella parte inferiore dell'editor delle proprietà personalizzate per esigenze più specifiche. Questa opzione ti permette di impostare manualmente lo stile per il titolo e il contenuto, indipendentemente dal tema generale del sito.
* **Vantaggi dello stile personalizzato**: Lo stile personalizzato è particolarmente utile per far risaltare il banner, enfatizzare messaggi chiave o quando il banner deve avere uno stile distinto rispetto al resto del sito

### Definire l'allineamento orizzontale del contenuto

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

### Definire l'elemento multimediale

Il componente Avonni Banner non si limita a testo e immagini statiche. Integra video nel design del tuo banner per vivacizzare il messaggio e aumentare il coinvolgimento degli utenti.

* **Migliora il tuo banner con il video**
  * Aggiungi un elemento video per rendere il tuo banner più dinamico e coinvolgente.
  * Posiziona il video per il miglior 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.
  * Facoltativamente, rendi il video cliccabile in modo che gli utenti possano interagirci cliccandolo.
* **Impostazioni video aggiuntive**
  * Scegli se il video si avvia automaticamente al caricamento del banner.
  * 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="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FRENwos1PJNUT7Wu7Seq6%2F2024-02-14_20-53-10.png?alt=media&#x26;token=7b6aaf7f-87b6-4a22-82ba-923379e78305" alt=""><figcaption></figcaption></figure>

### Aggiunta di un'immagine di sfondo

Questa funzionalità è utile per creare una prima impressione visiva d'impatto e può essere usata per allineare l'aspetto del banner al branding o al tema generale del sito.

Le immagini di sfondo possono essere aggiunte in tre modi diversi:&#x20;

**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. Generata utilizzando un'Expression del sito Experience Cloud:**

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

**3. Dal CMS Media:**

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

### Capacità di interazione

**Banner cliccabile**

Una delle principali funzionalità interattive del componente Avonni Banner è la possibilità di essere cliccabile. Questo trasforma gli spettatori passivi in partecipanti attivi, incentivandoli a interagire più profondamente con il contenuto.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FprR1phP1xWwG7miijTRF%2F2024-03-16_11-16-16.png?alt=media&#x26;token=684da873-57a9-4b9f-b8a3-e15084dc1cfb" alt=""><figcaption></figcaption></figure>

**Implementazione delle interazioni**

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

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F8nrQckL2OjZkBCSCgIuD%2F2024-03-16_11-17-42.png?alt=media&#x26;token=c40aff4e-6fbf-44c6-8e91-eb5a16fd7acd" alt="" width="365"><figcaption></figcaption></figure>

**Definizione delle interazioni**

Quando un utente clicca sul banner, il componente può attivare un'interazione predefinita. Questo livello di personalizzazione garantisce che l'esperienza utente sia interattiva e su misura per le esigenze e gli 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="../pannello-delle-proprieta/interazioni/mostra-toast">Mostra 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="../pannello-delle-proprieta/interazioni/naviga">Naviga</a></td><td>Reindirizza gli utenti a un'altra pagina o risorsa al clic. Adatto per guidare verso contenuti o risorse correlate.</td></tr><tr><td><a href="../pannello-delle-proprieta/interazioni/apri-finestra-modale-di-avviso">Apri finestra di avviso</a></td><td>Presenta informazioni o avvisi in una finestra di avviso dopo un clic. Utile per annunci importanti.</td></tr><tr><td><a href="../pannello-delle-proprieta/interazioni/apri-finestra-di-dialogo-del-flusso">Apri Dialogo Flow</a></td><td>Avvia un flow Salesforce</td></tr><tr><td><a href="../pannello-delle-proprieta/interazioni/apri-conferma">Avvia un flusso di Salesforce in una finestra di dialogo, consentendo interazioni complesse. Aiuta a guidare processi passo dopo passo.</a></td><td>Apri conferma</td></tr></tbody></table>

***

## Attiva una finestra di conferma dopo l'interazione. Essenziale per azioni che richiedono la conferma o l'accettazione dell'utente.

{% tabs %}
{% tab title="Specifiche" %}

<table><thead><tr><th width="264">🎛️ Proprietà</th><th>Descrizione</th></tr></thead><tbody><tr><td><strong>Impostazione</strong></td><td>Titolo</td></tr><tr><td><strong>Definisci il titolo principale del banner, attirando immediatamente l'attenzione sul tuo messaggio principale.</strong></td><td><p>Stile del testo del titolo</p><ul><li><strong>Personalizza l'aspetto del titolo con vari stili di testo:</strong>Intestazioni</li><li><strong>: Scegli tra i livelli di intestazione da 1 a 4 per diversi gradi di enfasi.</strong>Paragrafi</li></ul></td></tr><tr><td><strong>: Seleziona gli stili di paragrafo 1 o 2 per il tono e la prominenza appropriati.</strong></td><td>Didascalia</td></tr><tr><td><strong>Accompagna il tuo titolo con un sottotitolo conciso o una descrizione, offrendo ulteriore contesto o un'anticipazione del contenuto seguente.</strong></td><td><p>Stile del testo della didascalia</p><ul><li><strong>Personalizza l'aspetto del titolo con vari stili di testo:</strong>Personalizza l'aspetto della didascalia con stili di testo predefiniti:</li><li><strong>: Scegli tra i livelli di intestazione da 1 a 4 per diversi gradi di enfasi.</strong>: Seleziona tra Intestazioni da 1 a 4 a seconda dell'importanza.</li></ul></td></tr><tr><td><strong>: Scegli Paragrafi 1 o 2 per completare il tuo titolo</strong></td><td>Contenuto</td></tr><tr><td><strong>Arricchisci il tuo banner con testo dettagliato, fornendo un'analisi completa, una spiegazione o una call-to-action. Qui puoi approfondire le specifiche del tuo messaggio.</strong></td><td>Allineamento orizzontale del contenuto</td></tr><tr><td><strong>Regola il posizionamento 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 l'estetica del design complessivo.</strong></td><td>CMS Background</td></tr><tr><td><strong>Utilizza contenuti dal tuo Content Management System come sfondo per il tuo banner, garantendo coerenza e facilità di aggiornamento.</strong></td><td>URL di sfondo</td></tr><tr><td><strong>Definisci un link web specifico per ottenere l'immagine di sfondo del banner, fornendo un contesto visivo o un miglioramento al contenuto.</strong></td><td>URL multimediale</td></tr><tr><td><strong>Collega un elemento multimediale che desideri mostrare insieme o come parte del tuo banner. Può trattarsi di un video, un audio o un altro media interattivo.</strong></td><td>Mostra media come sfondo</td></tr><tr><td><strong>Scegli di impostare il tuo media come sfondo del banner, consentendo un'esperienza multimediale immersiva mantenendo il contenuto testuale in primo piano.</strong></td><td>Posizione del media</td></tr><tr><td><strong>Designa la disposizione spaziale del tuo media sul banner, che sia centrata, a sinistra, a destra o qualsiasi altra posizione personalizzata che completi il tuo layout.</strong></td><td>Colore sovrapposizione</td></tr><tr><td><strong>Aggiungi una sovrapposizione di colore al tuo banner, utile per migliorare la leggibilità, impostare l'atmosfera o allinearsi ai colori del brand.</strong></td><td>Cliccabile</td></tr></tbody></table>
{% endtab %}

{% tab title="Trasforma il tuo banner in un elemento interattivo. Una volta abilitato, l'intero banner può funzionare come entità cliccabile, reindirizzando gli utenti a un link specificato o attivando un'azione definita." %}

| 🎛️ Proprietà                                                                                                                                                                          | Descrizione              |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| **🏞️ Attributi multimediali**                                                                                                                                                         | Riproduzione automatica  |
| **Consenti al tuo media di iniziare la riproduzione automaticamente quando la pagina si carica, offrendo un'esperienza multimediale immediata.**                                       | Loop                     |
| **Consenti al tuo media di riprodursi in un ciclo 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, permettendo la riproduzione senza interruzioni da parte dell'utente.**                  | Velocità di riproduzione |
| **Regola la velocità con cui il tuo media viene riprodotto. Questo può essere utile per adattare il ritmo del contenuto in base alla preferenza dell'utente o all'intento di design.** | Volume                   |

{% endtab %}

{% tab title="Controlla il livello audio del tuo media per garantire che sia coerente con l'esperienza utente che intendi offrire, sia che si tratti di musica di sottofondo discreta o di una narrazione audio predominante." %}

{% endtab %}
{% endtabs %}

### **🎨 Aspetto**

**Nota**:

* **`Adatta oggetto`**&#x66;ill
* **`: Allunga l'immagine per adattarla al contenitore, potenzialmente distorcendo l'immagine.`**&#x63;ontain
* **`: Mantiene il rapporto d'aspetto dell'immagine e la adatta all'interno del contenitore senza ritagliarla.`**&#x63;over
* **`: Mantiene il rapporto d'aspetto dell'immagine ma potrebbe ritagliare alcune parti per assicurare che il contenitore sia completamente coperto.`**&#x6E;one
* **`: L'immagine manterrà la sua dimensione originale indipendentemente dalla dimensione del contenitore.`**&#x73;cale-down `: Mantiene il rapporto d'aspetto dell'immagine ma potrebbe ritagliare alcune parti per assicurare che il contenitore sia completamente coperto.` : Confronta la differenza tra `: Allunga l'immagine per adattarla al contenitore, potenzialmente distorcendo l'immagine.`e

**, e fornisce una dimensione dell'oggetto concreta più piccola.**

* **`: Mantiene il rapporto d'aspetto dell'immagine ma potrebbe ritagliare alcune parti per assicurare che il contenitore sia completamente coperto.`**&#x53;tili del bordo:
* **`: Non verrà visualizzato alcun bordo.`**&#x73;olid
* **`: Una linea continua e ininterrotta crea il bordo. È lo stile più comune e semplice.`**&#x64;ashed
* **`: Il bordo appare come una serie di brevi segmenti di linea o trattini.`**&#x64;otted
* **`: Il bordo è composto da una serie di punti rotondi.`**&#x64;ouble
* **`: Due linee solide parallele vengono usate per il bordo. Lo spazio tra le due linee è trasparente o corrisponde allo sfondo.`**&#x67;roove
* **`: Il bordo sembra intagliato nella pagina, dando un aspetto 3D. L'effetto dipende dal valore del colore del bordo.`**&#x72;idge
* **`: Opposto di groove, sembra emergere dalla pagina, offrendo un altro effetto 3D. Il risultato visivo è influenzato dal colore del bordo.`**&#x69;nset
* **`: I bordi superiore e sinistro sono ombreggiati per apparire come se l'elemento fosse incassato nella pagina, mentre i bordi destro e inferiore sono evidenziati.`**&#x6F;utset

**: 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 carattere`**&#x6E;ormal
* **`: Visualizza il testo in uno stile di carattere standard, non corsivo.`**&#x69;talic

**: Visualizza il testo in uno stile corsivo, inclinando i caratteri verso destra.**:

* **`Allineamento orizzontale`**&#x6C;eft
* **`: Allinea il contenuto sul lato sinistro del contenitore.`**&#x63;enter
* **`: Centra orizzontalmente il contenuto all'interno del contenitore.`**&#x72;ight