Avec illustration et boutons

Aperçu

La Bannière Avonni Le composant est conçu pour capter l'attention des utilisateurs grâce à des éléments 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 de configuration interactif étape par étape

Ajout de la bannière

1. Placez le composant Bannière :

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

   • Trouvez l'option permettant d'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 (à l'aide de l'attribut Media Position)

Configuration des boutons

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

   • Faites glisser le composant Avonni Layout pour créer une mise en page à 2 colonnes afin d'ajouter des boutons dans chaque colonne.
   • Faites glisser le composant Avonni Button Dialog.
   • Ajustez les paramètres du bouton (Libellé, Variante, Alignement)
   • Intitulez le bouton de manière appropriée, par exemple « Regarder la vidéo ».
   • Cliquez sur le bouton pour ouvrir la fenêtre modale.
   • Dans la fenêtre modale, faites glisser le lecteur vidéo à l'aide du composant Avonni Video (dans la zone dialogContent)
   • Configurez le composant Avonni Video.
2. Ajoutez un bouton pour rediriger vers une page :

   • Ajoutez un bouton supplémentaire dans l'autre colonne de la bannière Avonni Layout créée précédemment.
   • Intitulez ce bouton avec un appel à l'action, comme « En savoir plus ».
   • Configurez l' interaction Naviguer dans la section « Link To » en indiquant 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 de fenêtre modale vidéo :

   • Le premier bouton indique « Regarder la démonstration ». Il est configuré pour ouvrir une boîte de dialogue modale dans laquelle une vidéo de démonstration du produit est intégrée. Vous pouvez utiliser le Boîte de dialogue du bouton Avonni pour cela.
3. Bouton de redirection :

   • Le deuxième bouton, « Détails du produit », lorsqu'on clique dessus, redirige vers une page contenant plus d'informations sur le produit.
4. Style et tests :

   • Stylez 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 une utilisation efficace

• 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 prolonge le récit de la bannière.