Comment présenter de manière créative des produits populaires sur votre page de destination Divi

Lorsque vous présentez des produits populaires sur une page de destination, il est non seulement important de choisir les bons produits, mais également de les afficher de manière attrayante. Avec les nouveaux modules WooCommerce de Divi, d'innombrables nouvelles possibilités de conception sont tombées sur nos genoux. Pour vous aider à vous inspirer, nous recréerons un design de produit populaire beau et élégant que vous pourrez utiliser pour votre prochaine page de destination Divi. Vous pourrez également 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

Statique

Flotter

Mobile

Téléchargez GRATUITEMENT la mise en page des produits populaires

Pour mettre la main sur la mise en page gratuite des produits populaires, vous devrez d'abord la 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 !

Commençons à recréer !

Ajouter une nouvelle section

Espacement

Commencez par ajouter une section régulière à une nouvelle page ou à une page existante. Ouvrez les paramètres de la section et ajustez les valeurs de remplissage supérieur et inférieur en conséquence :

• Rembourrage supérieur : 8vw
• Rembourrage inférieur : 8vw

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 et modifiez les paramètres de dimensionnement de la ligne.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur: 85vw
• Largeur maximale : 100 %

Ajouter le module d'image Woo à la colonne

Contenu dynamique

Il est temps de commencer à ajouter des modules ! Le premier module dont nous avons besoin est le module Woo Image. Sélectionnez le produit que vous souhaitez afficher.

Image

Passez à l'onglet Conception et modifiez les paramètres de l'image.

• Coins arrondis de l'image : 20px (tous les coins)

• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Ajouter le module de titre Woo à la colonne

Contenu dynamique

Le prochain module dont nous avons besoin est le module Woo Title. Sélectionnez un produit de votre choix.

Paramètres du texte du titre

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

• Titre Titre Niveau : H3
• Police du titre : Prata
• Taille du texte du titre : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)

Espacement

Complétez les paramètres du module en ajoutant des valeurs de marge personnalisées sur différentes tailles d'écran.

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

Ajouter le module de description Woo à la colonne

Contenu dynamique

Passons au module suivant, qui est le module de description Woo. Sélectionnez un produit de votre choix.

Paramètres de texte

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

• Police du texte : Montserrat
• Taille du texte : 0.8vw (ordinateur de bureau), 1.6vw (tablette), 2vw (téléphone)
• Hauteur de la ligne de texte : 1,8 em

Espacement

Jouez également avec les valeurs de marge personnalisées sur différentes tailles d'écran.

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

Ajouter le module Woo Ajouter au panier à la colonne

Contenu dynamique

Juste en dessous du module de description Woo, nous ajouterons un module Woo Add To Cart. Sélectionnez un produit de votre choix.

Paramètres des champs par défaut

Passez à l'onglet de conception du module et modifiez les paramètres des champs comme suit :

• Couleur d'arrière-plan des champs : #ffffff
• Couleur du texte des champs : #3d3d3d
• Police des champs : Montserrat

• Largeur de la bordure des champs : 0px
• Couleur de la bordure des champs : #3d3d3d

Paramètres des champs de survol

Modifiez la largeur de la bordure au survol.

• Largeur de la bordure des champs : 1px

Paramètres de bouton par défaut

Ouvrez ensuite les paramètres du bouton et stylisez le bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Couleur du texte du bouton : #3d3d3d
• Couleur d'arrière-plan du bouton : #FFFFFF
• Largeur de la bordure du bouton : 0px
• Couleur de la bordure du bouton : #3d3d3d

• Police des boutons : Prata

• Rembourrage supérieur : 0.5vw
• Rembourrage inférieur : 0.5vw
• Rembourrage gauche : 2vw
• Rembourrage droit : 2vw

Paramètres du bouton de survol

Modifiez la largeur de la bordure du bouton au survol.

• Largeur de la bordure du bouton : 1px

Espacement

Ensuite, accédez à l'espacement et ajoutez des valeurs de marge personnalisées sur différentes tailles d'écran.

• Marge inférieure : 7vw (ordinateur de bureau), 14vw (tablette et téléphone)
• Marge de gauche : 2vw (ordinateur de bureau), 5vw (tablette et téléphone)
• Marge droite : 2vw (ordinateur de bureau), 5vw (tablette et téléphone)

Paramètres de bordure par défaut

Modifiez également les paramètres de bordure du module.

• Largeur de la bordure inférieure : 1px
• Couleur de la bordure inférieure : #3d3d3d

Paramètres de bordure de survol

Et supprimez la largeur de la bordure au survol.

• Largeur de la bordure inférieure : 0px

Ajouter le module de prix Woo à la colonne

Contenu dynamique

Le dernier module dont nous avons besoin dans la colonne est un module Woo Price. Sélectionnez un produit de votre choix.

