Le bloc Galerie Avancée vous permet d'intégrer facilement des galeries d'images uniques ou multiples sur vos pages SeedProd. Ce bloc vous donne 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 photo ou mettiez en avant des 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, faites glisser 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 image) ou Multiple (galerie d'images).
- Image / Choisir une nouvelle image : Pour le type Simple, cliquez pour sélectionner une image dans votre médiathèque.
- Ajouter des images de 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 nécessaire.
Sélectionnez Simple pour afficher une seule image, ou Multiple pour créer une galerie multi-images.
Cliquez sur Ajouter des images de galerie pour sélectionner plusieurs images de votre médiathèque.
Paramètres :
- Colonnes : Définissez le nombre de colonnes dans la grille de votre galerie. Plus de colonnes créent une mise en page plus dense, tandis que moins de colonnes donnent plus de poids à chaque image.
- Espacement : Contrôlez l'écart entre les images de votre galerie. Ajustez cette valeur pour créer des mises en page plus serrées ou plus aérées.
- Lien : Choisissez où les images renvoient lorsqu'elles sont cliquées. Les options incluent Aucune (pas de lien), Fichier Média (ouvre l'image en taille réelle) ou URL personnalisée (renvoie vers une page spécifique).
- Ratio d'aspect : Sélectionnez les proportions de vos images. Les options incluent 1:1 (carré), 3:2, 4:3, 9:16 (portrait), 16:9 (paysage) et 21:9 (ultra-large). Cela garantit que toutes les images s'affichent de manière cohérente.
- Taille de l'image : Choisissez la taille de la version de vos images à afficher : Miniature, Moyenne ou Grande. Les tailles plus grandes montrent plus de détails mais se chargent plus lentement.
Superposition :
- Superposition d'arrière-plan : Activez ou désactivez une superposition de couleur qui apparaît sur vos images. Cela aide le texte et les informations à ressortir.
- Titre : Choisissez ce qui s'affiche comme superposition de titre sur les images. Les options incluent Aucune, Titre, Légende, Texte alternatif ou Description de vos métadonnées d'image.
- Description : Choisissez ce qui s'affiche comme superposition de la description. Les options incluent Aucune, Titre, Légende, Texte alternatif ou Description
- Couleur du texte : Définissez la couleur du texte de la superposition pour 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 de l’en-tête : Personnalisez les propriétés de la police pour les titres de la superposition, y compris la famille de polices, la taille, le poids et le style
La section Paramètres vous permet de personnaliser les colonnes, l’espacement, les liens, le rapport d’aspect, la taille de l’image et les options de superposition.
Étape 3 : Personnaliser 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, Fine, Petite, Moyenne, Grande, Très grande, 2x très grande ou Ombre portée inférieure
- Bordure d’image : Activez les bordures autour des images de votre galerie
- Rayon de bordure : Contrôlez l’arrondi des coins des images. 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 Tirets (traits courts)
- Couleur de la bordure : Sélectionnez la couleur de vos bordures d’image
- Largeur de la bordure : Définissez l’épaisseur individuelle 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 de galerie (Haut, Droite, Bas, Gauche). Cela détermine l’espace qui apparaît entre la galerie et les éléments environnants
- Rembourrage : Ajustez l’espacement intérieur de votre bloc de 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 de 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 de galerie sur les écrans d’ordinateur
- Masquer sur tablette : Masquez le bloc de galerie sur les appareils tablettes
- Masquer sur mobile : Masquez le bloc de 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. Les options incluent Rebond, Fondu, Zoom avant, Rotation avant, et bien d’autres. Cela ajoute un intérêt visuel et attire l’attention sur votre galerie
L’onglet Avancé fournit des options pour les ombres d’image, les bordures, l’espacement, les attributs, la visibilité des appareils et les effets d’animation.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Galerie avancée et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Galerie avancée à votre page ! Ce bloc puissant vous permet d'afficher une ou plusieurs galeries d'images avec un contrôle total sur la mise en page, le style et les effets interactifs. Expérimentez avec différentes dispositions de colonnes, rapports d'aspect et styles de superposition pour créer une galerie qui correspond parfaitement à votre marque et engage votre public.