> 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 marquants avec des titres, des images et du texte 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 des messages personnalisés. 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 du portail, les sections d’annonces, la mise en avant de fonctionnalités ou tout autre endroit où vous devez communiquer des informations importantes aux clients ou partenaires qui visitent votre site.

{% hint style="danger" %}
Ce composant [utilise 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="/files/e43311468293b02104c3a378226f44c6a52f5a29" alt=""><figcaption></figcaption></figure>

***

## Configuration de la bannière Avonni

### Ajout du titre et du contenu

La configuration du titre et du contenu est un processus simple qui influence considérablement 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 Bannière Avonni. Cette approche est conviviale et efficace, et permet des mises à jour et des modifications rapides.

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

* **Héritage du thème du site**: Le composant Bannière Avonni permet au titre et au contenu d’hériter des styles de texte définis par le thème du site Experience Cloud. Cela garantit une cohérence sur l’ensemble de votre site, tout 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 avant des messages clés ou lorsque la bannière doit avoir un style distinct du reste du site

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

* **Centre :** 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 Bannière Avonni ne se limite pas au texte et aux images statiques. Intégrez de la vidéo à 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 engageante.
  * Positionnez votre vidéo pour obtenir le meilleur impact visuel. Choisissez parmi ces options : droite, haut gauche, haut centre, haut droite, gauche, bas gauche, bas centre, bas droite.
  * Si vous le souhaitez, rendez votre vidéo cliquable afin que les utilisateurs puissent interagir avec elle en cliquant dessus.
* **Paramètres vidéo supplémentaires**
  * Choisissez si votre vidéo doit être lue 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="/files/5a5694d2d7e4266f97b2fd4e102c7b8540f3998b" alt=""><figcaption></figcaption></figure>

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

Cette fonctionnalité est pratique 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 directement un fichier image depuis leur appareil.
* Cette option est idéale pour des éléments 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ération à l’aide d’une expression de site Experience Cloud :**

* L’image d’arrière-plan peut être générée dynamiquement en fonction des expressions du site.
* Cette méthode permet une personnalisation en temps réel de la bannière 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. Depuis le CMS :**

* Les utilisateurs peuvent sélectionner une image à partir du 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 visuels pertinents et de haute qualité déjà présents dans le référentiel de contenu du site.

### Fonctionnalités d’interaction

**Bannière cliquable**

L’une des principales fonctionnalités interactives du composant Bannière Avonni est sa capacité à être cliquable. Cela transforme les spectateurs passifs en participants actifs, les encourageant à s’engager davantage avec le contenu.

<figure><img src="/files/627aae5bb1125b46bfe3033b3b17f7a7acbe9e97" alt=""><figcaption></figcaption></figure>

**Mise en œuvre des interactions**

Pour rendre votre bannière cliquable, activez d’abord le bouton bascule de clic. Ensuite, utilisez la section "Lien vers" pour choisir ce qui se passe lorsqu’une personne clique sur la bannière. Cela vous permet d’ajouter des fonctionnalités intéressantes à votre bannière.

<figure><img src="/files/80412061d670e1d7e4262da0c013f3b3882698e1" 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="/pages/9dd549a1be476d701e9650377ce5d979ea169829">Afficher un toast</a></td><td>Affiche un bref message informatif après le clic. Idéal pour confirmer des actions ou fournir un contexte.</td></tr><tr><td><a href="/pages/adf18748d1291a59602a32453f192f5614d4b4fe">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="/pages/c06daaa771cef4de9c8b4019fc528f844564d762">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="/pages/bb4527805e07b93a0bfb98cbc28b6ebe2b4f55dc">Ouvrir la boîte de dialogue Flow</a></td><td>Lance un flux Salesforce dans une boîte de dialogue, permettant des interactions complexes. Aide à guider des processus étape par étape.</td></tr><tr><td><a href="/pages/db108d23b8ef7fc01c55a6755c3f5de8e382bd3e">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 reconnaissance de l’utilisateur.</td></tr></tbody></table>

***

## Spécifications

{% tabs %}
{% tab title="🎛️ Propriétés" %}

<table><thead><tr><th width="264">Paramètre</th><th>Description</th></tr></thead><tbody><tr><td><strong>Titre</strong></td><td>Définissez le titre principal de la bannière, afin d’attirer immédiatement l’attention sur votre message principal.</td></tr><tr><td><strong>Style du texte du titre</strong></td><td><p>Personnalisez l’apparence de votre titre avec différents styles de texte :</p><ul><li><strong>Titres</strong>: Choisissez parmi les niveaux de titre 1 à 4 selon le degré d’emphase souhaité.</li><li><strong>Paragraphes</strong>: Sélectionnez les styles de paragraphe 1 ou 2 pour obtenir le ton et la visibilité appropriés.</li></ul></td></tr><tr><td><strong>Légende</strong></td><td>Accompagnez votre titre d’un sous-titre ou d’un descripteur concis, offrant un contexte supplémentaire ou un aperçu du contenu suivant.</td></tr><tr><td><strong>Style du texte de la légende</strong></td><td><p>Personnalisez l’apparence de votre légende avec des styles de texte prédéfinis :</p><ul><li><strong>Titres</strong>: Sélectionnez parmi les titres 1 à 4 selon l’importance.</li><li><strong>Paragraphes</strong>: Choisissez les paragraphes 1 ou 2 pour compléter votre titre</li></ul></td></tr><tr><td><strong>Contenu</strong></td><td>Enrichissez votre bannière avec un texte détaillé, fournissant un aperçu complet, une explication ou un appel à l’action. C’est ici que vous pouvez approfondir les spécificités de votre message.</td></tr><tr><td><strong>Alignement horizontal du contenu</strong></td><td>Ajustez le positionnement horizontal de votre texte de contenu. Que vous préfériez une mise en page alignée à gauche, centrée ou alignée à droite, cette propriété garantit que votre contenu s’harmonise avec votre intention globale de conception.</td></tr><tr><td><strong>Arrière-plan CMS</strong></td><td>Utilisez le contenu de votre système de gestion de contenu comme arrière-plan de votre bannière, afin de garantir la cohérence et la facilité des mises à jour.</td></tr><tr><td><strong>URL de l’arrière-plan</strong></td><td>Définissez un lien web spécifique pour utiliser l’image d’arrière-plan de votre bannière, offrant un contexte visuel ou une amélioration à votre contenu.</td></tr><tr><td><strong>URL du média</strong></td><td>Lien vers un élément multimédia que vous souhaitez mettre en avant aux côtés de votre bannière ou dans celle-ci. Il peut s’agir d’une vidéo, d’un audio ou d’un autre média interactif.</td></tr><tr><td><strong>Afficher le média en arrière-plan</strong></td><td>Choisissez de définir votre média comme arrière-plan de la bannière, offrant une expérience multimédia immersive tout en gardant le texte au premier plan.</td></tr><tr><td><strong>Position du média</strong></td><td>Définissez l’agencement spatial de votre média sur la bannière, qu’il soit centré, à gauche, à droite ou positionné de manière personnalisée pour compléter votre mise en page.</td></tr><tr><td><strong>Couleur de superposition</strong></td><td>Ajoutez une superposition de couleur à votre bannière, ce qui peut être utile pour améliorer la lisibilité, créer une ambiance ou s’aligner sur les couleurs de la marque.</td></tr><tr><td><strong>Cliquable</strong></td><td>Transformez votre bannière en élément interactif. Une fois activée, toute la bannière peut agir comme une entité cliquable, redirigeant les utilisateurs vers un lien spécifié ou déclenchant une action définie.</td></tr></tbody></table>
{% endtab %}

{% tab title="🏞️ Attributs du média" %}

| Paramètre                 | Description                                                                                                                                                                                             |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Lecture automatique**   | Permettez à votre média de commencer à jouer automatiquement lorsque la page se charge, offrant une expérience multimédia immédiate.                                                                    |
| **Boucle**                | Activez la lecture en boucle continue de votre média, afin qu’il recommence lorsqu’il atteint la fin.                                                                                                   |
| **Masquer les contrôles** | Choisissez de masquer les contrôles du lecteur multimédia pour un aspect plus épuré, permettant au média de se lire sans interruption de l’utilisateur.                                                 |
| **Vitesse de lecture**    | Ajustez la vitesse de lecture de votre média. Cela peut être utile pour adapter le rythme du contenu selon les préférences des utilisateurs ou l’intention de conception.                               |
| **Volume**                | Contrôlez le niveau audio de votre média afin qu’il corresponde à l’expérience utilisateur que vous souhaitez offrir, qu’il s’agisse d’une musique de fond discrète ou d’une narration audio dominante. |
| {% endtab %}              |                                                                                                                                                                                                         |

{% tab title="🎨 Apparence" %}

{% endtab %}
{% endtabs %}

### **Remarque**

**Ajustement de l’objet**:

* **`fill`**: Étire l’image pour l’adapter au conteneur, avec un risque de distorsion.
* **`contain`**: Conserve les proportions de l’image et l’ajuste à l’intérieur du conteneur sans recadrage.
* **`cover`**: Conserve les proportions de l’image, mais peut recadrer certaines parties afin de couvrir entièrement le conteneur.
* **`none`**: L’image conserve 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 et ininterrompue 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 segments de ligne courts ou de tirets.
* **`dotted`**: La bordure est composée d’une série de points ronds.
* **`double`**: Deux lignes pleines 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 un aspect 3D. L’effet dépend de la valeur de couleur de la bordure.
* **`ridge`**: Inverse de groove, elle semble sortir de la page, donnant un autre effet 3D. Le rendu visuel est प्रभावितé 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 valeur.
* **`outset`**: Inverse de inset, les bordures droite et inférieure sont ombrées, tandis que les bordures supérieure et gauche sont mises en valeur, 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**:

* **`left`**: Aligne le contenu sur le côté gauche du conteneur.
* **`center`**: Centre le contenu horizontalement dans le conteneur.
* **`right`**: 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 dynamically by asking a question.

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

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

The question should be specific, self-contained, and written in natural language.
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.