Comment empiler verticalement les images de la galerie Woo dans votre modèle de page de produit Divi

Par défaut, dès que vous ajoutez des images de galerie à vos produits WooCommerce, elles apparaîtront horizontalement sous l'image vedette de votre produit sur le frontend de la conception de votre page de produit. Dans certaines conceptions spécifiques, l'empilement vertical de ces images de galerie de woo peut être plus pratique, par exemple dans les conceptions de pages de produits en plein écran. Si vous cherchez un moyen rapide d'empiler verticalement les images de la galerie woo dans le modèle de page de produit que vous créez avec Theme Builder de Divi, vous adorerez ce didacticiel. Nous allons vous montrer étape par étape comment y arriver. Nous accompagnerons cette approche avec un modèle de page de produit minimal que vous pourrez également télécharger gratuitement ! Ce didacticiel fonctionne mieux sur les pages de produits qui utilisent des images avec un rapport de 1:1.

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez le modèle de page produit GRATUITEMENT

Pour mettre la main sur le modèle de page produit gratuit, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Créer un modèle de page de produit dans Divi Theme Builder

Accédez à Divi Theme Builder et ajoutez un nouveau modèle

Commencez par vous rendre dans le Divi Theme Builder et cliquez sur « Ajouter un nouveau modèle ».

Utiliser le modèle sur tous les produits

Nous utiliserons ce modèle sur tous les produits, mais n'hésitez pas à modifier les conditions comme vous le souhaitez.

Entrez dans l'éditeur de modèle de corps du modèle

Une fois que vous avez créé le modèle, cliquez sur « Ajouter un corps personnalisé » et continuez en sélectionnant « Créer un corps personnalisé » pour être redirigé vers l'éditeur de modèle.

Commencer à créer le corps du modèle de page de catégorie

Modifier la section #1

Couleur de l'arrière plan

Dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et ajoutez une couleur de fond blanc.

• Couleur d'arrière-plan : #ffffff

Espacement

Passez à l'onglet Conception et supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, passez à l'onglet Conception et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 95%
• Largeur maximale : 2560px
• Alignement des lignes : Centre

Espacement

Nous utiliserons également des rembourrages haut et bas personnalisés sur des écrans plus petits.

• Rembourrage supérieur : 100 pixels (tablette et téléphone uniquement)
• Rembourrage inférieur : 100 px (tablette et téléphone uniquement)

Élément principal CSS

Pour aligner le contenu des colonnes sur le bureau, nous utiliserons deux lignes de code CSS dans l'élément principal de la ligne. Nous allons ramener la propriété d'affichage sur tablette et téléphone.

Bureau :

display: flex;
align-items: center;

Tablette et téléphone :

display: block;

Colonne 2 Fond dégradé

Une fois les paramètres généraux de ligne définis, ouvrez les paramètres de la deuxième colonne et appliquez un arrière-plan dégradé radial.

• Couleur 1 : #f7f2ef
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 20 %
• Position finale : 20 %

Espacement de la colonne 2

Passez à l'onglet de conception de la colonne et modifiez les valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 30 % (ordinateur de bureau), 10 % (tablette et téléphone)
• Rembourrage inférieur : 10 %
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Ajouter le module Woo Images à la colonne 1

Contenu dynamique

Il est temps d'ajouter des modules ! Le premier module dont nous avons besoin dans la colonne 1 est un module Woo Images. Ce didacticiel fonctionne mieux si vous utilisez une image en vedette et des images de galerie avec un rapport 1:1. De cette façon, nous pourrons transformer les images en cercles dans les prochaines étapes. Une fois que vous avez ajouté le module Woo Images, assurez-vous que le contenu dynamique est défini sur « Ce produit ».

• Produit : Ce produit

Ajouter un module de code à la colonne 1

Ajouter un code CSS

Juste en dessous du module Woo Images, nous allons ajouter un module de code. Le code CSS que nous insérons dans ce module de code nous aidera à empiler verticalement les images de la galerie woo sur le côté gauche de notre colonne.

<style>

.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}

.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}

</style>

Ajouter le module de titre Woo à la colonne 2

Contenu dynamique

Passons à la colonne suivante. Là, le premier module dont nous avons besoin est un module de titre Woo.

• Produit : Ce produit

Paramètres du texte du titre

Passez à l'onglet de conception du module et modifiez les paramètres du texte d'en-tête comme suit :

• Police du titre : PT Sans
• Poids de la police du titre : gras
• Couleur du texte du titre : #000000
• Taille du texte du titre : 84 px (ordinateur de bureau), 60 px (tablette), 45 px (téléphone)

Ajouter le module de description Woo à la colonne 2

Contenu dynamique

Passons au module suivant, qui est un module de description Woo.

• Produit : Ce produit
• Type de description : Description courte

Paramètres de texte

Modifiez les paramètres de texte du module en conséquence :

• Police du texte : Karla
• Taille du texte : 17 px (ordinateur de bureau et tablette), 15 px (téléphone)
• Hauteur de la ligne de texte : 1,9 em

Espacement

Complétez les paramètres du module en ajoutant des marges supérieure et inférieure.

• Marge supérieure : 5 %
• Marge inférieure : 5 %

Ajouter le module Woo Price à la colonne 2

Contenu dynamique

Ajoutez un module de prix Woo juste en dessous du module de description Woo.

• Produit : Ce produit

Paramètres de texte de prix

Passez à l'onglet conception du module et modifiez les paramètres du texte du prix comme suit :

• Police de prix : PT Sans
• Poids de la police de prix : gras
• Couleur du texte du prix : #ce8654
• Taille du texte du prix : 27px

Ajouter le module Woo Ajouter au panier à la colonne 2

Contenu dynamique

Le prochain et dernier module dont nous avons besoin pour terminer ce didacticiel est un module Woo Add to Cart.

• Produit : Ce produit

Paramètres des champs

Passez à l'onglet Conception et modifiez les paramètres des champs comme suit :

• Couleur d'arrière-plan des champs : #ffffff
• Couleur du texte des champs : #000000
• Police des champs : Open Sans

• Tous les coins : 0px
• Largeur de la bordure inférieure des champs : 1px
• Couleur de la bordure inférieure des champs : #ce8654

Paramètres des boutons

Ensuite, stylisez le bouton dans les paramètres du bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #0a0201
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels

• Police des boutons : PT Sans
• Poids de la police du bouton : gras

• Rembourrage supérieur des boutons : 20 px
• Rembourrage inférieur des boutons : 20 px
• Remplissage du bouton gauche : 50 px
• Remplissage du bouton droit : 50px

Espacement

Et complétez les paramètres du module, et ce didacticiel, en ajoutant une marge supérieure au module Woo Add to Cart. Une fois que vous avez terminé de modifier le modèle de page de produit, assurez-vous d'enregistrer toutes les modifications apportées à Theme Builder avant d'afficher le résultat sur vos pages de produit !

• Marge supérieure : 5 %

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec les pages de produits que vous créez à l'aide de Theme Builder de Divi et des modules WooCommerce. Plus précisément, nous vous avons montré comment empiler verticalement les images de la galerie woo. Cette approche va bien avec une conception de page de produit en plein écran, mais elle peut s'avérer utile pour tout type de modèle de page de produit que vous créez. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.