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.

Questo componente sfrutta gli slot per una personalizzazione avanzata, rendendolo ideale per i siti LWR. I siti Aura non supportano questo livello di personalizzazione.

---

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.

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.

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:

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.

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.

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.

Tipo di interazione	Descrizione
Mostra Toast	Visualizza un breve messaggio informativo dopo il clic. Ideale per confermare azioni o fornire contesto.
Naviga	Reindirizza gli utenti a un'altra pagina o risorsa al clic. Adatto per guidare verso contenuti o risorse correlate.
Apri finestra di avviso	Presenta informazioni o avvisi in una finestra di avviso dopo un clic. Utile per annunci importanti.
Apri Dialogo Flow	Avvia un flow Salesforce
Avvia un flusso di Salesforce in una finestra di dialogo, consentendo interazioni complesse. Aiuta a guidare processi passo dopo passo.	Apri conferma

---

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

Specifiche

🎛️ Proprietà	Descrizione
Impostazione	Titolo
Definisci il titolo principale del banner, attirando immediatamente l'attenzione sul tuo messaggio principale.	Stile del testo del titolo Personalizza l'aspetto del titolo con vari stili di testo:Intestazioni : Scegli tra i livelli di intestazione da 1 a 4 per diversi gradi di enfasi.Paragrafi
: Seleziona gli stili di paragrafo 1 o 2 per il tono e la prominenza appropriati.	Didascalia
Accompagna il tuo titolo con un sottotitolo conciso o una descrizione, offrendo ulteriore contesto o un'anticipazione del contenuto seguente.	Stile del testo della didascalia Personalizza l'aspetto del titolo con vari stili di testo:Personalizza l'aspetto della didascalia con stili di testo predefiniti: : Scegli tra i livelli di intestazione da 1 a 4 per diversi gradi di enfasi.: Seleziona tra Intestazioni da 1 a 4 a seconda dell'importanza.
: Scegli Paragrafi 1 o 2 per completare il tuo titolo	Contenuto
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.	Allineamento orizzontale del contenuto
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.	CMS Background
Utilizza contenuti dal tuo Content Management System come sfondo per il tuo banner, garantendo coerenza e facilità di aggiornamento.	URL di sfondo
Definisci un link web specifico per ottenere l'immagine di sfondo del banner, fornendo un contesto visivo o un miglioramento al contenuto.	URL multimediale
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.	Mostra media come sfondo
Scegli di impostare il tuo media come sfondo del banner, consentendo un'esperienza multimediale immersiva mantenendo il contenuto testuale in primo piano.	Posizione del media
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.	Colore sovrapposizione
Aggiungi una sovrapposizione di colore al tuo banner, utile per migliorare la leggibilità, impostare l'atmosfera o allinearsi ai colori del brand.	Cliccabile

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.

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.

🎨 Aspetto

Nota:

• Adatta oggettofill

• : Allunga l'immagine per adattarla al contenitore, potenzialmente distorcendo l'immagine.contain

• : Mantiene il rapporto d'aspetto dell'immagine e la adatta all'interno del 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à la sua dimensione originale indipendentemente dalla dimensione del contenitore.scale-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.Stili del bordo:

• : 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

• : Due linee solide parallele vengono usate per il bordo. Lo spazio tra le due linee è trasparente o corrisponde allo sfondo.groove

• : Il bordo sembra intagliato 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 apparire come se l'elemento fosse incassato 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 caratterenormal

• : Visualizza il testo in uno stile di carattere standard, non corsivo.italic

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

• Allineamento orizzontaleleft

• : Allinea il contenuto sul lato sinistro del contenitore.center

• : Centra orizzontalmente il contenuto all'interno del contenitore.right