Création d'une grille d'avantages produit dynamique pour votre modèle de page produit avec Divi et ACF

La façon dont vous concevez votre page produit a un impact immédiat sur le comportement de vos visiteurs. Une conception de page de produit bien conçue et personnalisée peut permettre aux visiteurs de décider plus facilement s'ils souhaitent acheter votre produit. Si vous cherchez un moyen de rendre votre page produit plus attrayante, vous adorerez cet article. Nous allons vous montrer comment inclure une grille d'avantages produit dynamique dans votre conception à l'aide de Divi et du plugin Advanced Custom Fields. Nous allons commencer par créer un groupe de champs pour les avantages. Nous remplirons ensuite les champs personnalisés de notre page produit et inclurons le contenu dynamique dans notre modèle de page produit. Vous pourrez également télécharger gratuitement le modèle de page de produit !

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 !

1. Installez le plug-in ACF et ajoutez le groupe de champs d'avantages du produit

Installer le plugin de champs personnalisés avancés

Pour afficher les différents avantages du produit dans le backend de nos produits, nous utiliserons le plugin gratuit Advanced Custom Fields. Accédez à votre backend WordPress > Plugins > Ajouter un nouveau > Recherchez le plugin ACF > Installer > Activer .

Accédez aux champs personnalisés et ajoutez un nouveau groupe de champs

Une fois que vous avez installé et activé le plugin ACF, vous pourrez accéder à vos champs personnalisés et ajouter un nouveau groupe de champs.

Paramètres du groupe de champs

Donnez un titre à votre nouveau groupe de champs et autorisez-le à apparaître uniquement sur les pages de produits.

• 'Type de message' est égal à 'Produit'

Ajouter le premier champ

Continuez en ajoutant un nouveau champ pour le titre de votre premier avantage produit.

• Étiquette de champ : Titre de l'avantage 1
• Type de champ : Texte

Répéter l'étape pour les champs restants

Faites de même pour les autres avantages du produit et leurs descriptions. Tous ces champs nécessitent le type de champ « Texte » qui leur est attribué.

• Titre de l'avantage 1
• Description de l'avantage 1
• Titre de l'avantage 2
• Description de l'avantage 2
• Titre de l'avantage 3
• Description de l'avantage 3
• Titre de l'avantage 4
• Description de l'avantage 4

2. Ajouter les avantages du produit aux produits

Ouvrir ou ajouter un nouveau produit

Une fois que votre groupe de champs et vos champs ont été créés, vous pouvez ajouter les avantages du produit à vos produits à un niveau individuel. Ouvrez un produit de votre choix ou créez-en un nouveau.

Remplissez les champs des avantages du produit

Et remplissez les avantages du produit.

3. Créez un modèle de page de produit dans Divi Theme Builder

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

Il est temps de se lancer avec Divi ! Pour créer un nouveau modèle, accédez au Divi Theme Builder et cliquez sur « Ajouter un nouveau modèle ».

Utiliser le modèle sur tous les produits

Nous utilisons ce modèle sur tous les produits, mais n'hésitez pas à sélectionner des produits avec une catégorie ou une étiquette spécifique à la place.

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

Ensuite, entrez le corps du modèle en cliquant sur « Ajouter un corps personnalisé » et en sélectionnant « Créer un corps personnalisé ».

Modifier la section #1

Couleur de l'arrière plan

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et changez la couleur d'arrière-plan en noir.

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

Espacement

Passez à l'onglet de conception de la section et ajoutez un rembourrage haut et bas personnalisé.

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et apportez quelques modifications aux paramètres de dimensionnement.

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

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

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

Ajouter le module d'avis de chariot Woo à la colonne

Contenu dynamique

Le seul module dont nous avons besoin dans cette ligne et cette section est un module de notification Woo Cart. Assurez-vous que « Ce produit » est sélectionné dans la zone de contenu dynamique.

• Produit : Ce produit

Couleur de l'arrière plan

Ensuite, ouvrez les paramètres du module et utilisez une couleur de fond complètement transparente.

• Couleur d'arrière-plan : rgba(0,0,0,0)

Paramètres de texte

Passez à l'onglet Conception et modifiez ensuite la police du texte dans les paramètres de texte.

