# AX - Galerie

## Aperçu

**AX - Galerie** est un composant Experience Cloud qui affiche des images et du contenu dans quatre styles de mise en page sur les pages des sites Experience : carrousel (diaporama), onglets (sections organisées), grille (multi-colonnes) ou galerie (vitrine d’images).

Utilisez-le pour afficher des photos de produits, des portfolios de projets, des images d’études de cas, des collections de ressources ou tout contenu visuel que les utilisateurs du portail doivent parcourir. Configurez le style de mise en page, la navigation et les sources d’images dans Experience Builder sans code.

Parfait pour les catalogues de produits, portfolios visuels, bibliothèques d’images, présentations avant/après ou partout où votre portail a besoin d’affichages d’images ou de contenu attrayants

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FJToiKLlnA4RZIeE7I0Ni%2F2024-02-07_21-13-18%20(1).gif?alt=media&#x26;token=76515588-cbb1-4dcc-9004-5001d1189ff5" alt=""><figcaption></figcaption></figure>

## 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**.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F81HTiPtGZjjWPmHbMDF5%2F2024-02-07_21-14-11.png?alt=media&#x26;token=2179494c-b3d0-4570-b763-3f336626fb55" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th>Type de source de données</th><th width="248.33333333333331">Description</th><th>Quand l’utiliser</th></tr></thead><tbody><tr><td><strong>Source de données manuelle</strong></td><td>Implique la saisie manuelle des données pour les éléments de la galerie. Utile pour le contenu statique ou les éléments prédéfinis.</td><td>Idéal pour le contenu qui ne change pas fréquemment ou pour une configuration rapide avec des éléments spécifiques.</td></tr><tr><td><strong>Source de données par requête</strong></td><td>Permet de récupérer des données via une requête, en extrayant divers enregistrements/points de données depuis Salesforce.</td><td>Idéal pour des récupérations de données complexes ou lors de la mise à la source.</td></tr></tbody></table>

## **Définir une variante**

### **Carrousel**

La variante Carrousel offre un moyen dynamique et attrayant 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, en faisant un excellent choix pour mettre en avant du contenu vedette, des images de produits ou des annonces importantes.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FSDPeJtaR0mY1bFLE2Dic%2F2024-02-07_21-17-09.png?alt=media&#x26;token=76edae56-e5be-4800-9299-e0ce0c69c213" alt=""><figcaption></figcaption></figure>

**Quand l’utiliser :** Utilisez la variante Carrousel lorsque vous souhaitez :

* Attirer 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 rotatives 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 comme des boutons fléchés ou des points de pagination.
* **Option de lecture automatique :** Configurez le carrousel pour qu’il fasse défiler automatiquement les éléments, avec la possibilité de mettre en pause et de reprendre.
* **Apparence personnalisable :** Adaptez l’apparence du carrousel pour correspondre au design de votre site, en ajustant des éléments tels que les effets de transition et la durée d’affichage.

### **Onglets**

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

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FXPjifQ0PqC8J5k1SVBrq%2F2024-02-07_21-18-03.png?alt=media&#x26;token=88201252-88f4-4360-8cf7-135bab8bf714" alt=""><figcaption></figcaption></figure>

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

* Présenter des informations catégorisées de manière claire et segmentée.
* Permettre aux utilisateurs de changer facilement entre différentes sections de contenu sans quitter la page.
* Organiser du contenu tel que des spécifications produit, des catégories de services ou des onglets d’informations 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 d’un onglet à l’autre de façon fluide, garantissant une interaction simple et intuitive.
* **Design personnalisable :** Adaptez l’apparence des onglets pour les aligner sur 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 mise en page 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ù une importance égale est souhaitée, tels que :

* Listes 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 (écart) entre les éléments
* Options pour les images, titres, descriptions et 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 avant du contenu basé sur l’image, tel que :

* Portfolios photographiques
* Galeries de produits
* Contenu mis en avant centré sur l’image

**Fonctionnalités**

* Accent mis sur des images grandes et de haute qualité
* Options pour inclure des légendes ou une fonctionnalité 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, présentez des maisons en vedette dans une galerie et permettez aux utilisateurs de cliquer sur chaque image pour voir plus de détails sur une page distincte.

## Apparence / 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 :

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtiBUANZLlzY5aTG4C29z%2F2024-02-07_21-18-53.png?alt=media&#x26;token=5eb49b41-6c43-4f90-bc97-acc5b1fabce7" alt=""><figcaption></figcaption></figure>

1. **Taille :** Ajustez les dimensions globales de la galerie pour qu’elle s’intègre parfaitement à 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 :** Stylez le texte de la légende associé à chaque élément pour plus de clarté et d’emphase.
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 à l’intérieur de chaque élément de la galerie pour une présentation visuelle cohérente.
6. **Médias :** Personnalisez l’affichage des médias (images ou vidéos), en vous assurant qu’ils complètent le design global de votre galerie.
7. **Élément du diaporama :** Stylez 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 immédiat et une reconnaissance.
9. **Description de l’élément du diaporama :** Pour améliorer la lisibilité, ajustez la police, la taille et la couleur des descriptions des éléments du carrousel.
10. **Image du diaporama :** Pour une cohérence visuelle, ajustez la taille et la bordure des images du carrousel.
11. **Indicateur actif du diaporama :** Stylez l’indicateur pour l’élément actuellement visualisé, en le rendant proéminent et distinct.
12. **Indicateur inactif du diaporama :** Personnalisez les indicateurs pour les éléments non actifs afin d’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 :** Stylez 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 de l’onglet actif/au survol :** Stylez 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 d’arrière-plan ou l’image des onglets pour les aligner sur le thème général de votre site.
18. **Libellé de l’onglet :** Personnalisez la police, la taille et la couleur des libellés d’onglet pour plus de clarté et d’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.
