Comment créer une page de produit propre et audacieuse avec les modules WooCommerce de Divi (téléchargement gratuit !)

Les pages de produits audacieuses ont une manière particulière d'attirer l'attention de vos visiteurs. Et avec la nouvelle mise à jour des modules WooCommerce de Divi, vous pouvez rapidement transformer votre ancienne page de produit en une page propre et audacieuse que vous et vos visiteurs allez adorer. Dans le didacticiel d'aujourd'hui, nous allons recréer une page de produit audacieuse à partir de zéro et vous pourrez également télécharger le fichier JSON gratuitement ! Ce didacticiel montre à quel point les nouveaux modules WooCommerce de Divi sont polyvalents et comment vous pouvez créer un site Web de commerce électronique hautement professionnel en un rien de temps.

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.

Téléchargez GRATUITEMENT la mise en page du produit Clean & Bold

Pour mettre la main sur la mise en page de la page de produit propre et audacieuse, vous devez d'abord la télécharger à l'aide du 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 !

Abonnez-vous à notre chaîne Youtube

1. Ajouter/Ouvrir un produit WooCommerce

détails du produit

Ouvrez un produit existant ou créez-en un nouveau. Si vous souhaitez obtenir exactement le même résultat que celui indiqué dans l'aperçu de cet article, assurez-vous d'ajouter les détails du produit suivants :

• Titre
• brève description
• longue description
• Catégorie
• L'image sélectionnée
• Prix

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

Une fois que vous avez renseigné les détails du produit, activez Divi et modifiez la mise en page en « Fullwidth ».

Basculer vers Visual Builder

Continuez en basculant vers le Visual Builder.

Supprimer la section du produit d'origine sur la page

Là, vous verrez les informations de la page du produit d'origine regroupées dans une seule section. Nous allons recréer notre design épuré et audacieux à partir de zéro, alors n'hésitez pas à supprimer cette section.

2. Créez une page de produit propre et audacieuse à l'aide de Visual Builder de Divi

Ajouter la section régulière #1

Espacement

Il est temps de commencer à créer notre page produit audacieuse ! Ajoutez une nouvelle section normale et modifiez les paramètres d'espacement de la section.

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

Débordements

Pour vous assurer que rien ne dépasse le conteneur de la section et qu'aucun défilement horizontal n'a lieu sur la page, masquez les débordements de la section dans les paramètres de visibilité.

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

Ajouter une rangée

Structure des colonnes

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

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et modifiez la couleur d'arrière-plan de la ligne.

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

Dimensionnement

Modifiez également la largeur maximale de la ligne.

• Largeur maximale : 1000px

Espacement

Ensuite, accédez aux paramètres d'espacement et ajoutez un rembourrage haut et bas personnalisé.

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

Frontière

Nous ajoutons également un rayon de bordure « 50px » aux coins supérieurs gauche et droit de la ligne.

Débordements

Complétez le paramétrage de la ligne en rendant visibles les débordements.

• Débordement horizontal : Visible
• Débordement vertical : visible

Ajouter le module Woo Breadcrumb à la colonne

Contenu dynamique

Il est temps de commencer à ajouter des modules ! Le premier module dont nous avons besoin est le Woo Breadcrumb Module.

• Produit : Ce produit

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte en conséquence :

• Police de texte : texte cramoisi
• Poids de la police de texte : gras
• Style de police de texte : majuscule
• Taille du texte : 20 pixels
• Espacement des lettres du texte : 4px

Paramètres de texte de lien

Apporte également quelques modifications aux paramètres du texte du lien.

• Poids de la police du lien : léger
• Couleur du texte du lien : #e02b20

Espacement

Ensuite, accédez aux paramètres d'espacement et ajoutez des valeurs de marge personnalisées sur différentes tailles d'écran.

• Marge inférieure : 80px
• Marge de gauche : 50 pixels (ordinateur de bureau et tablette), 20 pixels (téléphone)
• Marge de droite : 50 px (ordinateur de bureau et tablette), 20 px (téléphone)

Ajouter le module de titre Woo à la colonne

Contenu dynamique

Le prochain et dernier module dont nous avons besoin dans cette colonne est le Woo Title Module.

• Produit : Ce produit

Paramètres du texte du titre

Modifiez les paramètres du texte du titre du module comme suit :

• Police du titre : Montserrat
• Poids de la police du titre : lourd
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #000000
• Taille du texte du titre : 250 px (ordinateur de bureau), 150 px (tablette), 80 px (téléphone)
• Hauteur de la ligne de titre : 0.9em

Espacement

Augmentez la largeur du module en ajoutant des marges négatives à gauche et à droite.

• Marge de gauche : -150px (ordinateur de bureau), -100px (tablette), -50px (téléphone)
• Marge droite : -150px (ordinateur de bureau), -100px (tablette), -50px (téléphone)

Ajouter la section régulière #2

Espacement

Ajoutez une autre section juste en dessous de la précédente. Modifiez les valeurs de remplissage de la section comme suit :

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

Ajouter une rangée

Structure des colonnes

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

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et modifiez la couleur d'arrière-plan de la ligne.

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

Dimensionnement

Augmentez ensuite la largeur maximale de la ligne.

• Largeur maximale : 1000px

Espacement

Ajoutez également un rembourrage inférieur personnalisé.

• Rembourrage inférieur : 150px

Frontière

Ensuite, accédez aux paramètres de bordure et appliquez un rayon de bordure « 50px » aux coins inférieurs gauche et droit.

Débordements

Complétez les paramètres de la ligne en vous assurant que les débordements sont visibles.

