AX - Bannière

Aperçu

AX - Bannière est un composant Experience Cloud qui affiche des messages visibles avec des titres, des images et du contenu 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 de marque. Combinez texte, images, icônes et 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 mises en avant de fonctionnalités ou partout où vous devez communiquer des informations importantes aux clients ou partenaires visitant votre site.

Ce composant exploite des emplacements 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.

---

Configuration de la Bannière Avonni

Ajout du titre et du contenu

Configurer le titre et le 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 rapidement taper le titre et le contenu directement dans l'éditeur de propriétés personnalisé fourni avec le composant Bannière Avonni. Cette approche est conviviale et efficace, permettant des mises à jour et des modifications rapides.

2. Options de style de texte :

• Hériter du thème du site: Le composant Bannière Avonni permet au titre et au contenu d'hériter des styles de texte des paramètres de thème du site Experience Cloud. Cela garantit la cohérence sur votre site, tout en maintenant une apparence et une sensation homogènes.

• 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 évidence 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

• Centrer : Placez votre texte au centre de la bannière pour un aspect équilibré.

• Gauche : Alignez votre texte à gauche pour une mise en page traditionnelle.

• Droite : Alignez votre texte à droite pour un design original

Définir l'élément média

Le composant Bannière Avonni ne se limite pas au texte et aux images statiques. Intégrez une vidéo dans la conception de votre bannière pour dynamiser votre message et augmenter l'engagement des utilisateurs.

• Améliorez votre bannière avec 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 ces options : droite, haut gauche, haut centre, haut droite, gauche, bas gauche, bas centre, bas droite.

  • Facultativement, rendez votre vidéo cliquable afin que les utilisateurs puissent interagir en cliquant dessus.

• Paramètres vidéo supplémentaires

  • Choisissez si votre vidéo se lance automatiquement lorsque la bannière se charge.

  • Faites en sorte que la vidéo se lise 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 pour la vidéo.

Ajout d'une image d'arrière-plan

Cette fonctionnalité est utile pour créer une première impression visuelle marquante et peut être utilisée pour aligner l'apparence de la bannière sur l'image de marque ou le thème général du site.

Les images d'arrière-plan peuvent être ajoutées de trois manières 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 les graphiques personnalisés, les logos d'entreprise ou les supports marketing spécifiques déjà préparés et stockés localement.

2. Généré en utilisant 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 au sein du site Experience Cloud.

3. Depuis les médias du CMS :

• Les utilisateurs peuvent sélectionner une image depuis 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.

Capacités d'interaction

Bannière cliquable

Une des fonctionnalités interactives clés du composant Bannière Avonni est la possibilité d'être cliquable. Cela transforme les spectateurs passifs en participants actifs, les encourageant à s'engager davantage 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éfinir les interactions

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

Type d'interaction	Description
Afficher un toast	Affiche un message bref et informatif après le clic. Idéal pour confirmer des actions ou fournir du contexte.
Naviguer	Redirige les utilisateurs vers une autre page ou ressource lors du clic. Convient pour guider vers du contenu ou des ressources connexes.
Ouvrir une fenêtre d'alerte	Présente des informations ou des avertissements dans une fenêtre d'alerte suite à un clic. Utile pour les annonces importantes.
Ouvrir la boîte de dialogue Flow	Initie un flux Salesforce dans une boîte de dialogue, permettant des interactions complexes. Aide à guider des processus étape par étape.
Ouvrir une confirmation	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 la part de l'utilisateur.

---

Spécifications

🎛️ Propriétés

Paramètre	Description
Titre	Définissez le titre principal de la bannière, attirant immédiatement l'attention sur votre message principal.
Style du texte du titre	Personnalisez l'apparence de votre titre avec différents styles de texte : Titres: Choisissez parmi les niveaux de titre 1 à 4 pour des degrés d'emphase variables. Paragraphes: Sélectionnez les styles de paragraphe 1 ou 2 pour le ton et la prominence appropriés.
Légende	Accompagnez votre titre d'un sous-titre concis ou d'un descripteur, offrant un contexte supplémentaire ou un aperçu du contenu suivant.
Style du texte de la légende	Personnalisez l'apparence de votre légende avec des styles de texte prédéfinis : Titres: Sélectionnez parmi les Titres 1 à 4 selon l'importance. Paragraphes: Choisissez les Paragraphes 1 ou 2 pour compléter votre titre
Contenu	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.
Alignement horizontal du contenu	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 est conforme à l'esthétique générale de votre conception.
Arrière-plan CMS	Utilisez le contenu de votre système de gestion de contenu comme toile de fond pour votre bannière, garantissant cohérence et facilité de mise à jour.
URL de l'arrière-plan	Définissez un lien web spécifique pour obtenir l'image d'arrière-plan de votre bannière, apportant un contexte visuel ou une amélioration à votre contenu.
URL du média	Liez un élément multimédia que vous souhaitez présenter aux côtés ou comme partie intégrante de votre bannière. Il peut s'agir d'une vidéo, d'un audio ou d'un autre média interactif.
Afficher le média en tant qu'arrière-plan	Choisissez de définir votre média comme arrière-plan de la bannière, permettant une expérience multimédia immersive tout en gardant le contenu texte au premier plan.
Position du média	Désignez l'agencement spatial de votre média sur la bannière, que ce soit centré, à gauche, à droite ou toute autre position personnalisée qui complète votre mise en page.
Couleur de la superposition	Ajoutez une superposition de couleur à votre bannière, ce qui peut être utile pour améliorer la lisibilité, instaurer une ambiance ou s'aligner sur les couleurs de la marque.
Cliquable	Transformez votre bannière en un élément interactif. Une fois activé, l'ensemble de la bannière peut agir comme une entité cliquable, redirigeant les utilisateurs vers un lien spécifié ou déclenchant une action définie.

🏞️ Attributs média

🎨 Apparence

Remarque

Ajustement de l'objet:

• remplir: Étire l'image pour qu'elle remplisse le conteneur, ce qui peut la déformer.

• contenir: Conserve le ratio d'aspect de l'image et l'adapte au conteneur sans recadrage.

• couvrir: Conserve le ratio d'aspect de l'image mais peut recadrer certaines parties pour garantir que le conteneur soit entièrement couvert.

• aucun: L'image conservera sa taille d'origine indépendamment de la taille du conteneur.

• réduire: 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.

• pointillé: La bordure apparaît comme une série de segments de ligne courts ou de tirets.

• en points: La bordure est composée d'une série de points ronds.

• double: Deux lignes parallèles pleines sont utilisées pour la bordure. L'espace entre les deux lignes est transparent ou correspond à l'arrière-plan.

• rainure: La bordure semble sculptée dans la page, donnant un aspect 3D. L'effet dépend de la valeur de couleur de la bordure.

• arête: À l'inverse de 'rainure', on dirait qu'elle sort de la page, donnant un autre effet 3D. Le résultat visuel est influencé par la couleur de la bordure.

• encastré: Les bordures supérieures 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.

• saillie: Contraire de '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 dans un style italique, inclinant les caractères vers la droite.

Alignement horizontal:

• gauche: Aligne le contenu sur le côté gauche du conteneur.

• centre: Centre le contenu horizontalement dans le conteneur.

• droite: Aligne le contenu sur le côté droit du conteneur.