Avec illustration et boutons

Aperçu

Le Bannière Avonni le composant est conçu pour capter l'attention de l'utilisateur avec des visuels attrayants et des boutons interactifs.

Voici comment configurer une bannière avec une illustration alignée à gauche ou à droite, un bouton qui déclenche une boîte de dialogue pour regarder une vidéo, et un autre bouton qui redirige l'utilisateur vers une autre page.

Résultat en direct

Guide interactif de configuration pas à pas

Ajout de la bannière

1. Placer le composant Bannière :

   • Dans l'Experience Builder, faites glisser le composant Avonni Banner sur votre page à l'endroit où vous souhaitez que la bannière apparaisse.

2. Définir le média :

   • Trouvez l'option pour ajouter une image ou une illustration dans les paramètres de la bannière (CMS Media OU Media URL)

   • Téléchargez ou sélectionnez l'illustration que vous souhaitez utiliser et positionnez-la à gauche ou à droite de la bannière (en utilisant l'attribut Media Position)

Configuration des boutons

1. Ajouter un bouton pour ouvrir une fenêtre modale vidéo :

   • Faites glisser la mise en page Avonni pour créer une disposition de 2 colonnes afin d'ajouter des boutons dans chaque colonne.

   • Faites glisser le composant Bouton Dialog Avonni.

   • Ajustez les paramètres du bouton (Libellé, Variante, Alignement)

   • Étiquetez le bouton de manière appropriée, par exemple "Regarder la vidéo".

   • Cliquez sur le bouton pour ouvrir la modale.

   • À l'intérieur de la modale, faites glisser le lecteur vidéo en utilisant le composant Vidéo Avonni (dans la zone dialogContent)

   • Configurez le composant Vidéo Avonni.

2. Ajouter un bouton pour rediriger vers une page :

   • Incluez un bouton supplémentaire dans l'autre colonne de la bannière Avonni précédemment créée.

   • Étiquetez ce bouton avec un appel à l'action, comme "En savoir plus".

   • Configurez l'interaction Naviguer dans la section 'Lien vers' en spécifiant la page de destination pour la redirection de l'utilisateur.

Exemple d'implémentation

Supposons que vous créiez une bannière promotionnelle pour le lancement d'un nouveau produit :

1. Illustration :

   • Vous ajoutez une illustration accrocheuse du nouveau produit sur le côté gauche de la bannière pour attirer l'attention.

2. Bouton Modale Vidéo :

   • Le premier bouton indique "Regarder la démo". Il est configuré pour ouvrir une boîte de dialogue modale où une vidéo de démonstration du produit est intégrée. Vous pouvez utiliser le Avonni Button Dialog pour cela.

3. Bouton de redirection :

   • Le deuxième bouton, « Détails du produit », lorsqu'on clique dessus, navigue vers une page avec plus d'informations sur le produit.

4. Style et test :

   • Stylisez la bannière et les boutons pour correspondre à l'identité visuelle de votre entreprise.

   • Testez les deux boutons pour vous assurer que l'un ouvre correctement la vidéo et que l'autre redirige comme prévu.

5. Publier :

   • Après avoir confirmé que tout fonctionne correctement, publiez vos modifications.

Conseils pour l'efficacité

• Assurez-vous que l'illustration est pertinente et renforce le message de la bannière.

• La vidéo doit être courte, engageante et informative.

• Le bouton « En savoir plus » doit diriger les utilisateurs vers une page qui poursuit le récit initié par la bannière.