Comment créer un modèle de page de produit inspiré de l'esthétique japonaise avec Divi

Publié: 2019-11-21

Vous recherchez un design de page de produit épuré et minimal pour votre boutique en ligne ? Aujourd'hui, nous avons un design inspiré de l'esthétique japonaise. C'est un style commun pour les magazines et les sites Web japonais minimaux. Cela permet de lire facilement le texte, de voir les produits et de ne pas se laisser distraire. Suivez le didacticiel ci-dessous pour recréer ce modèle pour vos propres produits. Vous pourrez également télécharger le fichier modèle JSON gratuitement !

Allons-y.

Aperçu

Avant de commencer, examinons à quoi ressemble le design sur différents appareils.

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

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.

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. Ajouter/Ouvrir un produit Woocommerce

Données du produit

Ouvrez ou créez un nouveau produit WooCommerce. Pour recréer ce design de produit inspiré de l'esthétique japonaise, vous devrez remplir les détails suivants :

  • Titre : Ensemble de calligraphie
  • Description : Ensemble de calligraphie japonaise avec tous les outils dont vous avez besoin pour créer de magnifiques lettres. Encre de Chine noire, brosse en crin de cheval, poids de roche, bol à mélanger, ciseaux japonais et papier sans fond perdu.
  • Prix ​​: 31
  • Catégorie : Fournitures d'art
  • Image en vedette : une image paysage du produit.
  • Galerie : 4 images de paysage dans les mêmes dimensions
  • Attributs : Voir ci-dessous

L'onglet Attributs contient les informations du module d'informations supplémentaires woo. Pour ajouter ces informations, sélectionnez l'onglet Attributs et créez un attribut personnalisé comme suit :

  • Ce qui est inclu:
    • 1 brosse
    • 1 bol
    • 1 bouteille d'encre
    • 1 paire de ciseaux
    • 1 pierre de rivière
    • 1 rame de papier

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

Lorsque toutes les données du produit sont prêtes, activez le Divi Builder et modifiez la mise en page en « pleine largeur ».

Basculer vers Visual Builder

Maintenant, passez au constructeur visuel. Cliquez sur le bouton qui dit « construire sur le front-end ».

Supprimer la section de produit par défaut

Puisque nous voulons concevoir cette page de produit à partir de zéro, supprimez toute la section par défaut. Cela vous donnera une toile vierge sur laquelle travailler.

2. Recréez le design de style japonais

Ajouter une nouvelle section

Commençons à recréer la page produit esthétique japonaise ! Ajouter une nouvelle section régulière.

Fond

Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

  • Couleur de fond : gris très clair #f2f2f2

Dimensionnement

Ensuite, ajustez la taille.

  • Largeur : 100 %
  • Largeur maximale : 100 %

Espacement

Ensuite, les valeurs d'espacement comme suit :

  • Rembourrage supérieur :
    • Ordinateur de bureau : 0vw
    • Tablette + Téléphone : 2vw
  • Rembourrage inférieur :
    • Ordinateur de bureau + tablette : 2vw

Ajouter la 1ère ligne

Structure des colonnes

Ajoutez une nouvelle ligne et sélectionnez la structure de colonnes suivante :

Dimensionnement

Avant d'ajouter des modules, ajustez les paramètres de dimensionnement de la ligne comme suit :

  • Largeur:
    • Ordinateur de bureau : 80 %
    • Tablette + Téléphone : 63%

Espacement

Ajustez également les valeurs d'espacement.

  • Marge supérieure + inférieure : 0vw
  • Rembourrage supérieur + inférieur : 0vw

Ajouter un module de fil d'Ariane Woo

Teneur

Maintenant, ajoutez le premier module ; le fil d'Ariane woo.

  • Produit : Ce produit

Texte

Dans l'onglet Conception, stylisez le texte comme suit :

  • Police : Duru Sans
  • Style de police : TT
  • Couleur : Noir #000000
  • Taille:
    • Ordinateur de bureau : 0.7vw
    • Tablette : 1.5vw
    • Téléphone : 1.7vw
  • Espacement des lettres : 2px

Dimensionnement

Ensuite, ajustez la taille.

  • Largeur : 100 %

Espacement

Enfin, ajustez l'espacement.

  • Marge supérieure:
    • Bureau : 3em
    • Tablette + Téléphone : 0em
  • Marge inférieure :
    • Desktop + Tablette : 1em
    • Téléphone : 0em
  • Rembourrage haut + bas : 1em
  • Rembourrage gauche : 2 em

Ajouter une 2e rangée

Structure des colonnes

Ajoutez une deuxième ligne à l'aide de la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne et modifiez la largeur sur différentes tailles d'écran.

  • Largeur:
    • Ordinateur de bureau : 80 %
    • Tablette + Téléphone : 65%

Espacement

Ajustez également l'espacement.

  • Rembourrage supérieur : 0vw

Colonne 1 + 2 Paramètres

Fond

