> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/tutoriels/components/banner/with-illustration-and-buttons.md).

# Avec illustration et boutons

## Aperçu

La [Bannière Avonni](/experience-cloud/experience-cloud-fr/experience-components/ax-banner.md) 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.

<figure><img src="/files/7aea4438964ff27bd7ee4582648744fa13ab85c9" alt=""><figcaption><p>Résultat en direct</p></figcaption></figure>

## Guide de configuration interactif étape par étape

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

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

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/tutoriels/components/banner/with-illustration-and-buttons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.