• Police du texte : Karla

Paramètres des boutons

Complétez les paramètres du module en stylisant le bouton en conséquence :

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

• Police des boutons : Oswald
• Style de police des boutons : majuscules

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Ajouter la section #2

Fond dégradé

Ajoutez une autre section régulière juste en dessous de la précédente, ouvrez les paramètres de la section et utilisez un arrière-plan dégradé réactif.

• Couleur 1 : #000000
• Couleur 2 : #ffffff
• La position de départ:
  • Ordinateur de bureau : 30 %
  • Tablette : 57 %
  • Téléphone : 54 %
• Position finale :
  • Ordinateur de bureau : 30 %
  • Tablette : 57 %
  • Téléphone : 54 %

Espacement

Passez à l'onglet de conception de la section et ajoutez un rembourrage supérieur.

• Rembourrage supérieur : 150 px

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 comme suit :

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

Espacement

Nous supprimons également le rembourrage supérieur par défaut de la ligne.

• Rembourrage supérieur : 0px

Élément principal

Et pour centrer le contenu de la colonne sur le bureau, nous utiliserons deux lignes de code CSS dans l'élément principal de la ligne.

Bureau :

display: flex;
align-items: center;

Tablette et téléphone :

display: block;

Ajouter le module Woo Images à la colonne 1

Contenu dynamique

Il est temps d'ajouter des modules, en commençant par un module Woo Images dans la colonne 1. Assurez-vous que « Ce produit » est sélectionné dans la zone de contenu dynamique.

• Produit : Ce produit

Effet de défilement de mouvement vertical

Nous ajoutons un mouvement subtil à l'image en utilisant l'effet de défilement horizontal dans l'onglet avancé.

• Activer le mouvement vertical : Oui
• Décalage de départ :
  • Bureau : -4
  • Tablette et téléphone : 0
• Décalage moyen : 0
• Décalage de fin : 0
• Déclencheur d'effet de mouvement : milieu de l'élément

Ajouter le module de titre Woo à la colonne 2

Contenu dynamique

Dans la colonne 2, le premier module dont nous avons besoin est un module de titre Woo. Assurez-vous que « Ce produit » est sélectionné dans la zone de contenu dynamique.

• Produit : Ce produit

Paramètres du texte du titre

Ensuite, accédez à l'onglet Conception et stylisez le texte du titre comme suit :

• Police du titre : Oswald
• Style de police du titre : majuscule
• Couleur du texte du titre : #ffd623
• Taille du texte du titre : 80px

Espacement

Complétez le module Woo Title en ajoutant des marges gauche et droite.

• Marge de gauche : 5 %
• Marge de droite : 5 %

Ajouter le module de description Woo à la colonne 2

Contenu dynamique

Passons au module suivant, qui est un module de description Woo. Nous utilisons pour cela le contenu dynamique suivant :

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

Paramètres de texte

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

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

Dimensionnement

Ensuite, modifiez la largeur sur différentes tailles d'écran.

• Largeur : 59 % (ordinateur de bureau), 82 % (tablette et téléphone)

Espacement

Complétez le module de description Woo en ajoutant des valeurs de marge personnalisées dans les paramètres d'espacement.

• Marge supérieure : 50px
• Marge inférieure : 100px
• Marge de gauche : 5 %
• Marge de droite : 5 %

Ajouter le module Blurb à la colonne 2

Contenu dynamique

Pour afficher les avantages du produit que nous avons ajoutés dans la première partie de ce didacticiel, nous utiliserons les modules Blurb. Ajoutez un premier module Blurb et utilisez le contenu dynamique du premier avantage produit pour le titre et le corps.

• Titre : Prestation Titre 1
• Corps : Avantage Description 1

Télécharger une image

Téléchargez une image ou utilisez une icône de votre choix ensuite. Vous pouvez trouver ceux que nous avons utilisés tout au long de ce didacticiel dans le dossier de téléchargement que vous avez pu télécharger au début de ce didacticiel.

Paramètres d'image/icône

Passez à l'onglet de conception du module et modifiez les paramètres de l'image/icône comme suit :

