> 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 de l’utilisateur grâce à des éléments visuels percutants 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 Banner :**
   * 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éversez 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 la disposition Avonni 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 (étiquette, variante, alignement)
   * Donnez au bouton une étiquette appropriée, comme « 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 :**
   * Incluez un bouton supplémentaire dans l’autre colonne de la bannière Avonni Layout créée précédemment.
   * Attribuez à ce bouton un appel à l’action, comme « En savoir plus ».
   * Configurez l’ [interaction de navigation](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md#overview) dans la section « Link To » en précisant 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émo ». 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 [Avonni Button Dialog](/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’il est cliqué, [navigue vers une page](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md#named-page) contenant davantage d’informations sur le produit.
4. **Style et test :**
   * Mettez en forme la bannière et les boutons pour qu’ils correspondent à 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 plus d’efficacité

* Assurez-vous que l’illustration est pertinente et qu’elle 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 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.