Créer une grille dynamique des avantages du produit pour les modèles de page de produit en utilisant Divi et ACF

La façon dont vous Concevez les pages de produits affecte directement le comportement des visiteurs. Des pages de produits bien conçues et personnalisées permettent aux visiteurs de décider plus facilement s’ils veulent acheter votre produit. Si vous cherchez un moyen de rendre votre page produit plus attrayante, vous aimerez cet article. Nous vous montrerons comment utiliser les plug – ins Divi et Advanced Custom Fields pour inclure une grille dynamique des avantages du produit dans votre projet. Nous allons d’abord créer un ensemble de champs de prestations. Nous remplirons ensuite des champs personnalisés sur la page produit et inclurons du contenu dynamique dans le modèle de page produit. Vous pouvez également télécharger gratuitement le modèle de page produit!
On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Téléchargement gratuit modèle de page produit pour obtenir un modèle de page produit gratuit, vous devez d’abord le télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Veuillez vérifier votre adresse e – mail pour confirmer
Vous êtes membre et recevez gratuitement la version hebdomadaire du pain Divi! 1. Installez le plug – in ACF et ajoutez le Groupe de champs de Benefits de produits installez le plug – in Advanced Custom Fields pour voir les différents avantages du produit à l’arrière – plan de notre produit, nous utiliserons le plug – in gratuit Advanced Custom Fields. Aller à l’arrière – plan WordPress > plug – ins > Ajouter nouveau contenu > Rechercher les plug – ins ACF > installer > activer. Allez aux champs personnalisés et ajoutez de nouveaux groupes de champs une fois que vous avez installé et activé le plug – in ACF, vous pouvez accéder aux champs personnalisés et ajouter de nouveaux groupes de champs. Les groupes de champs sont définis pour assigner des titres aux nouveaux groupes de champs et pour permettre leur affichage uniquement sur les pages de produits. \
Avantages titre 1 Description des avantages titre 1 Description des avantages titre 2 Description des avantages titre 2 Description des avantages titre 3 Description des avantages titre 3 Description des avantages titre 4 description des avantages 2. Après avoir ajouté les avantages du produit au produit ouvert ou ajouté un nouveau produit pour créer des groupes de champs et des champs, vous pouvez ajouter les avantages du produit au produit séparément. Ouvrez le produit que vous avez sélectionné ou créez un nouveau produit. Remplissez les champs liés aux avantages du produit et remplissez les avantages du produit. 3. Créez un modèle de page de produit dans Divi Theme Builder allez à Divi Theme Builder et ajoutez un nouveau modèle. Il est temps de commencer à utiliser Divi! Pour créer un nouveau modèle, allez à Divi Theme Builder et exécutez C
Senior cheddar. Activer le mouvement vertical: est la compensation initiale: Bureau: – 4 tablettes et téléphones: 0 compensation moyenne: 0 décalage final: 0 effet de mouvement actif: milieu de l’élément Ajoutez le module Woo title au contenu dynamique de la colonne 2. Le premier module dont nous avons besoin est le module Woo title. Assurez – vous que ce produit est sélectionné dans la zone de contenu dynamique. Produit: ce produit Ensuite, allez à l’onglet conception et modélisez le texte du titre comme suit: police du titre: Oswald style de police du titre: majuscules couleur du texte du titre: # ffd623 taille du texte du titre: 80px Complétez le module titre du bois en ajoutant des marges gauche et droite. Marge gauche: 5% marge droite: 5% Ajoutez le formulaire de description Woo au contenu dynamique de la colonne 2, puis au module suivant, qui est un formulaire de description woo. Nous utilisons le contenu dynamique suivant pour cela: Produit: ce type de description de produit: brève description Paramètres de texte passer à l’onglet conception du module et modifier les paramètres de texte en conséquence: caractères de texte: Karla couleur du texte: # dbdbdb taille du texte: 17 Px (bureau et tablette), 15 Px (téléphone) hauteur de la ligne de texte: 1,9 em Ensuite, changez la largeur sur différentes tailles d’écran. Largeur: 59% (bureau), 82% (tablette et téléphone) L’espacement complète le formulaire de description de Woo en ajoutant des valeurs de marge personnalisées aux paramètres d’espacement. Marge supérieure: 50 pixels marge inférieure: 100 pixels marge gauche: 5% marge droite: 5% Ajouter un module Blurb au contenu dynamique de la colonne 2 pour vous montrer les avantages des produits que nous avons ajoutés dans la première partie de ce tutoriel, nous utiliserons le module Blurb. Ajouter le premier module Blurb et utiliser le contenu dynamique du premier avantage
Titre et texte du produit. Titre: prestations titre 1 Texte: prestations description 1 Téléchargez l’image Téléchargez l’image plus tard ou utilisez l’icône de votre choix. Vous trouverez dans le dossier téléchargements les outils que nous utilisons dans ce tutoriel que vous pourrez télécharger au début de ce tutoriel. Configuration de l’image \/ de l’icône passer à l’onglet conception du module et modifier les paramètres de l’image \/ de l’icône comme suit: emplacement de l’image \/ de l’icône: alignement de l’image \/ de l’icône en haut: à gauche Paramètres du texte du titre nous changerons ensuite les paramètres du texte du titre. Police de titre: Oswald style de police de titre: majuscules taille du texte de titre: 25px Paramètres du corps du texte et paramètres du texte du corps. Caractères du texte: Karla taille du texte: 17 pixels (bureau et tablette), 15 pixels (téléphone mobile) hauteur de la ligne du texte: 1,9 em Ensuite, allez au réglage de taille et changez la largeur. Il est important d’utiliser moins de 50% de la largeur principale, ce qui nous permettra d’afficher les 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érents écrans de taille. Remplissage supérieur: 8% remplissage inférieur: 8% remplissage gauche: 8% (bureau et tablette), 2% (téléphone) Remplissage droit: 8% (bureau et tablette) 2% (téléphone) Il y a maintenant deux étapes importantes pour s’assurer que les deux modules Blurb sont affichés côte à côte. La première consiste à s’assurer que la largeur du module est inférieure à 50% (comme nous l’avons fait à l’étape précédente). Le deuxième utilise les propriétés d’affichage en ligne. Nous ajouterons cet attribut CSS aux principaux éléments du module Blurb dans le schéma