Comment ajouter des informations sur le produit Slide-In à votre page produit Divi

La façon dont vous concevez vos pages de produits en dit long sur votre boutique en général. La conception de votre page produit est une partie importante de l'expérience d'achat, donc faire un effort supplémentaire en vaut souvent la peine. Si vous cherchez à créer une page produit un peu plus interactive, vous adorerez cet article. Dans ce didacticiel, nous allons vous montrer comment ajouter des informations de produit coulissantes dans une présentation de page de produit magnifiquement construite. Nous transformerons également cette mise en page en modèle de page de produit et vous pourrez télécharger le fichier JSON gratuitement !

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 GRATUITEMENT le modèle de page de produit coulissant

Pour mettre la main sur le modèle de page de produit coulissant, 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 !

1. Ajouter/Ouvrir un produit WooCommerce

détails du produit

Commencez par créer un nouveau produit ou en ouvrir un existant. Pour obtenir exactement le même résultat dans la conception, vous devrez ajouter les détails suivants à votre produit :

• Nom
• La description
• Image du produit avec fond transparent
• Prix
• Catégorie

Activer Divi Builder et modifier les paramètres de la page produit

Activez le Divi Builder et modifiez la mise en page dans le coin supérieur droit.

• Mise en page : pleine largeur

Basculer vers Visual Builder

Une fois que vous avez modifié la mise en page, vous pouvez passer au Visual Builder de Divi en cliquant sur « Build On The Front End ».

2. Créer une mise en page de page de produit pour les informations sur le produit

Supprimer plusieurs lignes sur la page

Dans l'éditeur de page de produit, vous remarquerez divers éléments pertinents pour votre produit. Nous n'avons besoin que des éléments de la deuxième ligne, alors allez-y et supprimez la première et la dernière ligne à l'intérieur de la section.

Modifier les paramètres de coupe

Couleur de l'arrière plan

Il est temps de commencer à modifier les différents éléments pour créer notre mise en page d'informations produit coulissante ! Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

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

Dimensionnement

Ajoutez également une hauteur minimale aux paramètres de dimensionnement. Cette étape permettra à la section de prendre toute la hauteur de votre navigateur.

• Hauteur minimale : 100 vh

Espacement

Ensuite, accédez aux paramètres d'espacement et supprimez tous les rembourrages supérieur et inférieur par défaut.

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

Visibilité

Masquez également les débordements de la section. Cela aidera à s'assurer qu'aucune barre horizontale n'apparaît lorsque les animations ont lieu.

• Débordement horizontal : masqué
• Débordement vertical : caché

Modifier les paramètres de ligne

Dimensionnement

Ensuite, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement sur différentes tailles d'écran.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 % (ordinateur de bureau), 90 % (tablette et téléphone)

Espacement

Supprimez également le rembourrage supérieur et inférieur par défaut de la ligne.

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

Position

Ensuite, allez dans les paramètres de position et assurez-vous que la ligne reste en bas de la section en modifiant les paramètres en conséquence :

• Position : Absolu (ordinateur de bureau), par défaut (tablette et téléphone)
• Emplacement : En bas au centre

Modifier les paramètres de la colonne 2

Couleur de l'arrière plan

Ensuite, nous allons apporter quelques modifications à la deuxième colonne. Utilisez une couleur de fond blanc.

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

Espacement

Ensuite, ajoutez des valeurs de remplissage personnalisées aux paramètres d'espacement.

• Rembourrage supérieur : 10vw
• Rembourrage inférieur : 10vw
• Rembourrage gauche : 8vw
• Rembourrage droit : 8vw

Filtre par défaut

Passez aux paramètres des filtres de la colonne et assurez-vous que les filtres de luminosité, d'inversion et de sépia conservent leur valeur par défaut dans un état normal.

• Luminosité : 100 %
• Inverser : 0%
• Sépia : 0%

Filtre de survol

Au survol, cependant, nous modifierons les valeurs en conséquence :

• Luminosité : 49%
• Inverser : 100 %
• Sépia : 100 %

Position

Nous veillons également à ce que la colonne soit placée dans le coin inférieur droit du conteneur de lignes en appliquant les paramètres de position suivants :

• Position : Absolu (ordinateur de bureau), par défaut (tablette et téléphone)
• Emplacement : En bas à droite

Modifier le module de titre Woo dans la colonne 2

Paramètres du texte du titre

Il est temps de commencer à personnaliser les différents modules de la colonne 2 ! Ouvrez le module Woo Title et modifiez les paramètres de texte H1 comme suit :

• Police du titre : Affichage Playfair
• Couleur du texte du titre : #000000
• Taille du texte du titre : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)

Modifier le module Woo Price dans la colonne 2

Paramètres de texte de prix

Ouvrez ensuite les paramètres du module de prix Woo et modifiez les paramètres du texte du prix.

• Police de prix : Poppins
• Couleur du texte du prix : #e5bc87
• Taille du texte du prix : 1.4vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)

Espacement

Ajoutez également des marges supérieures et inférieures personnalisées sur différentes tailles d'écran.

• Marge supérieure : 2vw (ordinateur de bureau), 4vw (tablette et téléphone)
• Marge inférieure : 3vw (ordinateur de bureau), 5vw (tablette et téléphone)

