Le bloc Galerie vous permet d'ajouter et de styliser sans effort de magnifiques galeries d'images sur les pages de votre site Web, améliorant ainsi l'attrait visuel de votre contenu.
Téléchargez simplement vos images, choisissez le nombre de colonnes à afficher et configurez les options de lien et de taille — le tout sans écrire une seule ligne de code. C'est le moyen le plus rapide d'ajouter une galerie d'images propre et basée sur une grille à n'importe quelle page SeedProd.
Ajouter le bloc Galerie à vos pages
Suivez ces étapes pour ajouter un bloc Galerie à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Galerie dans la section souhaitée de votre page.
Faites glisser le bloc Galerie depuis le panneau Blocs et déposez-le dans la mise en page de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Galerie pour ouvrir ses paramètres. Dans l'onglet Contenu, téléchargez vos images et configurez l'affichage de la galerie.
Images de la galerie :
- Images : Téléchargez les photos que vous souhaitez afficher dans votre galerie. Vous pouvez sélectionner plusieurs images à la fois dans votre bibliothèque de médias WordPress.
Paramètres :
- Colonnes : Définissez le nombre de colonnes utilisées pour organiser les images de votre galerie dans la grille, de 1 à 10.
- Espacement : Ajustez l'écart entre les images de la galerie pour contrôler la proximité des images les unes par rapport aux autres.
- Lien : Choisissez ce qui se passe lorsqu'un visiteur clique sur une image de la galerie — Aucun (aucune action), Fichier Média (ouvre l'image en taille réelle), ou Pièce jointe (lie vers la page de pièce jointe WordPress de l'image).
- Taille de l'image : Sélectionnez la taille de l'image WordPress à charger — Miniature, Moyenne ou Grande. Choisir une taille plus petite peut aider à améliorer les performances de chargement de la page.
- Trier par : Choisissez comment les images sont triées — Défaut (l'ordre dans lequel vous les avez téléchargées) ou Aléatoire (mélangé à chaque chargement de page).
- Lightbox : Lorsque le Lien est défini sur Fichier Média, activez cette option pour ouvrir les images cliquées dans une superposition de lightbox plein écran au lieu de quitter la page.
L'onglet Contenu vous permet de télécharger des images et de configurer les colonnes, l'espacement, le comportement du lien, la taille de l'image et l'ordre d'affichage.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Galerie.
Styles :
- Ombre : Appliquez une ombre portée à vos images de galerie. Choisissez parmi Aucune, Cheveux fins, Petite, Moyenne, Grande, Très grande, 2x Très grande ou Ombre portée inférieure pour ajouter de la profondeur et de la dimension à vos photos.
- Couleur du texte : Définissez la couleur de tout texte affiché dans la galerie, comme les superpositions de légendes.
- Bordure de l'image : Ajoutez une bordure autour de chaque image de galerie. Configurez le Style de bordure (Uni, Pointillé ou Tirets), la Largeur de la bordure, la Couleur de la bordure, le Rayon de la bordure (pour arrondir les coins de l'image) et le Rembourrage de l'espace blanc de l'image pour contrôler l'espace entre l'image et sa bordure.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc Galerie (Haut, Droite, Bas, Gauche). Cela détermine l'espace qui apparaît entre la galerie et les éléments environnants sur la page.
- Remblai : Ajustez l'espacement intérieur de votre bloc Galerie (Haut, Droite, Bas, Gauche). Cela crée un espace entre la galerie et les bords du bloc.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Galerie. Cet ID est créé automatiquement par SeedProd pour un style personnalisé ou un ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML à l'élément conteneur de la galerie. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-gallery|portfolio).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Galerie sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Galerie sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Galerie sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bloc Galerie défile dans la vue. Les options incluent Bounce, Fade In, Zoom In, Rotate In, et bien d'autres, ajoutant une touche soignée lorsque les visiteurs font défiler la page.
L'onglet Avancé offre des préréglages d'ombre, la couleur du texte, le style de bordure de l'image, des contrôles d'espacement et des options de visibilité des appareils.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Galerie et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Galerie à votre page ! Le bloc Galerie permet de présenter facilement des photos, des portfolios ou tout contenu visuel dans une mise en page en grille épurée. Expérimentez avec différents nombres de colonnes, espacements, styles d'ombre et options de bordure pour créer une galerie qui complète parfaitement la conception de votre page.