• Placement des images/icônes : en haut
• Alignement Image/Icône : Gauche

Paramètres du texte du titre

Nous modifions ensuite les paramètres du texte du titre.

• Police du titre : Oswald
• Style de police du titre : majuscule
• Taille du texte du titre : 25px

Paramètres du corps du texte

Avec les paramètres du corps du texte.

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

Dimensionnement

Ensuite, allez dans les paramètres de dimensionnement et modifiez les largeurs. Il est important d'utiliser une largeur principale inférieure à 50%, cela nous permettra d'afficher deux modules Blurb côte à côte dans les prochaines étapes.

• Largeur de l'image : 25 %
• Largeur : 49 %

Espacement

Nous ajouterons également des espaces autour du module Blurb en utilisant des valeurs de remplissage personnalisées sur différentes tailles d'écran.

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

Élément principal

Maintenant, pour vous assurer que deux modules Blurb s'affichent l'un à côté de l'autre, il y a deux étapes importantes. La première consiste à s'assurer que la largeur du module est inférieure à 50% (comme nous l'avons fait dans l'une des étapes précédentes). Le second utilise une propriété d'affichage en ligne. Nous allons ajouter cette propriété CSS à l'élément principal du module Blurb dans l'onglet avancé.

display: inline-block;

Cloner le module Blurb trois fois

Une fois que vous avez terminé le premier module Blurb, vous pouvez le cloner trois fois. Vous remarquerez automatiquement que les modules Blurb apparaissent dans une grille.

Modifier les images du module Blurb

Modifiez l'image dans chaque module Blurb en double. Vous pouvez les trouver dans le dossier de téléchargement que vous avez pu télécharger au début de cet article.

Modifier le contenu dynamique du module Blurb

Modifiez également le contenu dynamique de chaque module Blurb en double.

• Titre : Titre de la prestation (2,3 ou 4)
• Corps : Description de l'avantage (2,3 ou 4)

Ajouter des bordures aux modules Blurb individuellement

Paramètres de bordure du module 1 Blurb

Maintenant, pour compléter notre conception de grille, nous allons ajouter des bordures aux modules Blurb à un niveau individuel. Ouvrez le premier module Blurb et utilisez une bordure droite.

• Largeur de la bordure droite : 1px
• Couleur de la bordure droite : #ffd623

Ajoutez également une bordure inférieure au premier module Blurb.

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

Paramètres de bordure du module 2 Blurb

Ensuite, ouvrez le deuxième module Blurb et utilisez une bordure inférieure.

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

Paramètres de bordure du module Blurb 3

Complétez la conception de la grille en ajoutant une bordure droite au troisième module Blurb.

• Largeur de la bordure droite : 1px
• Couleur de la bordure droite : #ffd623

Ajouter le module Woo Ajouter au panier à la colonne 2

Contenu dynamique

Le dernier module dont nous avons besoin dans notre conception est un module Woo Add to Cart. Assurez-vous que « Ce produit » est sélectionné dans la zone de contenu dynamique.

• Produit : Ce produit

Paramètres des champs

Passez ensuite à l'onglet Conception et modifiez les paramètres des champs.

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

• Champs coins arrondis : 0px (tous les coins)
• Largeur de la bordure inférieure des champs : 1px
• Couleur de la bordure inférieure des champs : #000000

Paramètres des boutons

Ensuite, stylisez le bouton en conséquence :

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

• Police des boutons : Oswald
• Style de police des boutons : majuscules

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Espacement

Et complétez les paramètres du module en ajoutant des valeurs de marge personnalisées.

• Marge supérieure : 100 pixels
• Marge de gauche : 5 %

3. Enregistrez les modifications apportées au générateur de thème et prévisualisez le résultat

Une fois que vous avez terminé la conception du modèle de page de produit, vous pouvez enregistrer toutes les modifications de votre générateur de thèmes et afficher le résultat sur vos produits !

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 votre prochain modèle de page de produit Divi. Plus précisément, nous vous avons montré comment inclure une grille d'avantages produit dynamique pour ajouter une incitation supplémentaire à votre page produit. Nous avons créé ce tutoriel en utilisant Divi en combinaison avec le plugin Advanced Custom Fields. 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.