Bannière

Aperçu

Le composant Avonni Banner met en valeur vos messages sur votre site Experience Cloud en vous permettant d’afficher des médias enrichis et du texte de manière proéminente. Vous pouvez créer des titres détaillés, ajouter des légendes descriptives et inclure du contenu supplémentaire pour rendre vos messages plus attrayants.

Il est idéal pour annoncer de nouvelles fonctionnalités, partager des mises à jour ou présenter des histoires avec un équilibre entre texte et visuels.

Configuration de l’Avonni Banner

Ajout du titre et du contenu

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

Ajout du titre et du contenu

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

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

2. Options de style de texte :

• Héritage 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 votre site, en maintenant un aspect 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ées 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 général 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é, 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 une vidéo dans le design de votre bannière pour pimenter votre message et augmenter 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 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 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 en sorte que la vidéo se joue 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 à laquelle la vidéo est lue.

  • Définissez le niveau de volume de départ de 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 avec 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échargement manuel :

• Les utilisateurs peuvent télécharger 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 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 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 visuels de haute qualité et pertinents déjà présents dans le référentiel de contenu du site.

Capacités d’interaction

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 incitant à s’engager plus profondément avec le contenu.

Mise en œuvre des interactions

Pour rendre votre bannière cliquable, activez d’abord le bascule cliquable. Ensuite, utilisez la section "Link To" 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 que l’expérience utilisateur est interactive et adaptée aux besoins et objectifs spécifiques du site.

Spécifications

Remarque

Ajustement de l’objet:

• remplir: Étire l’image pour qu’elle s’adapte au conteneur, pouvant la déformer.

• contenir: Conserve le rapport d’aspect de l’image et l’adapte dans le conteneur sans recadrage.

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

• aucun: L’image conservera sa taille originale 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 courts segments de ligne ou de tirets.

• à pois: 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.

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

• crête: À l’opposé de rainure, on dirait qu’elle sort de la page, donnant un autre effet 3D. Le rendu visuel est affecté 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 intégré dans la page, tandis que les bordures droite et inférieure sont éclairées.

• saillant: À l’opposé d’encastré, les bordures droite et inférieure sont ombrées, tandis que les bordures supérieure et gauche sont éclairées, donnant l’illusion que l’élément dépasse 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.