Modifier le module de description de Woo dans la colonne 2

Paramètres de texte

Passons au module de description Woo. Modifiez les paramètres de texte du module en conséquence :

• Police de texte : Poppins
• Poids de la police de texte : léger
• Taille du texte : 0.8vw (ordinateur de bureau), 1.8vw (tablette), 2.7vw (téléphone)
• Hauteur de la ligne de texte : 2,1 em

Espacement

Ajoutez également une marge inférieure réactive.

• Marge inférieure : 3vw (ordinateur de bureau), 5vw (tablette et téléphone)

Modifier le module Woo Ajouter au panier dans la colonne 2

Paramètres des champs

Ensuite, nous avons le module Woo Ajouter au panier. Modifiez les paramètres des champs du module.

• Couleur d'arrière-plan des champs : rgba(255,255,255,0)
• Couleur du texte des champs : #000000
• Police des champs : Poppins
• Taille du texte des champs : 0.9vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)

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

Paramètres des boutons

Passez aux paramètres du bouton et stylisez le bouton en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0.9vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Dégradé de couleur 1 : #e5bd89
• Dégradé de couleur 2 : #e5bc87
• Type de dégradé : Linéaire
• Direction du gradient : 153 degrés
• Largeur de la bordure du bouton : 0px

• Rayon de la bordure du bouton : 1px
• Police des boutons : Poppins

• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 6vw (tablette), 9vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 6vw (tablette), 9vw (téléphone)

Espacement

Complétez les paramètres du module en ajoutant une marge de bouton sur différentes tailles d'écran.

• Marge inférieure : 2vw (Destkop), 4vw (tablette et téléphone)

Modifier le module Woo Meta dans la colonne 2

Paramètres de texte

Continuez en ouvrant le Woo Meta Module et modifiez les paramètres de texte.

• Police Meta : Poppins
• Poids de la police Meta : Légère
• Taille du méta-texte : 0.8vw (ordinateur de bureau), 1.8vw (tablette), 3vw (téléphone)

Paramètres de texte de lien

Modifiez également la couleur du texte du lien.

• Couleur du texte du lien : #e5bc87

Ajouter le module de code à la colonne 2

Pour changer la couleur d'arrière-plan du zoom du module d'image Woo, nous aurons besoin d'un tout petit peu de code CSS que nous placerons dans un nouveau module de code dans la colonne 2.

Ajouter du code CSS pour changer la couleur d'arrière-plan du zoom sur l'image Woo

Ajoutez les lignes de code CSS suivantes au module de code :

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. Ajouter des paramètres d'animation synchronisés aux conteneurs

Module d'image Woo

Maintenant que nous avons stylisé les différents éléments de notre page produit, il est temps de faire en sorte que l'effet d'information produit coulissant se produise ! Pour ce faire, nous utiliserons les paramètres d'animation intégrés de Divi. Ouvrez le module Woo Image dans la colonne 1 et appliquez l'animation suivante :

• Style d'animation : diapositive
• Direction de l'animation : vers le haut
• Opacité de démarrage de l'animation : 50 %
• Courbe de vitesse d'animation : Facilité

Colonne 1

Ouvrez ensuite les paramètres de la colonne 1 et utilisez les paramètres d'animation suivants :

• Style d'animation : diapositive
• Direction de l'animation : gauche (bureau), haut (tablette et téléphone)
• Délai d'animation : 950 ms (ordinateur de bureau), 0 vw (tablette et téléphone)
• Intensité de l'animation : 25 %
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :

Colonne 2

Enfin, appliquez les paramètres d'animation suivants à la colonne 2 :

• Style d'animation : diapositive
• Direction de l'animation : gauche (bureau), haut (tablette et téléphone)
• Durée de l'animation : 1200 ms
• Délai d'animation : 800 ms (ordinateur de bureau), 0 ms (tablette et téléphone)
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation :

4. Transformez la mise en page du produit en modèle

Enregistrer la mise en page dans la bibliothèque Divi

Une fois que vous avez terminé la conception complète de la page produit, vous pouvez l'enregistrer dans votre bibliothèque Divi. Nous utiliserons cette mise en page de page de produit enregistrée pour créer un nouveau modèle de page de produit.

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

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

Utiliser le modèle sur tous les produits

Utilisez le nouveau modèle sur tous les produits.

• Utiliser sur : Tous les produits

Télécharger la mise en page dans le corps du modèle de page de produit

Ensuite, cliquez sur « Ajouter un corps personnalisé » et cliquez sur « Ajouter à partir de la bibliothèque ».

Accédez à « Vos mises en page enregistrées » et sélectionnez la mise en page du produit que vous avez téléchargée dans votre bibliothèque Divi.

5. Enregistrer les modifications apportées au générateur de thème et afficher le résultat

Une fois que vous avez téléchargé la mise en page sur votre nouveau modèle de page de produit, il ne vous reste plus qu'à enregistrer toutes les modifications apportées au générateur de thèmes et à afficher le résultat sur votre site Web !

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 pimenter vos pages de produits en vous montrant comment concevoir une mise en page d'informations sur les produits coulissante. C'est un excellent moyen d'ajouter une interaction supplémentaire à vos pages de produits. 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.