Continuez avec les paramètres de colonne. Les colonnes 1 et 2 ont le même style. Commencez par l'arrière-plan.

  • Couleur : Blanc #ffffff

Frontière

Et ajoutez également un style de bordure aux deux colonnes.

  • Styles de bordure : les quatre côtés
  • Largeur de la bordure : 4px
  • Couleur : #333333

Ajouter le module Woo Images à la colonne 1

Teneur

Il est temps de commencer à ajouter des modules ! Nous aurons besoin d'un module d'image woo dans la colonne 1.

  • Produit : Ce produit

Éléments

Ajustez les bascules dans l'onglet des éléments comme suit :

  • Image en vedette : Activé
  • Afficher les images de la galerie : OFF
  • Afficher le badge de vente : DÉSACTIVÉ

Ajouter le module de titre Woo à la colonne 1

Teneur

Sous l'image, ajoutez un module de titre woo. Sélectionnez le contenu.

  • Produit : Ce produit

Texte du titre

Dans l'onglet Conception, stylisez le texte.

  • Titre Titre Niveau : H1
  • Police H1 : Droid Sans
  • Style de police H1 : TT
  • Couleur H1 : Gris très foncé #333333
  • Espacement des lettres : 5px
  • Hauteur de ligne : 1 em

Espacement

Ensuite, ajustez les valeurs d'espacement.

  • Marge supérieure:
    • Tablette + Téléphone : 0vw
  • Rembourrage supérieur : 0vw
  • Rembourrage inférieur :
    • Ordinateur de bureau : 1.5vw
    • Tablette : 3,5 vw
    • Téléphone : 6vw
  • Rembourrage gauche :
    • Ordinateur de bureau : 2vw
    • Tablette + Téléphone : 5vw
  • Rembourrage droit :
    • Ordinateur de bureau + tablette : 0vw

Frontière

Complétez les paramètres du module en ajoutant une bordure.

  • Styles de bordure : bordure inférieure
  • Largeur : 4px
  • Couleur : Gris très foncé #333333

Ajouter le module de description Woo à la colonne 1

Teneur

Pour continuer, ajoutez un module de description de woo. Sélectionnez le contenu et le type de description.

  • Produit : Ce produit
  • Type de description : Description

Texte

Ensuite, stylisez le texte comme suit :

  • Police : Duru Sans
  • Style de police : TT
  • Couleur : Gris très foncé #333333
  • Taille:
    • Ordinateur de bureau : 0.8vw
    • Tablette : 1.4vw
    • Téléphone : 1.8vw
  • Espacement des lettres : 3px
  • Hauteur de ligne : 2 em

Espacement

Complétez les paramètres du module en ajoutant un rembourrage personnalisé sur différentes tailles d'écran.

  • Rembourrage supérieur + inférieur : 0vw
  • Remplissage Gauche + Droite :
    • Ordinateur de bureau : 2vw
    • Tablette + Téléphone : 5vw

Ajouter le module Woo Price à la colonne 1

Teneur

Ensuite, ajoutez un module de prix woo à la colonne et sélectionnez le produit.

  • Produit : Ce produit

Texte du prix

Stylisez le texte du prix comme suit :

  • Police : Duru Sans
  • Couleur : Gris très foncé #333333
  • Taille:
    • Ordinateur de bureau : 1.5vw
    • Tablette : 3.2vw
    • Téléphone : 4vw
  • Espacement des lettres : 3px
  • Hauteur de ligne : 1 em

Espacement

Ajustez également les paramètres d'espacement.

  • Marge inférieure :
    • Ordinateur de bureau : 1vw
    • Tablette : 3vw
    • Téléphone : 4vw
  • Rembourrage supérieur :
    • Ordinateur de bureau : 1vw
    • Tablette : 3,3 vw
    • Téléphone : 5vw
  • Rembourrage inférieur : 0vw
  • Rembourrage gauche :
    • Tablette + Téléphone : 5vw
  • Rembourrage droit :
    • Ordinateur de bureau : 2vw
    • Tablette + Téléphone : 3vw

Frontière

Enfin, ajoutez une bordure.

  • Styles de bordure : bordure supérieure
  • Largeur de la bordure : 4px
  • Couleur : Gris très foncé #333333

Ajouter Woo Ajouter au panier Module à la colonne 1

Teneur

En dessous du prix, ajoutez un module d'ajout au panier et sélectionnez le produit.

  • Produit : Ce produit

Éléments

Basculez les éléments comme suit :

  • Afficher le champ de quantité : OFF
  • Afficher le stock : ON

Fond

Ajoutez également une couleur de fond.

  • Couleur de fond : Gris très foncé #333333

Bouton

Dans l'onglet Conception, stylisez le bouton comme suit :

  • Taille du texte:
    • Ordinateur de bureau : 1vw
    • Tablette : 2.6vw
    • Téléphone : 3.1vw
  • Couleur : Blanc #ffffff
  • Largeur de la bordure : 0px
  • Espacement des lettres : 3px
  • Police : Duru Sans
  • Police : TT

