Con illustrazione e pulsanti

Panoramica

Il Avonni Banner Il componente è progettato per catturare l'attenzione dell'utente con elementi visivi coinvolgenti e pulsanti interattivi.

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

Risultato in tempo reale

Guida interattiva alla configurazione passo dopo passo

Aggiungere il Banner

1. Posiziona il componente Banner:

   • Nell'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 all'interno delle impostazioni del banner (Media CMS O URL del media)

   • Carica o seleziona l'illustrazione che desideri utilizzare e posizionala sul lato sinistro o destro del banner (usando l'attributo Posizione Media)

Configurazione dei pulsanti

1. Aggiungi un pulsante per aprire una finestra video:

   • Trascina il Layout Avonni per creare un layout di 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".

   • Clicca sul pulsante per aprire la finestra modale.

   • All'interno della modale, trascina il lettore video usando il componente Avonni Video (nella zona dialogContent)

   • Configura il componente Avonni Video.

2. Aggiungi un pulsante per reindirizzare a una pagina:

   • Inserisci un pulsante aggiuntivo nell'altra colonna del banner Avonni Layout precedentemente creato.

   • Etichetta questo pulsante con una call-to-action, come "Scopri di più".

   • Configura la interazione Naviga nella sezione 'Link a' 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 per la modale video:

   • Il primo pulsante dice "Guarda la demo". È impostato per aprire una finestra 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 prodotto", quando cliccato, naviga verso una pagina con ulteriori informazioni sul prodotto.

4. Stile e test:

   • Stilizza il banner e i pulsanti per abbinarli al marchio della tua azienda.

   • Testa entrambi i pulsanti per assicurarti che uno apra il video correttamente e l'altro reindirizzi come previsto.

5. Pubblica:

   • Dopo aver confermato che tutto funziona correttamente, pubblica le tue modifiche.

Suggerimenti per l'efficacia

• Assicurati che l'illustrazione sia pertinente e migliori 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 prosegue la narrazione iniziata dal banner.