Con illustrazione e pulsanti

Panoramica

La Banner Avonni 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.

Risultato in tempo reale

Guida interattiva alla configurazione passo dopo passo

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

1. 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 (nella zona dialogContent)
   • Configura il componente video Avonni.
2. 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 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 per questo.
3. Pulsante di reindirizzamento:

   • Il secondo pulsante, "Dettagli del prodotto", quando viene cliccato, reindirizza a una pagina 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.