Le bloc d'images de la galerie de produits vous permet d'insérer de manière transparente les images de la galerie de vos produits WooCommerce dans les modèles de produits uniques. Il affiche la galerie d'images complète du produit — y compris l'image principale et les miniatures — et vous offre des contrôles pour styliser le bouton de zoom, les bordures d'image et les bordures de miniatures afin de correspondre à votre conception.
Ce bloc est conçu exclusivement pour être utilisé dans les modèles de produits uniques. Avant de commencer, assurez-vous d'avoir installé WooCommerce et d'avoir publié des produits avec des images de galerie attribuées.
Ajout du bloc d'images de la galerie de produits à vos pages
Suivez ces étapes pour ajouter un bloc d'images de la galerie de produits à votre modèle de produit unique SeedProd :
Étape 1 : Ajouter le bloc
Sous Balises de modèle WooCommerce, faites glisser et déposez le bloc Images de la galerie de produits dans la section souhaitée de votre modèle de produit unique.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc d'images de la galerie de produits pour ouvrir ses paramètres. Dans l'onglet Contenu, vous trouverez les options suivantes.
Bouton de zoom :
- Position supérieure : Définissez la position verticale du bouton de zoom par rapport au haut de l'image du produit (en pixels).
- Position droite : Définissez la position horizontale du bouton de zoom par rapport au bord droit de l'image du produit (en pixels).
- Taille de la police : Définissez la taille de l'icône de zoom.
- Couleur de l'icône : Définissez la couleur de l'icône de zoom.
- Couleur de fond : Définissez la couleur de fond du bouton de zoom.
- Rayon de la bordure : Ajustez l'arrondi des coins du bouton de zoom à l'aide d'un curseur.
Bordure de l'image :
- Rayon de la bordure de l'image : Définissez l'arrondi des coins de l'image principale du produit.
- Largeur de la bordure de l'image : Définissez l'épaisseur de la bordure de chaque côté de l'image principale du produit.
Bordure des miniatures :
- Rayon de la bordure des miniatures : Définissez l'arrondi des coins des images miniatures sous l'image principale du produit.
- Largeur de la bordure des miniatures : Définissez l'épaisseur de la bordure de chaque côté des images miniatures.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser davantage l'apparence de votre bloc d'images de la galerie de produits.
Bordure :
- Style de bordure : Définissez le style de bordure de l'encapsuleur du bloc — Pleine, Pointillée ou Tirets.
- Couleur de la bordure : Définissez la couleur de la bordure de l'encapsuleur du bloc.
- Largeur de la bordure : Définissez l'épaisseur de la bordure de chaque côté de l'encapsuleur du bloc.
- Rayon de la bordure : Définissez l'arrondi des coins de l'encapsuleur du bloc.
Espacement :
- Marge : Définissez l'espacement extérieur autour du bloc sur les quatre côtés, avec des contrôles indépendants pour ordinateur, tablette et mobile.
- Rembourrage : Définissez l'espacement intérieur à l'intérieur du wrapper du bloc sur les quatre côtés, avec des contrôles par appareil.
Attributs :
- Classe personnalisée : Ajoutez une ou plusieurs classes CSS personnalisées au wrapper du bloc pour un style ciblé.
- ID CSS : SeedProd génère automatiquement un ID CSS unique pour ce bloc. Vous pouvez l'utiliser pour référencer le bloc dans du CSS ou JavaScript personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML personnalisés à l'élément wrapper du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format clé|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans d'ordinateur.
- Masquer sur tablette : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans de tablette.
- Masquer sur mobile : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans mobiles.
Effets d'animation :
- Effet de défilement : Appliquez une animation déclenchée par le défilement au bloc, y compris les options de défilement vertical et horizontal avec des contrôles de direction, de vitesse et de décalage de la fenêtre d'affichage.
- Effet de souris : Appliquez un effet de parallaxe piloté par le mouvement de la souris au bloc.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc d'images de la galerie de produits et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Galerie d'images de produit à votre modèle de produit unique ! Avec des contrôles pour le positionnement du bouton de zoom, le style de la bordure de l'image et la présentation de la bordure des miniatures, vous pouvez créer une galerie de produits soignée qui offre aux clients une vue complète et visuellement attrayante de tout ce que vous vendez.