Paramètres du texte du titre

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

• Police du texte du prix : Montserrat
• Poids de la police du texte du prix : léger
• Couleur du texte du prix : #333333
• Taille du texte du prix : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)
• Hauteur de la ligne de prix : 1,8 em

Espacement

Modifiez également les valeurs de marge.

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

Cloner la colonne deux fois

Une fois que vous avez terminé la colonne et tous les modules qu'elle contient, vous pouvez cloner la colonne entière deux fois.

Modifier la structure des colonnes de ligne

Modifiez ensuite la structure des colonnes de la ligne.

Modifier tout le contenu dynamique

Continuez en remplaçant tout le contenu dynamique des colonnes 2 et 3 par d'autres produits de votre choix.

Modifier l'espacement des modules de la colonne 2

Module de titre Woo

Les modules de la deuxième colonne nécessitent quelques modifications d'espacement supplémentaires. Commencez avec le module de titre Woo.

• Marge de gauche : 5vw (tous les appareils)
• Marge de droite : 5vw (tous les appareils)

Module de description de Woo

Modifiez ensuite les paramètres d'espacement du module de description Woo.

• Marge supérieure : 4vw (tous les appareils)
• Marge inférieure : 4vw (tous les appareils)
• Marge de gauche : 5vw (tous les appareils)
• Marge de droite : 5vw (tous les appareils

Module d'ajout au panier Woo

Passez aux paramètres d'espacement du module Woo Add To Cart.

• Marge de gauche : 5vw (tous les appareils)
• Marge de droite : 5vw (tous les appareils)

Module de prix Woo

Et complétez les modules de la colonne 2 en modifiant également les paramètres d'espacement du module Woo Price.

• Marge de gauche : 5vw (tous les appareils)
• Marge de droite : 5vw (tous les appareils)

Styles de colonnes

Toutes les colonnes

Couleur de l'arrière plan

Maintenant que nous avons tous nos modules en place, nous pouvons commencer à styliser les colonnes. Chacune des colonnes a besoin d'une couleur de fond blanc.

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

Frontière

Vous pouvez également ajouter « 20px » aux coins de chaque colonne.

• Coins arrondis : 20px (tous les coins)

Colonnes 1 et 3

Ombre de boîte par défaut

Continuez en ajoutant une ombre de boîte par défaut aux colonnes 1 et 3.

• Position verticale de l'ombre de la boîte : 22px
• Force du flou de l'ombre de la boîte : 150px
• Couleur de l'ombre : rgba(0,0,0,0) (bureau), rgba(0,0,0,0.1) (tablette et téléphone)

Ombre de la boîte de survol

Changez la couleur de l'ombre de survol au survol.

• Couleur de l'ombre : rgba(0,0,0,0.27)

Filtres par défaut

Ensuite, allez dans les paramètres des filtres et ajoutez un peu de flou aux colonnes 1 et 3.

• Flou : 4 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)

Filtres de survol

Supprimez le flou au survol.

• Flou : 0px

Indice Z par défaut

Attribuez la même valeur d'index z par défaut aux colonnes suivantes.

• Indice Z : 9

Indice Z de survol

Et augmentez ce même indice z en survol.

• Indice Z : 12

Colonne 1 uniquement

Transformer Traduire

Continuez en modifiant la position de la colonne 1 à l'aide de l'option de traduction de transformation.

• À droite : 7vw (ordinateur de bureau), 0vw (tablette et téléphone)
• En bas : 2vw (ordinateur de bureau), 0vw (tablette et téléphone)

Colonne 3 uniquement

Transformer Traduire

Ouvrez ensuite les paramètres de transformation de la colonne 3 et appliquez les paramètres suivants :

• À droite : 7vw (ordinateur de bureau), 0vw (tablette et téléphone)
• En bas : -2vw (ordinateur de bureau), 0vw (tablette et téléphone)

Colonne 2 uniquement

Boîte ombre

Passez aux paramètres de la colonne 2 et appliquez une ombre de boîte subtile.

• Position verticale de l'ombre de la boîte : 22px
• Force de flou d'ombre de boîte : 150px
• Couleur de l'ombre : rgba(0,0,0,0.27) (bureau), rgba(0,0,0,0.1) (tablette et téléphone)

Indice Z

Enfin, modifiez l'index z de la deuxième colonne et le tour est joué !

• Indice Z : 11

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

Statique

Flotter

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment présenter avec élégance des produits populaires sur votre page de destination Divi. Nous vous avons montré, étape par étape, comment créer un beau résultat en utilisant uniquement les options intégrées de Divi. Cet exemple de conception montre à quel point les nouveaux modules WooCommerce de Divi sont polyvalents et comment vous pouvez créer une conception Web de commerce électronique époustouflante en un rien de temps. 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.