Comment créer un modèle de page de produit Woo sur tout le site avec le générateur de thème de Divi

Le nouveau Theme Builder de Divi automatise la façon dont nous construisons nos sites Web Divi. Lors de la conception de pages de produits, par exemple, nous n'avons qu'à suivre le processus de création une seule fois, et à partir de là, nous pouvons attribuer le design à toutes nos pages de produits. C'est exactement ce que nous allons vous montrer dans le didacticiel de cas d'utilisation d'aujourd'hui. Nous vous guiderons dans la configuration d'un modèle de page de produit woo à l'échelle du site à l'aide de Divi. Nous commencerons par styliser la page de produit woo par défaut d'un produit particulier, pour l'assortir au pack de mise en page de sérigraphie. Nous allons continuer en enregistrant la mise en page dans notre bibliothèque Divi, puis en l'utilisant comme corps global sur un nouveau modèle que nous créons.

Allons-y !

Aperçu

Téléchargez l'exemple de modèle de page de produit GRATUITEMENT

Pour mettre la main sur l'exemple de modèle de page de produit gratuit, vous devez d'abord le 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 !

1. Activer Divi Builder sur un produit existant

Activer Divi et modifier les paramètres de la page

Il existe deux manières d'aborder la création d'un modèle de page de produit ; vous pouvez commencer à éditer le corps global à l'intérieur de votre modèle de page de produit, ou vous pouvez d'abord créer le design sur une page de produit individuelle. Personnellement, je préfère d'abord créer le design sur une page de produit individuelle. Il vous permet de publier le design et de voir le résultat en direct avant de l'appliquer à toutes vos pages de produits à la fois. C'est l'approche que nous adopterons aujourd'hui, alors allez-y et ouvrez l'une de vos pages existantes et modifiez la mise en page en pleine largeur.

Basculer vers Visual Builder

Une fois que vous avez modifié la mise en page dans les paramètres de page, vous pouvez commencer à créer sur le front-end.

2. Personnalisez la mise en page pour qu'elle corresponde au style du site Web/du pack de mise en page

Couleurs d'arrière-plan

À l'intérieur de Visual Builder, vous pouvez remarquer tous les éléments woo dont vous avez besoin. Nous allons modifier certains paramètres de ces modules pour qu'ils correspondent au pack de mise en page de sérigraphie. Les modifications que nous apportons sont minimes et vous aident simplement à appliquer un certain style de conception à votre page produit. Si vous travaillez sur un projet personnel, n'hésitez pas à aller aussi loin que vous le souhaitez dans la personnalisation, mais pour ce tutoriel, nous essaierons de rester simple. Nous allons commencer par modifier certaines couleurs de fond.

• Module d'avis de chariot Woo : couleur d'arrière-plan

Ouvrez le module Woo Cart Notice et modifiez sa couleur d'arrière-plan.

• Couleur d'arrière-plan : #29314f

• Module Woo Tabs : Onglets Texte/Couleurs d'arrière-plan

Continuez en ouvrant le module Woo Tabs et modifiez ensuite le texte de l'onglet et les couleurs d'arrière-plan.

• Couleur d'arrière-plan de l'onglet actif : #ffffff
• Couleur d'arrière-plan de l'onglet inactif : #29314f
• Couleur du texte de l'onglet actif : #000000
• Couleur du texte de l'onglet : #ffffff

Paramètres du corps du texte

Nous souhaitons également apporter quelques modifications au corps du texte des modules suivants :

• Module de fil d'Ariane Woo : paramètres de texte
• Module Woo Ajouter au panier : Paramètres de texte
• Module de description de Woo : paramètres de texte
• Woo Meta Module : Paramètres de texte
• Module Woo Tabs : Paramètres de texte
• Module Woo Tabs : Paramètres de texte des onglets

Ouvrez chaque module répertorié ci-dessus et modifiez la taille du texte et la hauteur de la ligne de texte comme suit :

• Taille du texte : 16 pixels (ordinateur de bureau et tablette), 14 pixels (téléphone)
• Hauteur de la ligne de texte : 2 em (ordinateur de bureau et tablette), 1,7 em (téléphone)

Paramètres du texte du titre

Nous modifions également le style de nos titres. Nous appliquerons les modifications à chacun de ces modules :

• Module de titre Woo : Paramètres du texte du titre
• Module de produits liés à Woo : Paramètres du texte du titre
• Module de produits liés à Woo : Paramètres du texte du titre du produit

Les deux seules choses que nous modifions sont la police du titre et le poids de la police du titre.

• Police du titre : Roboto
• Poids de la police du titre : gras

Couleurs de lien

