Le bloc Galerie avancée vous permet d'intégrer facilement une ou plusieurs galeries d'images à vos pages SeedProd. Ce bloc vous offre un contrôle total sur la présentation de vos images, avec des options pour les colonnes, l'espacement, les superpositions et les effets interactifs.
Que vous présentiez un portfolio, affichiez des photos de produits, créiez une galerie de photos ou mettiez en avant les membres de votre équipe, le bloc Galerie avancée offre la flexibilité et les options de style dont vous avez besoin pour créer des collections d'images visuellement époustouflantes qui captiveront vos visiteurs.
Ajouter le bloc Galerie avancée à vos pages
Suivez ces étapes pour ajouter un bloc Galerie avancée à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc Galerie avancée dans la section souhaitée de votre page.
Le bloc Galerie avancée se trouve sous Design > Avancé et peut être glissé dans n'importe quelle section de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Galerie avancée pour ouvrir ses paramètres. Dans l'onglet Contenu, vous pouvez ajouter des images et configurer l'affichage de votre galerie.
Images de la galerie :
- Type : Choisissez entre le mode d'affichage Simple (une seule image) ou Multiple (galerie d'images).
- Image / Choisir une nouvelle image : pour le type Unique, cliquez pour sélectionner une image dans votre bibliothèque multimédia.
- Ajouter des images à la galerie : pour le type Multiple, cliquez pour sélectionner plusieurs images à la fois afin de créer votre galerie. Vous pouvez sélectionner autant d'images que vous le souhaitez.
Sélectionnez « Unique » pour afficher une seule image, ou « Multiple » pour créer une galerie multi-images.
Cliquez sur Ajouter des images à la galerie pour sélectionner plusieurs images dans votre bibliothèque multimédia.
Paramètres :
- Colonne : définissez le nombre de colonnes dans la grille de votre galerie. Plus il y a de colonnes, plus la mise en page est compacte, tandis que moins il y a de colonnes, plus chaque image est mise en valeur.
- Espacement : contrôlez l'espace entre les images dans votre galerie. Ajustez cette valeur pour créer des mises en page plus serrées ou plus espacées.
- Lien : choisissez où les images renvoient lorsqu'on clique dessus. Les options disponibles sont Aucun (pas de lien), Fichier multimédia (ouvre l'image en taille réelle) ou URL personnalisée (renvoie vers une page spécifique).
- Format d'image : sélectionnez les proportions de vos images. Les options disponibles sont 1:1 (carré), 3:2, 4:3, 9:16 (portrait), 16:9 (paysage) et 21:9 (ultra-large). Cela garantit un affichage cohérent de toutes les images.
- Taille de l'image : choisissez la taille d'affichage de vos images : miniature, moyenne ou grande. Les tailles plus grandes affichent plus de détails, mais se chargent plus lentement.
Superposition :
- Superposition d'arrière-plan : activez ou désactivez la superposition d'une couleur sur vos images. Cela permet de mettre en valeur le texte et les informations.
- Titre : choisissez ce qui s'affichera en tant que titre superposé sur les images. Les options disponibles sont Aucun, Titre, Légende, Texte alternatif ou Description à partir des métadonnées de votre image.
- Description : choisissez ce qui doit s'afficher comme description superposée. Les options disponibles sont Aucune, Titre, Légende, Texte alternatif ou Description.
- Couleur du texte : définissez la couleur du texte superposé afin d'assurer un bon contraste et une bonne lisibilité.
- Couleur d'arrière-plan : choisissez la couleur de l'arrière-plan de la superposition qui apparaît derrière le texte.
- Typographie d'en-tête : personnalisez les propriétés de police pour les titres superposés, notamment la famille, la taille, le poids et le style de police.
La section Paramètres vous permet de personnaliser les colonnes, l'espacement, les liens, le format d'image, la taille des images et les options de superposition.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Galerie avancée :
Styles :
- Ombre d'image : ajoutez des effets d'ombre à vos images pour leur donner de la profondeur. Choisissez parmi Aucune, Ligne fine, Petite, Moyenne, Grande, Très grande, 2 fois plus grande ou Ombre portée vers le bas.
- Bordure d'image : activez les bordures autour des images de votre galerie.
- Rayon de bordure : contrôlez l'arrondi des coins de l'image. Des valeurs plus élevées créent des coins plus arrondis, tandis que zéro crée des coins nets.
- Style de bordure : choisissez l'apparence de la bordure : continue (ligne continue), pointillée (petits points) ou en pointillés (petits traits).
- Couleur des bordures : sélectionnez la couleur des bordures de votre image.
- Largeur de la bordure : définissez l'épaisseur de la bordure pour chaque côté (haut, droite, bas, gauche). Cela vous permet de créer des effets de bordure uniques.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc galerie (haut, droite, bas, gauche). Cela détermine l'espace qui apparaîtra entre la galerie et les éléments environnants.
- Remplissage : ajustez l'espacement intérieur de votre bloc galerie (haut, droite, bas, gauche). Cela crée un espace entre le contenu de la galerie et ses bords.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc galerie. Cet identifiant est créé automatiquement par SeedProd pour le personnalisation du style ou le ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez n'importe quel attribut HTML à l'élément wrapper de la galerie. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur (par exemple, data-gallery|portfolio)
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc galerie sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc galerie sur les tablettes.
- Masquer sur mobile : masquer le bloc galerie sur les appareils mobiles
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque la galerie apparaît à l'écran. Les options comprennent Rebond, Fondu entrant, Zoom avant, Rotation et bien d'autres encore. Cela ajoute un intérêt visuel et attire l'attention sur votre galerie.
L'onglet Avancé propose des options pour les ombres, les bordures, l'espacement, les attributs, la visibilité des périphériques et les effets d'animation des images.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Advanced Gallery et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Galerie avancée à votre page ! Ce bloc puissant vous permet de présenter une ou plusieurs galeries d'images tout en contrôlant entièrement la mise en page, le style et les effets interactifs. Testez différentes mises en page, différents formats d'image et différents styles de superposition pour créer une galerie qui correspond parfaitement à votre marque et captive votre public.