> 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 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 des messages de marque. Combinez du texte, des images, des icônes et des boutons d’appel à l’action pour créer des annonces percutantes en haut des pages. Idéal pour les pages d’accueil du portail, les sections d’annonces, les mises en avant de fonctionnalités, ou partout où vous devez communiquer des informations importantes aux clients ou partenaires visitant 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 %}
## Configuration ### Ajout du titre et du contenu La configuration du titre et du contenu est un processus simple qui a un impact significatif 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 définis dans les paramètres du thème du site Experience Cloud. Cela garantit une 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 d’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, différent 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 Avonni Banner ne se limite pas au texte et aux images statiques. Incorporez de la vidéo dans la conception de votre bannière pour dynamiser votre message et accroître l’engagement des utilisateurs. * **Enrichissez votre bannière avec de la 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 les options suivantes : droite, en haut à gauche, en haut au centre, en haut à droite, gauche, en bas à gauche, en bas au centre, en bas à droite. * Facultativement, 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. * Décidez d’afficher ou de masquer les commandes 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.
### 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 sur l’identité visuelle 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 créations graphiques personnalisées, 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 du site Experience Cloud :** * L’image d’arrière-plan peut être générée de manière dynamique en fonction des expressions du site. * Cette méthode permet une personnalisation de 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 des médias 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. ### 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’un descripteur concis 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) se définissent 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 d’arrière-plan ou expression** définit l’image d’arrière-plan de la bannière — utilisez du contenu CMS ou un lien web direct. **Média CMS** et **URL du média ou expression** intégrer un élément multimédia (vidéo, audio ou autre) à la bannière ou dans la bannière. **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 colorée 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 un élément interactif qui redirige les utilisateurs ou déclenche une action définie (à configurer 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 lors du chargement de la page. **Boucle** le relit en continu une fois la fin atteinte. **Masquer les contrôles** laisse les contrôles du lecteur masqués pour un rendu plus épuré. **Vitesse de lecture** ajuste la vitesse de lecture du média. **Volume** contrôle le niveau audio, de la musique de fond discrète à 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, les encourageant à interagir plus en profondeur avec le contenu.
**Mise en œuvre des interactions** Pour rendre votre bannière cliquable, activez d’abord le bouton bascule cliquable. 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.
**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.
Type d’interactionDescription
Afficher une notificationAffiche un bref message informatif après le clic. Idéal pour confirmer des actions ou fournir un contexte.
NaviguerRedirige les utilisateurs vers une autre page ou ressource lors du clic. Adapté pour orienter vers du contenu ou des ressources connexes.
Ouvrir la modale d’alertePrésente des informations ou des avertissements dans une modale d’alerte après un clic. Utile pour des annonces importantes.
Ouvrir la boîte de dialogue du fluxLance un flux Salesforce dans une boîte de dialogue, permettant des interactions complexes. Aide à guider des processus étape par étape.
Ouvrir la confirmationDéclenche une boîte de dialogue de confirmation après l’interaction. Essentiel pour les actions nécessitant la confirmation ou l’acquittement de l’utilisateur.
## 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 :** Styliser le texte du titre. * **Alignement horizontal :** Aligner le titre. {% endtab %} {% tab title="Légende" %} * **Couleur / taille de police / style de police / graisse de police :** Styliser le texte de la légende. {% endtab %} {% tab title="Contenu" %} * **Couleur / taille de police / style de police / graisse de police :** Styliser 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’image :** Contrôlez la manière dont l’image d’arrière-plan remplit la bannière. {% endtab %} {% tab title="Média" %} * **Ajustement de l’objet :** Contrôlez la manière dont le média remplit sa zone. {% endtab %} {% endtabs %} ### **Remarque** **Ajustement de l’objet**: * **`remplir`**: Étire l’image pour l’adapter au conteneur, ce qui peut la déformer. * **`contenir`**: Conserve les proportions de l’image et l’ajuste dans le conteneur sans la rogner. * **`couvrir`**: Conserve les proportions de l’image, mais peut rogner certaines parties afin de couvrir entièrement le conteneur. * **`aucun`**: L’image conservera sa taille d’origine, quelle que soit la taille du conteneur. * **`réduction d’échelle`**: Compare la différence entre `aucun` et `contenir`, et fournit une taille d’objet concrète plus petite. **Styles de bordure :** * **`aucun`**: Aucune bordure ne sera affichée. * **`solide`**: Une ligne continue et ininterrompue crée la bordure. C’est le style le plus courant et le plus simple. * **`en tirets`**: La bordure apparaît sous forme d’une série de courts segments de ligne ou de tirets. * **`en pointillés`**: 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 reprend l’arrière-plan. * **`rainure`**: La bordure semble gravée dans la page, donnant un aspect 3D. L’effet dépend de la valeur de couleur de la bordure. * **`relief`**: À l’inverse de rainure, elle semble sortir de la page, donnant un autre effet 3D. Le rendu visuel est influencé par la couleur de la bordure. * **`encastré`**: Les bordures supérieure et gauche sont ombrées pour donner l’impression que l’élément est encastré dans la page, tandis que les bordures droite et inférieure sont mises en évidence. * **`en relief`**: À l’inverse d’encastré, 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. * **`italique`**: 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 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/experience-components/ax-banner.md?ask=&goal= ``` `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.