Pour continuer, nous voulons nous assurer que les éléments cliquables sont mis en évidence. Nous allons changer la couleur du texte du lien des deux modules suivants :

• Module Woo Breadcrumb : Couleur du texte du lien
• Woo Meta Module : Couleur du texte du lien

Voici le code couleur que nous utilisons :

• Couleur du texte du lien : #ff7145

Paramètres de texte de prix

Nous souhaitons également styliser le texte du prix, en commençant par le module Woo Price.

• Module de prix Woo : paramètres de texte de prix

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

• Police de prix : Roboto
• Poids de la police de prix : gras
• Couleur du texte du prix : #ff7145

Ouvrez ensuite le module de produit lié à Woo.

• Module de produit lié à Woo : paramètres de texte de prix

Et apportez quelques modifications aux paramètres du texte du prix :

• Police de prix : Roboto
• Poids de la police de prix : gras
• Couleur du texte du prix : #ff7145
• Taille du texte du prix : 16px

Paramètres des boutons

Nous avons également deux boutons sur notre page produit, chacun d'eux doit être stylisé.

• Module de notification Woo Cart : Paramètres des boutons
• Module Woo Ajouter au panier : Paramètres des boutons

Modifiez les paramètres des boutons des modules comme suit :

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

• Rayon de la bordure du bouton : 100 pixels
• Espacement des lettres des boutons : 1px
• Police des boutons : Roboto
• Poids de la police du bouton : gras
• Style de police des boutons : majuscule

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Rembourrage gauche : 30 px
• Rembourrage droit : 30 px

Détails supplémentaires

Nous souhaitons appliquer quelques modifications supplémentaires à la conception de la page produit, en commençant par l'arrière-plan de la colonne 2 de la deuxième ligne de notre page.

• Colonne 2 : Couleur d'arrière-plan

Utilisez le code couleur suivant :

• Couleur de fond : #efefef

Nous modifions également l'espacement de la colonne 2.

• Colonne 2 : Espacement

Utilisez les valeurs d'espacement suivantes :

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

Enfin et surtout, nous voudrons styliser les paramètres des champs de notre module Woo Add To Cart.

• Module Woo Ajouter au panier : Paramètres des champs

Appliquez les modifications suivantes :

• Couleur d'arrière-plan des champs : #efefef
• Couleur du texte des champs : #7f7f7f
• Police des champs : Roboto
• Poids de la police des champs : gras

3. Créer un nouveau modèle pour les produits et importer la mise en page de la page de produit dans la zone du corps

Enregistrer la mise en page du produit dans la bibliothèque Divi

Une fois que vous avez terminé la conception de la page produit, vous pouvez enregistrer l'intégralité de la mise en page dans votre bibliothèque Divi.

Aller à Divi Theme Builder

Il est temps de transformer la mise en page en modèle de page de produit ! Pour ce faire, accédez au générateur de thèmes dans vos paramètres Divi.

Ajouter un nouveau modèle

Continuez en cliquant sur « Ajouter un nouveau modèle ».

Sélectionnez « Tous les produits » dans l'onglet « Utiliser sur » des paramètres de votre modèle pour que le modèle s'applique à tous vos produits à la fois.

Ajouter un corps personnalisé à partir de la bibliothèque

Ensuite, cliquez sur « Ajouter un corps global ». Au lieu de créer le corps personnalisé à partir de zéro, nous sélectionnerons la mise en page que nous venons d'enregistrer dans notre bibliothèque Divi.

Accédez à l'onglet « Vos mises en page enregistrées » pour sélectionner votre mise en page enregistrée.

4. Enregistrer les options du générateur de thème et afficher le modèle sur les produits existants

Une fois le corps de votre modèle créé, il n'y a plus qu'une chose à faire ; enregistrer les modifications. Dès que votre nouveau modèle a été enregistré, vous pouvez prévisualiser chacun de vos produits et remarquer que le même modèle de corps lui est appliqué !

Aperçu

Dernières pensées

Dans cet article, nous vous avons montré comment créer un modèle de page de produit à l'échelle du site. Nous avons commencé par modifier une page produit existante, en utilisant les modules woo de Divi. Nous avons apporté quelques modifications minimes à la page du produit, pour qu'elle corresponde au pack de mise en page de sérigraphie. Nous avons continué en enregistrant la mise en page du produit dans notre bibliothèque Divi. Nous avons ensuite créé un nouveau modèle et téléchargé la mise en page dans le corps de notre modèle de page de produit pour l'appliquer à l'ensemble de notre site Web. Nous espérons que ce tutoriel vous aidera à créer de magnifiques sites Web de commerce électronique avec le nouveau Theme Builder de Divi ! Si vous avez des questions, assurez-vous de 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.