Êtes – vous à la recherche d’un design de page de produit propre et concis pour votre boutique en ligne? Aujourd’hui, notre Design s’inspire de l’esthétique japonaise. C’est un style courant dans les magazines et les sites minimalistes japonais. Il facilite la lecture du texte et la visualisation des produits sans distraction. Suivez les tutoriels ci – dessous pour recréer ce modèle pour votre produit. Vous pouvez également télécharger gratuitement le fichier json du modèle! On y va. Avant de commencer, jetons un coup d’oeil à l’apparence de la conception sur différents appareils. Bureau
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. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! 1. Ajouter \ ouvrir des informations sur le produit woocommerce pour ouvrir ou créer un nouveau produit woocommerce. Pour recréer cette conception de produit inspirée de l’esthétique japonaise, vous devez entrer les détails suivants: Titre: description de la trousse de calligraphie: trousse de calligraphie japonaise et tous les instruments de musique n
Ou titre: H1 Character H1: Right sans Character style H1: tt Color H1: dark grey # 333333 letter Spacing: 5p X – ray width: 1EM L’espacement ajuste ensuite la valeur d’espacement. Marge supérieure: tablette + téléphone mobile: 0vw marge supérieure: 0vw marge inférieure: Bureau: 1,5vw tablette: 3,5vw téléphone mobile: 6vw marge gauche: Bureau: 2vw tablette + téléphone mobile: 5vw marge droite: Bureau + tablette: 0vw
La bordure complète la configuration du module en ajoutant une bordure. Styles de bord: largeur du bord inférieur: 4px couleur: gris très foncé # 333333 Ajoutez le tableau de description du bois à la colonne 1, puis ajoutez le tableau de description du bois. Sélectionnez le contenu et le type de description. Produit: ce type de produit Description: description Le texte est ensuite modélisé comme suit: police: Duru sans style de police: tt couleur: gris très foncé # 333333 taille: Bureau: 0.8vw tablette: 1.4vw Téléphone: 1.8vw espacement des lettres: 3px poids de ligne: 2em
Séparer les paramètres complets du module en ajoutant un remplissage personnalisé à différents écrans de taille. Remplissage en haut + en bas: 0vw à gauche + à droite: Bureau: 2vw tablette + téléphone: 5vw Ajoutez le module Woo Price au contenu de la colonne 1, puis ajoutez le module Woo Price à la colonne et sélectionnez le produit. Produit: ce produit Les styles de texte du prix sont les suivants: caractères: Duru sans couleur: gris très foncé # 333333 taille: Bureau: 1.5vw tablette: 3.2vw Téléphone: 4vw espacement des lettres: 3px poids de ligne: 1EM
L’espacement ajuste également le réglage de l’espacement. Marge inférieure: Bureau: 1vw tablette: 3vw téléphone mobile: 4vw marge supérieure: Bureau: 1vw tablette: 3.3vw téléphone mobile: 5vw marge inférieure: 0vw marge gauche: tablette + téléphone mobile: 5vw marge droite: Bureau: 2vw tablette + téléphone mobile: 3vw À la fin de la bordure, ajouter U
À bord Styles de bord: largeur du bord supérieur: 4px couleur: gris très foncé # 333333 Ajoutez le module Woo Add to cart à la colonne 1 sous le prix, ajoutez le module Woo Add to cart et sélectionnez le produit. Produit: ce produit L’article remplace l’article comme suit: afficher le champ quantité: ne pas afficher l’inventaire: ouvrir L’arrière – plan ajoute également une couleur d’arrière – plan. Couleur de fond: gris foncé # 333333 Boutons dans l’onglet conception, modélisez les boutons comme suit: taille du texte: Bureau: tablette 1vw: 2.6vw Téléphone: 3.1vw couleur: blanc # FFFFFF largeur du bord: 0px espacement des lettres: 3px caractères: Duru sans caractères: tt Pour cette raison, réglez l’espacement. Remplissage supérieur + inférieur: 0,5 VW remplissage gauche: 1 VW Bordure Enfin, ajoutez une bordure. Styles de bord: largeur du bord supérieur: 4px couleur: gris très foncé # 333333 Ajoutez le formulaire d’information supplémentaire de Woo au commutateur de contenu de colonne 2 de la deuxième colonne et ajoutez le formulaire d’information supplémentaire de woo. Sélectionnez le produit. Produit: ce produit Le projet active ou désactive les paramètres du projet comme suit: afficher le titre: ouvrir Dans l’onglet conception, spécifiez un style pour le texte. Police: Duru sans style de police: i + tt couleur: gris très foncé # 333333 taille: Bureau: 0,7vw tablette: 1,5vw Téléphone: 2,4vw espacement des lettres: 2px poids de ligne: 1,5 em Style de texte du titre après le texte du titre. Police: Duru sans style de police: tt couleur: gris très foncé # 333333 taille: Bureau: 1vw tablette: 2vw Téléphone: 2.2vw espacement des lettres: 3px poids de ligne: 1,5 em N’oubliez pas non plus de styliser le texte de l’attribut. Police: Duru sans style de police: tt couleur: gris très foncé # 333333 taille: Bureau: 0.7vw tablette: 2vw Téléphone: 2.4vw espacement des lettres: 2px L’espacement est ensuite ajusté. Remplissage supérieur: Bureau: tablette 1vw + te
Téléphone: 3vw remplissage en bas: Bureau + tablette: 1vw remplissage à gauche: Bureau: 2vw tablette + téléphone: 5vw remplissage à droite: Téléphone: 3vw Le dernier module que nous devons concevoir pour ajouter le module Woo Gallery à la colonne 2 est le module Woo Gallery. Sélectionnez le produit. Produit: ce produit Passez à l’onglet conception et modifiez la disposition. Mise en page: curseurs L’espacement ajuste ensuite les paramètres d’espacement comme suit: espace de bord supérieur: Bureau: – 2vw tablette: – 4vw Téléphone: – 6vw espace de bord supérieur: 0vw Bordure Enfin, ajoutez une bordure. Styles de bord: largeur du bord supérieur: 4px couleur: gris très foncé # 333333 3. Le modèle converti en Divi Theme Builder est sauvegardé dans la Bibliothèque Divi. Maintenant que nous avons terminé la conception, il est temps d’enregistrer la mise en page du produit dans la Bibliothèque Divi. Si votre mise en page de produit n’a pas de catégorie, créez une catégorie. Enregistrer sous: Layout name: Japanese Product main Category: Product Layout. Ouvrez Divi Theme Builder et créez un nouveau modèle pour utiliser ce design sur toutes les pages du produit, vous devez créer un modèle pour lui dans Theme Builder. Sur la page Theme Builder, ajoutez un nouveau modèle. Sélectionnez tous les produits dans le menu déroulant. Vous pouvez ajuster les paramètres si vous ne voulez utiliser cette conception que pour certains produits. Ajouter des entités personnalisées à partir de la Bibliothèque Divi cliquez sur ajouter des entités personnalisées et sélectionnez ajouter à partir de la bibliothèque dans le menu déroulant. Trouvez la mise en page dans la mise en page enregistrée et appliquez – la dans la fenêtre mise en page, cliquez sur la mise en page enregistrée et Recherchez ce que nous venons de créer. Enregistrer les modifications apportées à Theme Builder n’oubliez pas d’enregistrer les modifications apportées à Theme Builder. Le modèle d’aperçu s’appliquera maintenant à tous les produits de votre site Web. Regardons enfin.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! 1. Ajouter \ ouvrir des informations sur le produit woocommerce pour ouvrir ou créer un nouveau produit woocommerce. Pour recréer cette conception de produit inspirée de l’esthétique japonaise, vous devez entrer les détails suivants: Titre: description de la trousse de calligraphie: trousse de calligraphie japonaise et tous les instruments de musique n
Ou titre: H1 Character H1: Right sans Character style H1: tt Color H1: dark grey # 333333 letter Spacing: 5p X – ray width: 1EM
À bord Styles de bord: largeur du bord supérieur: 4px couleur: gris très foncé # 333333
Téléphone: 3vw remplissage en bas: Bureau + tablette: 1vw remplissage à gauche: Bureau: 2vw tablette + téléphone: 5vw remplissage à droite: Téléphone: 3vw