# Avec illustration et boutons

## Aperçu

Le [Bannière Avonni](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-banniere) 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.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FuyhENfprFjwyDH79nUPq%2F2023-11-07_15-33-26%20(1).gif?alt=media&#x26;token=c082d68a-34b2-4cf0-b72f-37c881bdcef9" alt=""><figcaption><p>Résultat en direct</p></figcaption></figure>

## Guide interactif de configuration pas à pas

{% @arcade/embed flowId="Q5libBUKTVUpYqPkUrGJ" url="<https://app.arcade.software/share/Q5libBUKTVUpYqPkUrGJ>" %}

### 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

3. **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](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-video) (dans la zone dialogContent)
   * Configurez le composant Vidéo Avonni.
4. **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](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/naviguer#overview) 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](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-boite-de-dialogue-de-bouton) pour cela.
3. **Bouton de redirection :**
   * Le deuxième bouton, « Détails du produit », lorsqu'on clique dessus, [navigue vers une page](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/naviguer#named-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.