Comment ajouter des images de produits collantes à votre modèle de page de produit Divi

Lorsqu'il s'agit d'acheter des produits en ligne, de superbes images de produits sont essentielles pour conclure la vente. C'est pourquoi la plupart des pages de produits ont ces images de produits en haut de la page, c'est donc la première chose que les acheteurs voient. Cependant, lorsque l'utilisateur fait défiler la page pour afficher plus d'informations sur le produit (descriptions, avis, etc.), l'image principale du produit n'est plus en vue. Une façon de garder ces images de produits visibles consiste à ajouter une image de produit collante qui reste visible lorsqu'un acheteur potentiel parcourt les informations de votre produit.

Dans ce tutoriel, nous allons vous montrer comment ajouter des images de produits collantes à votre modèle de page de produit Divi. Pour ce faire, nous pouvons optimiser le module d'image du produit WooCommerce de Divi pour qu'il s'affiche et reste en haut de la page tout comme l'image du produit d'origine défile hors de vue.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, 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 !

https://youtu.be/vwfPFqyVaNM

Abonnez-vous à notre chaîne Youtube

Comment télécharger le modèle

Aller à Divi Theme Builder

Pour télécharger le modèle, accédez au Divi Theme Builder dans le backend de votre site Web WordPress.

Télécharger un modèle de site Web

Ensuite, dans le coin supérieur droit, vous verrez une icône avec deux flèches. Cliquez sur l'icône.

Accédez à l'onglet d'importation, téléchargez le fichier JSON que vous avez pu télécharger dans cet article et cliquez sur « Importer des modèles Divi Theme Builder ».

Enregistrer les modifications apportées au générateur de thème Divi

Une fois que vous avez téléchargé le fichier, vous remarquerez un nouveau modèle avec une nouvelle zone de corps qui a été attribuée à Tous les messages. Enregistrez les modifications de Divi Theme Builder dès que vous souhaitez que le modèle soit activé.

Passons au didacticiel pour que nous puissions apprendre à construire cette chose à partir de zéro, d'accord ?

Comment ajouter des images de produits collantes à votre modèle de page de produit Divi

Téléchargement du modèle de page de produit Theme Builder Pack 5

Pour commencer, nous allons démarrer la conception en ajoutant l'un de nos modèles de page de produit prédéfinis. Pour importer le modèle Theme Builder, vous devrez procéder comme suit :

1. Accédez au générateur de thème Divi
2. Cliquez sur l'icône de portabilité en haut à droite de la page.
3. Sélectionnez l'onglet Importer dans la fenêtre contextuelle Portabilité.
4. Téléchargez et importez le fichier de modèle de produit Divi Divi Theme Builder 5. Une fois que vous avez téléchargé le pack ici, décompressez le fichier et vous trouverez le fichier "divi-theme-builder-pack-5-product-page-template.json" que vous devrez importer.
5. Cliquez sur le bouton Importer
6. Une fois le modèle importé, cliquez sur l'icône de modification dans la zone de corps personnalisée du modèle pour modifier la mise en page du modèle.

Ajouter une nouvelle ligne

Nous voulons que l'image du produit s'affiche une fois que l'utilisateur a fait défiler la section supérieure qui comprend déjà l'image du produit (inutile de l'afficher ici). Par conséquent, nous allons l'ajouter à une nouvelle section sous la section supérieure de la mise en page.

Allez-y et ajoutez une nouvelle section régulière sous la section supérieure.

Ouvrez les paramètres de la nouvelle section et mettez à jour le remplissage :

• Remplissage : 0px en haut, 0px en bas

Allez dans l'onglet avancé et mettez à jour l'index z :

• Indice Z : 13

C'est ainsi que l'image (l'élément enfant de cette section) restera au-dessus des autres sections/éléments de la page lors du défilement.

Ajouter la ligne

Ensuite, ajoutez une ligne à une colonne dans la section.

Ouvrez les paramètres de ligne et ajustez l'alignement et le remplissage des lignes :

• Alignement des lignes : à droite
• Remplissage : 0px en haut, 0px en bas

Ajouter une image de produit

Nous sommes maintenant prêts à ajouter l'image du produit qui finira par coller en haut de la page lors du défilement. Pour ajouter l'image du produit, copiez le module d'image du produit existant dans la section supérieure et collez-le dans notre nouvelle ligne.

Paramètres des images Woo

Ouvrez les paramètres du nouveau module woo images et ajustez le contenu comme suit :

• Afficher les images de la galerie : OFF
• Afficher le badge de vente : OFF

(REMARQUE : vous pouvez conserver les images de la galerie si vous le souhaitez. Veillez simplement à ne pas prendre trop de place car ce module d'image survolera d'autres éléments de la page.)

Sous l'onglet Conception, mettez à jour l'option Forcer la pleine largeur sur « OUI ».

Ensuite, mettez à jour les éléments suivants :

• Largeur max : 300px (bureau), 200px (téléphone)
• Alignement du module : à droite

L'ajuster le rembourrage:

• Remplissage : 10 pixels en haut, 10 pixels à droite

Sous l'onglet Avancé, mettez à jour les éléments suivants :

• Indice Z : 1
• Position collante : coller au sommet

Cela fera que l'image restera en haut de la page une fois que l'utilisateur aura passé cette image.

Une fois la position collante en place, revenez à l'onglet conception et utilisez l'option collante pour mettre à jour le filtre d'opacité afin qu'il masque l'image jusqu'à ce qu'elle devienne collante. Vous pouvez déployer l'option de style collant en survolant le paramètre et en cliquant sur l'icône de la vignette.

• Opacité : 0% (bureau), 100% (collant)

Supprimer l'espacement de la section, de la ligne et de la colonne

À l'heure actuelle, nous avons un espacement indésirable que la nouvelle image du produit utilise dans le flux de notre mise en page. Pour supprimer cet espacement, tout ce que nous avons à faire est de donner à la colonne une valeur de hauteur personnalisée qui est soit « 0 » ou quelque chose de vraiment bas. L'image du produit sera toujours affichée/débordée même si elle a une colonne sans aucune hauteur réelle.

Ouvrez les paramètres de colonne et ajoutez le CSS personnalisé suivant à l'élément principal :

height: 15px;

C'est ça! Nous avons tous terminé.

Résultat final

Découvrez le résultat final en consultant une publication en direct sur votre site.

Dernières pensées

L'ajout d'une image de produit collante à votre modèle de page de produit dans Divi est un moyen rapide et facile de garder vos produits en vue pendant que les visiteurs explorent votre produit. Et, vous pouvez également choisir de coller ce bouton Ajouter au panier à côté de lui en utilisant la même technique. Quoi qu'il en soit, j'espère que cela vous aidera dans votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!