> 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/experience-components/ax-banner.md).

# AX - Bannière

## Aperçu

**AX - Bannière** est un composant Experience Cloud qui affiche des messages bien en vue avec des titres, des images et du contenu textuel sur les pages des sites Experience.

Utilisez-le pour annoncer de nouvelles fonctionnalités, partager des mises à jour importantes, mettre en avant des promotions ou accueillir les utilisateurs du portail avec un message de marque. Combinez du texte, des images, des icônes et des boutons d’appel à l’action pour créer des annonces accrocheuses en haut des pages.

Idéal pour les pages d’accueil de portail, les sections d’annonces, les points forts des fonctionnalités ou partout où vous devez communiquer des informations importantes aux clients ou aux partenaires visitant votre site.

{% hint style="danger" %}
Ce composant [exploite des emplacements](/experience-cloud/experience-cloud-fr/premiers-pas/learning-the-basics.md#understanding-slots) pour une personnalisation avancée, ce qui le rend idéal pour les sites LWR. Les sites Aura ne prennent pas en charge ce niveau de personnalisation.
{% endhint %}

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-bf96d5a1aa7519e2b16ede8f3bb4704a3f621fee%2F2024-02-14_20-48-00.png?alt=media" alt=""><figcaption></figcaption></figure>

## Configuration

### Ajout du titre et du contenu

La configuration du titre et du contenu est un processus simple qui a un impact considérable sur l’efficacité de votre bannière.

**Ajout du titre et du contenu**

**1. Utilisation de l’éditeur de propriétés personnalisé :**

* **Saisie du contenu**: Vous pouvez saisir rapidement le titre et le contenu directement dans l’éditeur de propriétés personnalisé fourni dans le composant Avonni Banner. Cette approche est conviviale et efficace, permettant des mises à jour et des modifications rapides.

**2. Options de style du texte :**

* **Hériter du thème du site**: Le composant Avonni Banner permet au titre et au contenu d’hériter des styles de texte des paramètres du thème du site Experience Cloud. Cela garantit la cohérence sur l’ensemble de votre site, en conservant une apparence homogène.
* **Style personnalisé**: Vous pouvez utiliser la personnalisation de style dédiée Avonni en bas de l’éditeur de propriétés personnalisé pour des besoins plus spécifiques. Cette option vous permet de définir manuellement le style du titre et du contenu, indépendamment du thème global du site.
* **Avantages du style personnalisé**: Le style personnalisé est particulièrement utile pour faire ressortir la bannière, mettre en évidence les messages clés ou lorsque la bannière doit avoir un style distinct, différent du reste du site

### Définir l’alignement horizontal du contenu

* **Centré :** Placez votre texte au centre de la bannière pour un rendu équilibré.
* **À gauche :** Alignez votre texte à gauche pour une mise en page traditionnelle.
* **À droite :** Alignez votre texte à droite pour un design unique

### Définir l’élément média

Le composant Avonni Banner ne se limite pas au texte et aux images statiques. Intégrez de la vidéo dans la conception de votre bannière pour dynamiser votre message et accroître l’engagement des utilisateurs.

* **Améliorez votre bannière avec une vidéo**
  * Ajoutez un élément vidéo pour rendre votre bannière plus dynamique et attrayante.
  * Positionnez votre vidéo pour un impact visuel optimal. Choisissez parmi ces options : droite, en haut à gauche, en haut au centre, en haut à droite, gauche, en bas à gauche, en bas au centre, en bas à droite.
  * En option, rendez votre vidéo cliquable afin que les utilisateurs puissent interagir avec elle en cliquant.
* **Paramètres vidéo supplémentaires**
  * Choisissez si votre vidéo se lance automatiquement lorsque la bannière se charge.
  * Faites lire la vidéo en boucle de manière répétée.
  * Décidez d’afficher ou de masquer les contrôles du lecteur vidéo.
  * Contrôlez la vitesse de lecture de la vidéo.
  * Définissez le niveau de volume initial de la vidéo.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-f011ba9c8a4d4574a472e293f9eea608e7934091%2F2024-02-14_20-53-10.png?alt=media" alt=""><figcaption></figcaption></figure>

### Ajout d’une image d’arrière-plan

Cette fonctionnalité est utile pour créer une première impression visuellement marquante et peut être utilisée pour aligner l’apparence de la bannière avec l’image de marque ou le thème global du site.

Les images d’arrière-plan peuvent être ajoutées de trois façons différentes :

**1. Téléversement manuel :**

* Les utilisateurs peuvent téléverser un fichier image directement depuis leur appareil.
* Cette option est idéale pour des graphiques personnalisés, des logos d’entreprise ou des supports marketing spécifiques déjà préparés et stockés localement.

**2. Générée à l’aide d’une expression de site Experience Cloud :**

* L’image d’arrière-plan peut être générée dynamiquement en fonction d’expressions du site.
* Cette méthode permet de personnaliser la bannière en temps réel en fonction des interactions des utilisateurs, des données du site ou de critères spécifiques définis dans le site Experience Cloud.

**3. À partir du contenu CMS :**

* Les utilisateurs peuvent sélectionner une image dans le système de gestion de contenu (CMS) intégré.
* Cette option donne accès à une bibliothèque d’images, offrant un moyen pratique de choisir des graphiques pertinents et de haute qualité déjà présents dans le référentiel de contenu du site.

### Propriétés

**Titre** définit le titre principal de la bannière, attirant immédiatement l’attention sur votre message principal. **Légende** l’accompagne d’un sous-titre ou d’une description concise pour fournir un contexte supplémentaire, et **Contenu** enrichit la bannière avec un texte détaillé — un aperçu complet, une explication ou un appel à l’action. Leurs styles de texte (Titre 1 à 4 ou Paragraphe 1 à 2) sont définis dans l’onglet Style.

**Alignement horizontal du contenu** ajuste le positionnement horizontal du texte du contenu — `à gauche`, `au centre`, ou `à droite`.

**Arrière-plan CMS** et **URL ou expression de l’arrière-plan** définissent l’image d’arrière-plan de la bannière — utilisez le contenu CMS ou un lien Web direct.

**Média CMS** et **URL du média ou expression** inclure un élément multimédia (vidéo, audio ou autre) à côté de la bannière ou dans celle-ci. **Affichage du média en arrière-plan** définit le média comme arrière-plan de la bannière pour une expérience immersive tout en gardant le texte au premier plan, et **Position du média** désigne son emplacement (en haut à gauche, au centre, à droite, etc.).

**Couleur de superposition** ajoute une superposition de couleur pour améliorer la lisibilité, créer une ambiance ou s’aligner sur les couleurs de la marque.

**Cliquable** transforme toute la bannière en élément interactif qui redirige les utilisateurs ou déclenche une action définie (configurez-la sous [Interactions](#interactions)).

### Attributs du média

Lorsque la bannière inclut un média, ces paramètres contrôlent la lecture. **Lecture automatique** le lance automatiquement lorsque la page se charge. **Boucle** le relance en continu une fois arrivé à la fin. **Masquer les contrôles** garde les contrôles du lecteur masqués pour un rendu plus épuré. **Vitesse de lecture** ajuste la vitesse à laquelle le média est lu. **Volume** contrôle le niveau audio, des sons d’arrière-plan discrets à une narration dominante.

## Interactions

**Bannière cliquable**

L’une des principales fonctionnalités interactives du composant Avonni Banner est la possibilité d’être cliquable. Cela transforme les spectateurs passifs en participants actifs, en les encourageant à interagir plus en profondeur avec le contenu.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-3d9fc84708dc88163a34feee353a9a233c36509e%2F2024-03-16_11-16-16.png?alt=media" alt=""><figcaption></figcaption></figure>

**Mise en œuvre des interactions**

Pour rendre votre bannière cliquable, activez d’abord le bouton bascule cliquable. Ensuite, utilisez la section « Lier à » pour choisir ce qui se passe lorsque quelqu’un clique sur la bannière. Cela vous permet d’ajouter des fonctionnalités intéressantes à votre bannière.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-18022913b2d9754a42a890b024ed0c27f3557b62%2F2024-03-16_11-17-42.png?alt=media" alt="" width="365"><figcaption></figcaption></figure>

**Définition des interactions**

Lorsqu’un utilisateur clique sur la bannière, le composant peut déclencher une interaction prédéfinie. Ce niveau de personnalisation garantit une expérience utilisateur interactive et adaptée aux besoins et objectifs spécifiques du site.

<table><thead><tr><th width="184.5">Type d’interaction</th><th>Description</th></tr></thead><tbody><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/show-toast.md">Afficher un toast</a></td><td>Affiche un bref message informatif après le clic. Idéal pour confirmer des actions ou fournir du contexte.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md">Naviguer</a></td><td>Redirige les utilisateurs vers une autre page ou ressource lors du clic. Convient pour orienter vers du contenu ou des ressources associés.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-alert-modal.md">Ouvrir une fenêtre modale d’alerte</a></td><td>Présente des informations ou des avertissements dans une fenêtre modale d’alerte après un clic. Utile pour les annonces importantes.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-flow-dialog.md">Ouvrir une boîte de dialogue Flow</a></td><td>Lance un flow Salesforce dans une boîte de dialogue, permettant des interactions complexes. Aide à guider des processus étape par étape.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-confirm.md">Ouvrir une confirmation</a></td><td>Déclenche une boîte de dialogue de confirmation après l’interaction. Essentiel pour les actions nécessitant une confirmation ou une validation de l’utilisateur.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/execute-flow.md">Exécuter le flow</a></td><td>Exécute un flow Salesforce autolaunched en arrière-plan, sans boîte de dialogue ni panneau. Utile lorsque le clic doit déclencher une automatisation plutôt qu’ouvrir quelque chose.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/download.md">Télécharger</a></td><td>Télécharge un fichier lorsque la bannière est cliquée, à partir d’un fichier Salesforce, d’un lien public ou d’une URL.</td></tr></tbody></table>

## Style

{% tabs %}
{% tab title="Taille" %}
Contrôle les dimensions de la bannière.
{% endtab %}

{% tab title="Bordure" %}
Contrôle la bordure de la bannière (couleur / taille / style / rayon).
{% endtab %}

{% tab title="Marge" %}
Contrôle l’espacement extérieur autour de la bannière.
{% endtab %}

{% tab title="Rembourrage" %}
Contrôle l’espacement intérieur de la bannière.
{% endtab %}

{% tab title="Titre" %}

* **Couleur / Taille de police / Style de police / Graisse de police :** Stylisez le texte du titre.
* **Alignement horizontal :** Alignez le titre.
  {% endtab %}

{% tab title="Légende" %}

* **Couleur / Taille de police / Style de police / Graisse de police :** Stylisez le texte de la légende.
  {% endtab %}

{% tab title="Contenu" %}

* **Couleur / Taille de police / Style de police / Graisse de police :** Stylisez le texte du contenu.
* **Alignement horizontal / Largeur :** Contrôlez l’alignement et la largeur du contenu.
  {% endtab %}

{% tab title="Arrière-plan" %}

* **Couleur :** Définissez la couleur d’arrière-plan.
* **Ajustement de l’objet de l’image :** Contrôlez la façon dont l’image d’arrière-plan remplit la bannière.
  {% endtab %}

{% tab title="Média" %}

* **Ajustement de l’objet :** Contrôlez la façon dont le média remplit sa zone.
  {% endtab %}
  {% endtabs %}

### **Remarque**

**Ajustement de l’objet**:

* **`fill`**: Étirer l’image pour l’adapter au conteneur, au risque de la déformer.
* **`contain`**: Conserve le rapport hauteur/largeur de l’image et l’ajuste dans le conteneur sans la rogner.
* **`cover`**: Conserve le rapport hauteur/largeur de l’image, mais peut rogner certaines parties afin de garantir que le conteneur soit entièrement couvert.
* **`none`**: L’image conservera sa taille d’origine, quelle que soit la taille du conteneur.
* **`scale-down`**: Compare la différence entre `none` et `contain`, et fournit une taille d’objet concrète plus petite.

**Styles de bordure :**

* **`none`**: Aucune bordure ne sera affichée.
* **`solid`**: Une ligne continue, sans interruption, crée la bordure. C’est le style le plus courant et le plus simple.
* **`dashed`**: La bordure apparaît sous forme d’une série de courts segments de ligne ou de tirets.
* **`dotted`**: La bordure est constituée d’une série de points ronds.
* **`double`**: Deux lignes continues parallèles sont utilisées pour la bordure. L’espace entre les deux lignes est transparent ou correspond à l’arrière-plan.
* **`groove`**: La bordure semble gravée dans la page, donnant une apparence 3D. L’effet dépend de la valeur de couleur de la bordure.
* **`ridge`**: À l’inverse de groove, elle semble sortir de la page, produisant un autre effet 3D. Le rendu visuel est influencé par la couleur de la bordure.
* **`inset`**: Les bordures supérieure et gauche sont ombrées pour donner l’impression que l’élément est intégré dans la page, tandis que les bordures droite et inférieure sont mises en évidence.
* **`outset`**: À l’inverse de inset, les bordures droite et inférieure sont ombrées, tandis que les bordures supérieure et gauche sont mises en évidence, donnant l’illusion que l’élément ressort de la page.

**Style de police**:

* **`normal`**: Affiche le texte dans un style de police standard, non italique.
* **`italic`**: Affiche le texte en italique, en inclinant les caractères vers la droite.

**Alignement horizontal**:

* **`à gauche`**: Aligne le contenu sur le côté gauche du conteneur.
* **`au centre`**: Centre le contenu horizontalement dans le conteneur.
* **`à droite`**: Aligne le contenu sur le côté droit du conteneur.


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-banner.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.