• Débordement horizontal : Visible
• Débordement vertical : visible

Paramètres de la colonne 1

Image de fond dynamique

Une fois que vous avez terminé les paramètres généraux de la ligne, ouvrez les paramètres de la colonne 1 et ajoutez l'image vedette du produit à l'arrière-plan à l'aide de contenu dynamique.

• Image d'arrière-plan : image en vedette

Espacement

Ajoutez un peu de rembourrage inférieur à la colonne suivante. Cela permettra à l'image d'arrière-plan d'apparaître.

• Rembourrage inférieur : 370 px (ordinateur de bureau), 690 px (tablette), 380 px (téléphone)

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Dans la colonne 1, le seul module dont nous avons besoin est un module de texte. Ajoutez du contenu de votre choix.

Couleur de l'arrière plan

Modifiez ensuite la couleur d'arrière-plan du module.

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

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres du texte.

• Police du texte : Montserrat
• Poids de la police de texte : ultra gras
• Alignement du texte : Centre
• Couleur du texte : #FFFFFF
• Taille du texte : 30 pixels
• Hauteur de la ligne de texte : 1 em

Dimensionnement

Réduisez ensuite la taille du module dans les paramètres de dimensionnement.

• Largeur : 280px

Espacement

Et transformez le module en carré en ajoutant des valeurs de remplissage personnalisées. Nous créons également un chevauchement supérieur et gauche en utilisant une marge négative.

• Marge supérieure : -120px
• Marge de gauche : -120px
• Rembourrage supérieur : 110px
• Rembourrage inférieur : 110px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Frontière

Pour transformer le carré en cercle, nous allons ajouter un rayon de bordure « 500px » à chacun des coins du module.

Transformer Rotation

Nous allons également faire pivoter le module.

• Gauche : 330 degrés

Ajouter un module de texte à la colonne 2

Ajouter du contenu H2

Passons à la deuxième colonne ! Là, le premier module dont nous avons besoin est un module de texte normal. Entrez du contenu H2 de votre choix.

Paramètres de texte H2

Passez à l'onglet Conception et modifiez les paramètres de texte H2 comme suit :

• Police de la rubrique 2 : Montserrat
• Titre 2 Taille du texte : 35px

Espacement

Ajoutez ensuite des valeurs de marge personnalisées.

• Marge supérieure : -70 pixels (ordinateur de bureau), 100 pixels (tablette et téléphone)
• Marge de gauche : 100 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
• Marge de droite : 20px (tablette et téléphone)

Ajouter le module de description Woo à la colonne 2

Contenu dynamique

Le deuxième module dont nous avons besoin dans la colonne 2 est le module de description Woo.

• Produit : Ce produit
• Type de description : brève description

Paramètres de texte

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

• Police de texte : texte cramoisi
• Taille du texte : 19px
• Hauteur de la ligne de texte : 1,8 em
• Alignement du texte : Justifier

Espacement

Modifiez ensuite les valeurs d'espacement du module.

• Marge inférieure : 50px
• Marge de gauche : 100 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
• Marge de droite : -100 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)

Ajouter le module Woo Price à la colonne 2

Contenu dynamique

Passons au module suivant, qui est le module Woo Price.

• Produit : Ce produit

Paramètres de texte de prix

Modifiez les paramètres du texte du prix comme suit :

• Police de prix : Montserrat
• Poids de la police de prix : lourd
• Couleur du texte du prix : #000000
• Taille du texte du prix : 50px

Espacement

Modifiez ensuite les paramètres d'espacement.

• Marge inférieure : 50px
• Marge de gauche : 100 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
• Marge de droite : 20px (tablette et téléphone)

Ajouter le module Woo Ajouter au panier à la colonne 2

Contenu dynamique

Le prochain et dernier module dont nous avons besoin pour compléter cette conception est le module Woo Add To Cart.

• Produit : Ce produit

Paramètres de texte

Modifiez la police du texte dans les paramètres du texte.

• Police du texte : Montserrat

Paramètres des champs

Modifiez ensuite les paramètres des champs.

• Couleur d'arrière-plan du champ : #ffffff
• Couleur du texte des champs : #000000
• Rembourrage supérieur : 66px
• Rembourrage inférieur : 66px
• Police des champs : Montserrat
• Poids de la police des champs : lourd

• Tous les coins : 5px
• Largeur de la bordure des champs inférieurs : 3px
• Couleur de la bordure des champs : #e02b20

Paramètres des boutons

Continuez en stylisant le bouton.

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

• Rayon de bordure de bouton : 5px
• Police des boutons : Montserrat
• Poids de la police du bouton : ultra gras
• Style de police des boutons : majuscule

• Rembourrage supérieur : 50px
• Rembourrage inférieur : 50px
• Rembourrage gauche : 100 pixels (ordinateur de bureau), 50 pixels (tablette), 20 pixels (téléphone)
• Rembourrage droit : 100 pixels (ordinateur de bureau), 50 pixels (tablette), 20 pixels (téléphone)
• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Espacement

Complétez la conception du module en ajoutant des valeurs de marge gauche et droite sur des écrans plus petits et le tour est joué !

• Marge de gauche : 20 px (tablette et téléphone)
• Marge de droite : 20px (tablette et téléphone)

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.

Dernières pensées

Dans cet article, nous vous avons montré comment créer une superbe page de produit audacieuse avec un aspect et une convivialité propres à l'aide des nouveaux modules WooCommerce de Divi. Les pages de produits audacieuses ont une manière unique de mettre votre produit sous les projecteurs. 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.