# AX - Galerie

## Vue d’ensemble

**AX - Galerie** est un composant Experience Cloud qui affiche des images et du contenu selon quatre styles de mise en page sur les pages des sites Experience : carrousel (diaporama), onglets (sections organisées), grille (multicolonne) ou galerie (présentation 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 autre 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, les portfolios visuels, les bibliothèques d’images, les présentations avant/après ou partout où votre portail a besoin d’affichages attrayants d’images ou de contenu

<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>

***

## Premiers pas

Utilisez ce simple tutoriel pour apprendre les bases du composant Galerie et commencer à créer vos cas d’utilisation.

{% @arcade/embed flowId="QrGyk84126ycSIM6P0oX" url="<https://app.arcade.software/share/QrGyk84126ycSIM6P0oX>" %}

***

## 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 du contenu statique ou des éléments prédéfinis.</td><td>Idéal pour le contenu qui change peu fréquemment ou pour une configuration rapide avec des éléments spécifiques.</td></tr><tr><td><strong>Source de données de 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 la récupération de données complexes ou lorsqu’il faut s’approvisionner.</td></tr></tbody></table>

## **Définir une variante**

### **Carrousel**

La variante Carrousel offre une façon dynamique et engageante de mettre en valeur votre contenu, vos images ou vos cartes. Elle est conçue pour afficher les éléments séquentiellement dans un format de diaporama, ce qui en fait un excellent choix pour mettre en avant du contenu phare, 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 :

* Captez l’attention des utilisateurs avec une présentation visuellement attrayante.
* Afficher plusieurs éléments ou images de manière économe en espace.
* Créer des bannières rotatives ou des sections de contenu mis en avant sur votre site.

**Fonctionnalités :**

* **Contrôles de navigation :** Naviguez dans le carrousel à l’aide de commandes intuitives telles 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 et le style du carrousel à la conception 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 les informations, en offrant une mise en page claire et structurée qui permet aux utilisateurs de naviguer rapidement et d’accéder à 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 devez :

* Présenter des informations catégorisées dans un format clair et segmenté.
* Permettre aux utilisateurs de passer facilement d’une section de contenu à une autre sans quitter la page.
* Organiser de manière conviviale du contenu tel que des spécifications de produits, des catégories de services ou des onglets d’information.

**Fonctionnalités :**

* **Contenu segmenté :** Organisez votre contenu en onglets clairement définis, afin que les utilisateurs puissent trouver et consulter facilement les différentes sections.
* **Navigation conviviale :** Permettez aux utilisateurs de passer d’un onglet à l’autre de manière fluide, afin d’assurer une interaction simple et intuitive.
* **Conception personnalisable :** Adaptez l’apparence des onglets à votre image de marque et à l’esthétique de votre site, en modifiant des éléments comme les libellés des onglets, la mise en page et les palettes de couleurs.

### **Grille**

Présente le contenu dans une mise en page structurée à plusieurs colonnes. Chaque élément occupe une cellule de la grille.

**Quand l’utiliser :** Idéal pour afficher une collection d’éléments où une importance égale est souhaitée, comme :

* 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 (gap) 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 prominente.

**Quand l’utiliser :** Idéal pour mettre en avant du contenu basé sur l’image, tel que :

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

**Fonctionnalités**

* Accent sur des images grandes et de haute qualité
* Options pour inclure des légendes ou une fonctionnalité de lightbox pour zoomer sur les images
* Potentiel de mises en page créatives et d’effets au survol

## Interactions

La section « Lien vers » détermine ce qui se passe lorsqu’un utilisateur clique sur un élément de votre Galerie Avonni. Utilisez-la pour diriger les utilisateurs vers des pages détaillées, ouvrir un nouveau contenu ou déclencher d’autres actions.

**Exemple :**

* Par exemple, mettez en avant des maisons sélectionné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 de style

Explorez les attributs de style de la Galerie Avonni, 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 :** Mettez en forme le texte de légende associé à chaque élément pour plus de clarté et de mise en valeur.
4. **Titre :** Modifiez le texte du titre de chaque élément de la galerie pour qu’il se démarque ou s’aligne avec le thème de votre site.
5. **Adaptez l’apparence de la zone de contenu principale de chaque élément de la galerie afin d’assurer 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 la conception globale 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 dans 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 consulté pour le rendre visible et distinctif.
12. **Indicateur inactif du diaporama :** Personnalisez les indicateurs des éléments inactifs afin d’assurer une navigation fluide dans le carrousel.
13. **Bouton de navigation du diaporama :** Adaptez l’apparence des boutons de navigation pour qu’ils soient conviviaux et 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 de l’onglet actif/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 d’arrière-plan 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’onglets pour plus de clarté et d’harmonie visuelle.
19. **Sous-titre de l’onglet :** Adaptez l’apparence des sous-titres d’onglets, en fournissant de manière cohérente un contexte ou des informations supplémentaires.

***

## Exemples de cas d’usage

### Exemple 1 : Carrousel d’actualités clients

{% @arcade/embed flowId="pOjxSsq8rQ3YgZFvjMgr" url="<https://app.arcade.software/share/pOjxSsq8rQ3YgZFvjMgr>" %}

Tenez vos clients informés et engagés en mettant en avant vos derniers articles directement sur la page d’accueil de votre Experience Cloud. Le composant AX Gallery facilite l’affichage d’un carrousel d’actualités dynamique et riche en images, qui se met à jour automatiquement à mesure que de nouveaux contenus sont publiés.

***

#### **Ce que vous allez obtenir**

* **Du contenu récent en un coup d’œil :** Faites apparaître vos articles Knowledge les plus récents sur la page d’accueil, avec des images, afin que les visiteurs ne manquent aucune mise à jour.
* **Navigation sans effort :** Permettez aux clients de faire défiler les actualités de l’entreprise dans une mise en page de carrousel claire et structurée.
* **Filtrage ciblé :** Affichez uniquement les articles News en tirant parti d’un champ de liste de choix personnalisé, afin que le carrousel reste ciblé et pertinent.

***

#### **Avant de commencer**

* **`ImageId__c` champ :** Créez un champ Texte sur l’objet Knowledge pour stocker l’ID du document de contenu de l’image de chaque article.
* **`Type__c` champ :** Créez un champ Liste de choix sur l’objet Knowledge pour catégoriser les articles, en veillant à ce que la **News** valeur existe et soit appliquée à vos articles.

***

#### **Comment le configurer**

{% stepper %}
{% step %}

#### **Ajoutez le composant à votre page**

* Faites glisser le **AX Gallery** composant sur la page souhaitée dans Experience Builder.
  {% endstep %}

{% step %}

#### **Personnalisez l’affichage du composant**

* Définissez le **Titre** sur `Carrousel d’actualités`.
* Définissez le **Légende** sur `Parcourez nos articles hebdomadaires`.
* Définissez le **Nombre de colonnes** sur `3`.
  {% endstep %}

{% step %}

#### **Configurez votre source de données**

* Créez une nouvelle requête dans la configuration de la source de données.
* Sélectionner **Knowledge** comme objet (assurez-vous de sélectionner la deuxième option Knowledge dans la liste).
* Ajoutez un filtre : **Type\_\_c égal à** `News`.
* Définissez l’ordre de tri sur **Date de création, décroissant** afin que vos articles les plus récents apparaissent toujours en premier.
  {% endstep %}

{% step %}

#### **Configurez le mappage des données**

* Mapppez **Titre** au champ Knowledge `Titre` .
* Mapppez **Source du média** sur `ImageId__c` pour intégrer les images des articles.
* Définissez le **Taux de lecture** sur `5`.
  {% endstep %}

{% step %}

#### **Prévisualisez votre travail**

* Utilisez l’aperçu d’Experience Builder pour confirmer que votre carrousel affiche les bons articles, les bonnes images et la bonne mise en page avant publication.
  {% endstep %}
  {% endstepper %}

***

### Exemple 2 : galerie de produits clients

{% @arcade/embed flowId="aIu9ZNuteXdewe19LJL0" url="<https://app.arcade.software/share/aIu9ZNuteXdewe19LJL0>" %}

Offrez à vos clients une manière visuellement convaincante de découvrir votre catalogue de produits, directement depuis votre page d’accueil. En combinant le composant AX Gallery avec vos données Product, vous pouvez créer un carrousel accrocheur qui met en avant les produits phares et guide les visiteurs directement vers les pages de détail des produits.

***

#### **Ce que vous allez obtenir**

* **Une vitrine visuelle des produits :** Affichez les casques phares dans un carrousel riche en images qui encourage la navigation.
* **Navigation fluide :** Permettez aux clients de passer facilement du carrousel aux pages de détail de chaque produit.
* **Une expérience d’accueil sélectionnée avec soin :** Mettez en avant les produits les plus importants en ne faisant apparaître sur la page d’accueil que votre catalogue mis en avant.

***

#### **Avant de commencer**

* **`Type__c` champ :** Créez un champ Liste de choix sur l’objet Product2 et assurez-vous que la **Headphone** valeur existe, afin que vous puissiez filtrer le carrousel sur les bons produits.
* **`ContentDocumentId__c` champ :** Créez un champ Texte sur l’objet Product2 pour stocker l’URL de l’image de chaque produit.

***

#### **Comment le configurer**

{% stepper %}
{% step %}

#### **Ajoutez le composant à votre page**

* Faites glisser le **AX Gallery** composant sur la page souhaitée dans Experience Builder.
  {% endstep %}

{% step %}

#### **Personnalisez l’affichage du composant**

* Définissez le **Titre** sur `Carrousel de produits`.
* Définissez le **Légende** sur `Parcourez nos produits phares !`
* Définissez le **Nombre de colonnes** sur `3`.
  {% endstep %}

{% step %}

#### **Configurez votre source de données**

* Créez une nouvelle requête dans la configuration de la source de données.
* Sélectionner **Product** comme objet.
  {% endstep %}

{% step %}

#### **Configurez le mappage des données**

* Mapppez **Titre** à `Nom du produit` .
* Mapppez **Source du média** sur `ContentDocumentId__c` pour afficher l’image de chaque produit.
* Définissez le **Taux de lecture** sur `5`.
  {% endstep %}

{% step %}

#### **Prévisualisez votre travail**

* Utilisez l’aperçu d’Experience Builder pour confirmer que vos produits, images et la mise en page du carrousel apparaissent comme prévu avant publication.
  {% endstep %}
  {% endstepper %}