Galerie

Pour commencer

Utiliser le composant Galerie pour créer des galeries d’images. Les images d’une galerie s’affichent sous la forme d’une grille composée de lignes et de colonnes. Le composant Galerie est un composant multiple composé de sous éléments.

Ajouter une Galerie

1. Editez votre page
2. Cliquez sur l’icône  à l’endroit où vous souhaitez ajouter le composant
3. Dans le sélecteur de composant cliquez sur Galerie 
4. Editez le composant en cliquant dessus
5. Cliquez sur Ajouter un élément puis sur l’icône  pour l’éditer
6. Ajoutez une image. Pour en savoir plus l’ajout d’image, veuillez consulter Gérer les média
7. Prévisualisez le résultat

Réorganiser les éléments de Galerie

Vous pouvez réorganiser l’ordre des éléments au sein du composant par glisser/déposer :

1. Cliquez, maintenez et déplacez l’élément que vous souhaitez déplacer
2. Relâchez-le lorsque celui ci se trouve à la position désirée

Supprimer un élément de la Galerie

Pour supprimer un élément survolez-le et cliquez sur l’icône  à droite.

Options de l’élément de Galerie

Chaque sous-élément dispose de ses propres options.

OPTION	DESCRIPTION
Image	L’image affichée pour l’élément de la galerie
Balise Alt	La balise Alt de l’image. Pour en savoir plus sur la balise Alt, veuillez consulter Image
Titre	Le titre à afficher dans la visionneuse lightbox (facultatif)
Contenu	Le contenu à afficher dans la visionneuse lightbox (facultatif)

Paramètres du composant Galerie

Ces options s’appliquent au composant et à l’ensemble des sous-éléments. Par défaut seules les options de base sont affichées. Vous pouvez activer les options avancées en cliquant sur le bouton du même nom en haut à droite de l’onglet Paramètres.

GALERIE

OPTION	DESCRIPTION
Activer l’effet Masonry	Supprimer l’espaces vertical entre les articles malgré des images de hauteurs différentes
Effet de défilement	Appliquer un effet dynamique lorsque les éléments entre dans l’écran lors du défilement de la page
Écart	Régler l’écartement entre les images de la galerie
Afficher les séparateurs	Séparer les images par des filets verticaux. Dès que les images s’empilent, les lignes de séparation deviennent horizontales.

COLONNES

Pour chaque taille d’appareil vous pouvez déterminer le nombre de colonne à afficher pour votre galerie. Par exemple vous voudrez peut-être une seule colonne d’images sur les smartphones 3 sur les tablettes et 4 sur les ordinateurs. La valeur inherit signifie même valeur que celle renseignée immédiatement au dessus. 

LIGHTBOX

OPTION	DESCRIPTION
Lightbox	Sélectionnez si vous souhaitez afficher ou non la navigation
Transition	Sélectionnez l’effet de transition a appliquer aux éléments lors du défilement des images dans la lightbox

IMAGE

Vous pouvez renseigner les dimensions de votre image en remplissant le champ Largeur ou le champ Hauteur ou les 2. Le réglage d’une seule valeur préserve les proportions de l’image. Si vous renseignez les 2, l’image sera, si possible, redimensionnée et recadrée automatiquement.

La plateforme affiche la meilleur taille d’image, en fonction de la largeur de la fenêtre du navigateur du visiteur, parmi les tailles suivantes : 768px, 1024px, 1366px, 1600px, 1920px.

Nous vous recommandons de télécharger une image un peu plus grande que la taille maximale utilisée dans la page et de toujours renseigner une Largeur correspondant à la largeur maximal d’utilisation de l’image.

OPTION	DESCRIPTION
Effet de survol de l’image	Sélectionnez l’effet à appliquer aux images lors de leur survol
Ombre	Appliquer un effet d’ombre aux images
Ombre au survol	Appliquer un effet d’ombre aux images lors de leur survol
Ombre portée	Ajoutez une ombre portée

GÉNÉRAL

Veuillez consulter Options générales des composants

Vous pouvez modifier les styles de ces différentes options depuis Design > Styles. Pour en savoir plus sur la personnalisation des styles, consultez Styles

Avancé

Veuillez consulter Options avancées des composants