> 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-content-centered.md).

# Avec contenu centré

## Aperçu

Dans le composant Avonni Banner, vous pouvez créer une expérience visuellement attrayante et interactive en intégrant une disposition à deux colonnes dans la section de contenu. Cette disposition accueillera deux boutons distincts — un [Boîte de dialogue du bouton Avonni](/experience-cloud/experience-cloud-fr/experience-components/ax-button-dialog.md) dans la première colonne pour les interactions modales et un bouton standard [Bouton Avonni](/experience-cloud/experience-cloud-fr/experience-components/ax-button.md) dans la deuxième colonne pour les actions externes. Les deux boutons seront centrés horizontalement dans leurs colonnes respectives pour un rendu net et symétrique.

<figure><img src="/files/d26df5dcd4a9cde629b92e74ecdb78641e607d85" alt=""><figcaption></figcaption></figure>

## Guide de configuration interactif étape par étape

### Faites glisser le composant Avonni Banner,

* Dans Experience Builder, faites glisser le composant Avonni Banner sur votre page à l'endroit où vous souhaitez que la bannière apparaisse.
* **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)
  *

### Préparation de la mise en page du contenu

1. **Insérer le composant Avonni Layout :**
   * Dans la section de contenu d'Avonni Banner, placez un composant Avonni Layout configuré en deux colonnes.

### Configuration des boutons

2. **Ajoutez le composant Avonni Button Dialog à la première colonne :**
   * Faites glisser un composant Avonni Button Dialog dans la première colonne de la mise en page.
   * Ajustez les paramètres du bouton pour le centrer horizontalement dans la colonne.
3. **Insérer Avonni Button dans la deuxième colonne :**
   * Placez un composant Avonni Button dans la deuxième colonne.
   * Comme pour le premier bouton, définissez l'alignement horizontal sur centré, en veillant à ce qu'il corresponde à la mise en page du Button Dialog dans la colonne opposée.

## Conseils pour une utilisation efficace

* Veillez à ce que les deux boutons soient clairement libellés avec des appels à l'action simples et convaincants.
* Le centrage horizontal des boutons offre un aspect soigné et professionnel, visuellement attrayant et facile à parcourir.
* La mise en page à deux colonnes avec des boutons centrés permet une conception équilibrée, encourageant l'interaction des utilisateurs avec les deux options.

## Conclusion

En utilisant un Avonni Layout à deux colonnes et des boutons alignés au centre dans le composant Avonni Banner, vous pouvez créer une section ciblée et interactive qui incite les utilisateurs à interagir avec votre contenu. Cette disposition améliore non seulement l'attrait visuel, mais sert également des objectifs fonctionnels, en orientant les utilisateurs vers les actions souhaitées sur la plateforme Salesforce Experience Cloud.

<br>


---

# 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-content-centered.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.