Galerie

Aperçu

Le composant Avonni Gallery propose quatre façons flexibles d'afficher du contenu de manière élégante sur votre site Experience Cloud :

• Carrousel : Créez un diaporama attractif d'images ou de cartes de contenu.

• Onglets : Organisez le contenu en sections clairement étiquetées pour une navigation facile.

• Grille : Affichez les éléments dans une disposition soignée à plusieurs colonnes.

• Galerie : Mettez vos images au premier plan avec une vitrine visuellement saisissante.

Chaque option d'affichage offre une personnalisation approfondie pour correspondre au style et aux besoins de votre site.

Se connecter aux données Salesforce

La source de données est l'endroit où vous définissez le contenu de votre carrousel. Il existe deux principaux types de sources de données : Manuel et Requête.

Définir une variante

Carrousel

La variante Carrousel offre une manière dynamique et engageante de présenter votre contenu, vos images ou vos cartes. Elle est conçue pour afficher les éléments séquentiellement sous forme de diaporama, ce qui en fait un excellent choix pour mettre en avant du contenu vedette, des images de produits ou des annonces importantes.

Quand l'utiliser : Utilisez la variante Carrousel lorsque vous souhaitez :

• Capturer l'attention des utilisateurs avec une présentation visuellement attrayante.

• Afficher plusieurs éléments ou images de manière peu encombrante.

• Créer des bannières tournantes ou des sections de contenu en vedette sur votre site.

Fonctionnalités :

• Contrôles de navigation : Naviguez dans le carrousel à l'aide de contrôles intuitifs tels que des boutons fléchés ou des points de pagination.

• Option de lecture automatique : Configurez le carrousel pour faire défiler automatiquement les éléments, avec la possibilité de mettre en pause et de reprendre.

• Apparence personnalisable : Adaptez l'apparence du carrousel pour qu'elle corresponde au design de votre site, en ajustant des éléments comme les effets de transition et la durée d'affichage.

Onglets

La variante Onglets introduit une approche organisée et tabulaire de la présentation du contenu. Cette variante est idéale pour catégoriser l'information, offrant une mise en page claire et structurée qui permet aux utilisateurs de naviguer et d'accéder rapidement à différentes sections de contenu.

Quand l'utiliser : Envisagez la variante Onglets lorsque vous avez besoin de :

• Présenter des informations catégorisées dans un format clair et segmenté.

• Permettre aux utilisateurs de basculer facilement entre différentes sections de contenu sans quitter la page.

• Organiser du contenu tel que des spécifications de produit, des catégories de services ou des onglets d'information de manière conviviale.

Fonctionnalités :

• Contenu segmenté : Organisez votre contenu en onglets clairement définis, facilitant la recherche et la consultation des différentes sections par les utilisateurs.

• Navigation conviviale : Permettez aux utilisateurs de passer sans effort d'un onglet à l'autre, garantissant une interaction fluide et intuitive.

• Design personnalisable : Adaptez l'apparence des onglets pour qu'elle soit en accord avec votre image de marque et l'esthétique du site, en modifiant des éléments comme les libellés, la mise en page et les schémas de couleurs.

Grille

Présente le contenu dans une disposition structurée à plusieurs colonnes. Chaque élément occupe une cellule au sein de la grille.

Quand l'utiliser : Idéal pour afficher une collection d'éléments où un accent égal est souhaité, comme :

• Listings de produits

• Profils des membres de l'équipe

• Aperçus d'articles de blog

Fonctionnalités

• Nombre de colonnes personnalisable

• Possibilité de définir l'espacement (gap) entre les éléments

• Options pour les images, les titres, les descriptions et les boutons d'appel à l'action dans chaque cellule de la grille

Galerie

Une mise en page axée sur le visuel qui met en valeur les images de manière proéminente.

Quand l'utiliser : Idéal pour mettre en valeur du contenu basé sur l'image, tel que :

• Portfolios de photographie

• Galeries de produits

• Contenu vedette centré sur l'image

Fonctionnalités

• Mise en avant d'images grandes et de haute qualité

• Options pour inclure des légendes ou une fonctionnalité de lightbox pour zoomer sur les images

• Potentiel pour des mises en page créatives et des effets au survol

Interactions

La section "Lien vers" détermine ce qui se passe lorsqu'un utilisateur clique sur un élément de votre Avonni Gallery. Utilisez-la pour diriger les utilisateurs vers des pages détaillées, ouvrir de nouveaux contenus ou déclencher d'autres actions.

Exemple :

• Par exemple, mettez en avant des maisons présentées dans une galerie et permettez aux utilisateurs de cliquer sur chaque image pour voir plus de détails sur une page séparée.

Apparence et style

Explorez les attributs de style pour l'Avonni Gallery, chacun conçu pour affiner la présentation visuelle de votre contenu, que vous utilisiez la variante Carrousel ou Onglets :

1. Taille : Ajustez les dimensions globales de la galerie pour qu'elle s'intègre parfaitement dans votre mise en page.

2. Bordure : Personnalisez le style, la largeur et la couleur de la bordure pour encadrer efficacement le contenu de votre galerie.

3. Légende : Mettez en forme le texte de la légende associé à chaque élément pour plus de clarté et d'accentuation.

4. Titre : Modifiez le texte du titre de chaque élément de la galerie pour le faire ressortir ou l'aligner sur le thème de votre site.

5. Contenu : Adaptez l'apparence de la zone de contenu principale dans chaque élément de la galerie pour une présentation visuelle cohérente.

6. Média : Personnalisez la manière dont les médias (images ou vidéos) sont affichés, afin qu'ils complètent le design global de votre galerie.

7. Élément du diaporama : Mettez en forme les éléments individuels du carrousel, y compris l'arrière-plan, l'alignement et l'espacement.

8. Titre de l'élément du diaporama : Personnalisez l'apparence des titres au sein de chaque élément du carrousel pour un impact et une reconnaissance immédiats.

9. Description de l'élément du diaporama : Pour améliorer la lisibilité, adaptez la police, la taille et la couleur des descriptions dans les éléments du carrousel.

10. Image du diaporama : Pour une cohérence visuelle, ajustez la taille et la bordure des images dans le carrousel.

11. Indicateur actif du diaporama : Mettez en forme l'indicateur de l'élément actuellement affiché, en le rendant visible et distinct.

12. Indicateur inactif du diaporama : Personnalisez les indicateurs des éléments non actifs pour assurer une navigation fluide dans le carrousel.

13. Bouton de navigation du diaporama : Adaptez l'apparence des boutons de navigation, en veillant à ce qu'ils soient conviviaux et qu'ils correspondent au style de votre galerie.

14. Onglet : Mettez en forme les onglets individuels pour différencier les sections de contenu actives et inactives.

15. Bordure de l'onglet : Personnalisez la bordure de chaque onglet pour une segmentation claire et un attrait visuel.

16. Bordure d'onglet active/au survol : Mettez en forme la bordure des onglets actifs ou survolés pour guider visuellement les utilisateurs dans leurs interactions.

17. Arrière-plan de l'onglet : Ajustez la couleur ou l'image de fond des onglets pour qu'ils s'harmonisent avec le thème global de votre site.

18. Libellé de l'onglet : Personnalisez la police, la taille et la couleur des libellés d'onglet pour la clarté et l'harmonie visuelle.

19. Sous-titre de l'onglet : Adaptez l'apparence des sous-titres des onglets, en fournissant de manière cohérente un contexte ou des informations supplémentaires.