Espacement

Ensuite, ajustez l'espacement.

  • Rembourrage supérieur + inférieur : 0.5vw
  • Rembourrage gauche : 1vw

Frontière

Enfin, ajoutez une bordure.

  • Styles de bordure : bordure supérieure
  • Largeur : 4px
  • Couleur : Gris très foncé #333333

Ajouter le module d'informations supplémentaires Woo à la colonne 2

Teneur

Passez à la deuxième colonne et ajoutez un module d'information supplémentaire woo. Sélectionnez le produit.

  • Produit : Ce produit

Éléments

Basculez les paramètres des éléments comme suit :

  • Afficher le titre : ON

Texte

Dans l'onglet Conception, stylisez le texte.

  • Police : Duru Sans
  • Style de police : I + TT
  • Couleur : Gris très foncé #333333
  • Taille:
    • Ordinateur de bureau : 0.7vw
    • Tablette : 1.5vw
    • Téléphone : 2.4vw
  • Espacement des lettres : 2px
  • Hauteur de ligne : 1.5em

Texte du titre

Stylisez ensuite le texte du titre.

  • Police : Duru Sans
  • Style de police : TT
  • Couleur : Gris très foncé #333333
  • Taille:
    • Ordinateur de bureau : 1vw
    • Tablette : 2vw
    • Téléphone : 2.2vw
  • Espacement des lettres : 3px
  • Hauteur de ligne : 1.5em

Texte d'attribut

N'oubliez pas de styliser également le texte de l'attribut.

  • Police : Duru Sans
  • Style de police : TT
  • Couleur : Gris très foncé #333333
  • Taille:
    • Ordinateur de bureau : 0.7vw
    • Tablette : 2vw
    • Téléphone : 2.4vw
  • Espacement des lettres : 2px

Espacement

Ensuite, ajustez l'espacement.

  • Rembourrage supérieur :
    • Ordinateur de bureau : 1vw
    • Tablette + Téléphone : 3vw
  • Rembourrage inférieur :
    • Ordinateur de bureau + tablette : 1vw
  • Rembourrage gauche :
    • Ordinateur de bureau : 2vw
    • Tablette + Téléphone : 5vw
  • Rembourrage droit :
    • Téléphone : 3vw

Ajouter le module Woo Gallery à la colonne 2

Teneur

Le dernier module dont nous avons besoin pour terminer la conception est un module de galerie woo. Sélectionnez le produit.

  • Produit : Ce produit

Disposition

Passez à l'onglet Conception et modifiez la mise en page.

  • Disposition : curseur

Espacement

Ensuite, ajustez les paramètres d'espacement comme suit :

  • Marge supérieure:
    • Ordinateur de bureau : -2vw
    • Tablette : -4vw
    • Téléphone : -6vw
  • Rembourrage supérieur : 0vw

Frontière

Enfin, ajoutez une bordure.

  • Styles de bordure : bordure supérieure
  • Largeur : 4px
  • Couleur : Gris très foncé #333333

3. Convertir en modèle pour Divi Theme Builder

Enregistrer dans la bibliothèque Divi

Maintenant que nous avons terminé la conception, il est temps d'enregistrer la mise en page de notre page produit dans la bibliothèque Divi. Si vous n'avez pas de catégorie pour vos mises en page de produits, créez-en une.

  • Enregistrer sous : mise en page
  • Nom: Maître de produit de style japonais
  • Catégorie : Mises en page de produits.

Ouvrez Divi Theme Builder et créez un nouveau modèle

Afin d'utiliser cette conception sur toutes vos pages de produits, vous devez créer un modèle dans le générateur de thème. Dans la page du générateur de thème, ajoutez un nouveau modèle. Sélectionnez « tous les produits » dans le menu déroulant. Si vous souhaitez utiliser cette conception uniquement pour certains de vos produits, vous pouvez ajuster les paramètres.

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

Cliquez sur « Ajouter un corps personnalisé » et sélectionnez « Ajouter à partir de la bibliothèque » dans le menu déroulant.

Rechercher une mise en page dans les mises en page enregistrées et appliquer

Dans la fenêtre des mises en page, cliquez sur les mises en page enregistrées et recherchez celle que nous venons de créer.

Enregistrer les modifications dans le générateur de thèmes

N'oubliez pas d'enregistrer les modifications dans le générateur de thème.

Aperçu

Le modèle s'appliquera désormais à tous les produits de votre site Web. Jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

C'est un Wrap !

Dans cet article, nous vous avons montré comment créer une page produit inspirée de l'esthétique japonaise. Le style est épuré et minimal, parfait pour mettre en valeur des produits délicats ou faits à la main. Nous vous avons également montré comment transformer la mise en page en modèle avec le générateur de thème Divi. Essayez ce design avec votre nouveau projet Divi + WooCommerce et dites-nous ce que vous en pensez.