Comment créer un modèle de page de produit amusant pour les produits pour enfants avec Divi
Publié: 2020-01-06Les sites Web de produits pour enfants ont un style unique. Ils ont tendance à être amusants, colorés et inspirent le sourire. Votre boutique WooCommerce pour les produits pour enfants est désormais plus facile à créer avec le générateur de thème Divi et les modules woo personnalisables. Pourquoi ne pas le rendre un peu plus spécial avec un design unique et amusant ? Dans cet article, nous allons vous montrer comment créer un modèle de page de produit pour enfants dans le générateur de thème qui s'appliquera à tous vos produits. Cela fonctionnera mieux avec des images de produits qui ont un fond transparent. Vous pourrez également télécharger le fichier JSON gratuitement !
Commençons.
Aperçu
Avant de commencer à recréer le design, examinons le résultat sur différentes tailles d'écran.
Bureau
Mobile
Téléchargez GRATUITEMENT le modèle de produit Fun Kids
Pour mettre la main sur le modèle de produit amusant pour enfants gratuit, vous devez 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 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. Préparation de la conception pour le modèle de produit pour enfants
Supprimer l'arrière-plan de la photo du produit
La première chose que nous ferons avant de commencer la conception des produits pour enfants est de préparer les images. Supprimez l'arrière-plan des images du produit. Vous pouvez y parvenir avec Adobe Photoshop, Adobe Illustrator ou remove.bg. Laissez un peu d'espace autour du produit pour qu'il s'intègre bien dans le design. La meilleure taille pour l'image finale est de 600X400 pixels.
Créer un arrière-plan
La deuxième étape consiste à créer un motif d'arrière-plan à placer derrière l'image. Cette conception avec des formes qui se chevauchent est facilement créée dans Adobe Illustrator. Alternativement, vous pouvez trouver cette image de fond dans le dossier téléchargeable ci-dessus. Voici les étapes à suivre si vous souhaitez créer le fond :
- Créez (ou sourcez) une forme.
- Donnez à la forme la couleur que vous voulez.
- Dupliquez la forme.
- Colorez-le dans un ton similaire à l'original.
- Faites pivoter la deuxième forme pour créer une belle composition.
- Ajoutez de la transparence aux deux formes.
- Ajoutez un arrière-plan de la même couleur que l'arrière-plan du dessin final.
- Enregistrez au format JPG à environ 1750X1650 px.
2. Créer/ajouter un nouveau produit Woocommerce
Données du produit
Une fois que l'image du produit et les motifs d'arrière-plan sont prêts, il est temps de créer un produit pour enfants. Pour créer un design exactement comme le nôtre, insérez les informations suivantes.
- Titre : Blocs de lettres en bois
- Description longue : Ces blocs de bois naturel sont parfaits pour que les enfants apprennent leurs lettres et leurs chiffres de manière amusante et créative. Les bordures sont arrondies pour les petits doigts et la peinture est non toxique.
- Ancien Prix de Vente : 12,99
- Nouveau prix de vente : 7,99
- Image en vedette : Image découpée dans des blocs de bois. Taille préférée : 600 x 400 px
- Attributs : voir ci-dessous
Dans l'onglet Attributs, saisissez les valeurs du module d'informations supplémentaires.
- Matériel: Bois de pin naturel
- Peinture : Peinture blanche non toxique
- Couleurs de peinture : Blanc, Bleu, Vert, Fucsia
3. Créer un nouveau modèle dans Theme Builder
Ouvrez Divi Theme Builder et ajoutez un nouveau modèle
Il est maintenant temps de passer au générateur de thème Divi. Nous allons construire le design là-dedans. Ajoutez un nouveau modèle.
Commencez à construire un corps personnalisé pour tous les produits
Utilisez ce modèle sur tous les produits et commencez à construire le corps.
Astuce pour le créateur de thème :
Lorsque vous créez une conception de produit dans le générateur de thème, gardez toujours une page de produit ouverte dans une autre fenêtre pour vérifier les modifications.
4. Recréez la conception du produit pour enfants
Ajouter une nouvelle section
Fond
À l'intérieur du générateur de modèle de corps, vous remarquerez une section. Ouvrez cette section et changez la couleur d'arrière-plan.
- Couleur de fond : rose pâle #f9f2f2
Ajouter une nouvelle ligne
Structure des colonnes
Maintenant, ajoutez une nouvelle ligne avec 2 colonnes.
Dimensionnement
Ensuite, ajustez la taille de la rangée.
- Largeur de gouttière personnalisée : 2
- Largeur: 90%
- Largeur maximale : 90 %
Paramètres de la colonne 1
Fond
Dans le paramètre de la colonne 1, ajoutez la conception d'image d'arrière-plan que vous avez créée avec les formes qui se chevauchent.
- Image de fond
Espacement
Ensuite, ajustez l'espacement en conséquence.
- Rembourrage supérieur et inférieur : 5vw
- Rembourrage gauche et droit
- Tablette : 2vw
- Téléphone : 0vw
Paramètres de la colonne 2
Espacement
Passez à la colonne 2 et ajustez les valeurs d'espacement comme suit.
- Rembourrage supérieur : 1vw
- Rembourrage inférieur :
- Tablette + Téléphone : 1vw
- Rembourrage gauche et droit :
- Ordinateur de bureau : 2vw
- Tablette et téléphone : 7vw
Ajouter le module d'image Woo à la colonne 1
Teneur
Il est maintenant temps d'ajouter les modules. Tout d'abord, dans la colonne 1, ajoutez un module d'image woo et sélectionnez ce produit sous contenu.
- Produit : Ce produit
Éléments
Ensuite, sélectionnez les éléments qui seront affichés sur la conception.
- Image en vedette : Oui
- Galerie : Non
- Badge de vente : Oui
Texte de l'insigne de vente
Dans l'onglet Conception, ajustez les valeurs du badge de vente comme suit.
- Couleur de l'insigne : Transparent
- Police : Nunito
- Poids de la police : gras
- Couleur du texte : Rose #f24881
- Taille du texte:
- Ordinateur de bureau : 5vw
- Tablette : 12vw
- Téléphone : 10vw
Dimensionnement
Ensuite, ajustez l'espacement pour que les choses s'ajustent mieux.
- Rembourrage supérieur :
- Ordinateur de bureau et tablette : 1vw
- Téléphone : 2vw
- Rembourrage inférieur : 0vw
- Rembourrage gauche et droit : 0vw
Ajouter le module de titre Woo à la colonne 2
Teneur
Dans la deuxième colonne, ajoutez un module de titre woo et sélectionnez ce produit dans l'onglet contenu.
- Produit : Ce produit
Fond
Donnez au module un fond blanc.
- Couleur de fond : Blanc #ffffff
Texte du titre
Ensuite, stylisez le texte du titre à un niveau H1.
- Niveau de titre : H1
- Police : Nunito
- Poids de la police : Ultra gras
- Alignement du texte : Centre
- Couleur du texte : gris foncé verdâtre #314942
- Taille du texte:
- Ordinateur de bureau : 2.6vw
- Tablette et téléphone : 6.4vw
Espacement
Continuez en ajustant l'espacement dans le module.
- Rembourrage supérieur et inférieur :
- Ordinateur de bureau : 1.5vw
- Tablette et téléphone : 2.5vw
- Rembourrage gauche et droit : 2vw
Frontière
Enfin, ajustez la bordure pour les tailles de bureau et réactives.
- Coins arrondis:
- Bureau : 1vw aux quatre coins
- Tablette et téléphone : 3vw aux quatre coins
Ajouter le module de description Woo à la colonne 2
Teneur
Sous le titre du produit, ajoutez un module de description woo. Choisissez le type de description et ce produit dans l'onglet contenu.
- Produit : Ce produit
- Type de description : Description
Fond
Ensuite, donnez au module une couleur de fond.
- Couleur de fond : Blanc #ffffff
Texte
Passez à l'onglet Conception et stylisez le texte.
- Police : Nunito
- Couleur: Gris foncé verdâtre #314942
- Taille:
- Ordinateur de bureau : 1vw
- Tablette : 2.5vw
- Téléphone : 3vw
Espacement
Ensuite, ajustez l'espacement pour le module.
- Marge supérieure:
- Ordinateur de bureau et tablette : -0,5 vw
- Téléphone : -3vw
- Rembourrage supérieur et inférieur :
- Ordinateur de bureau : 1.5vw
- Tablette et téléphone : 4vw
- Rembourrage gauche et droit :
- Ordinateur de bureau : 2vw
- Tablette et téléphone : 6vw
Frontière
Enfin, ajoutez les coins arrondis.
- Coins arrondis:
- Bureau : 1vw aux quatre coins
- Tablette et téléphone : 3vw aux quatre coins
Ajouter le module d'informations supplémentaires Woo à la colonne 2
Teneur
Sous le module de description, ajoutez le module d'informations supplémentaires woo. Choisissez ce produit dans l'onglet contenu.
- Produit : Ce produit
Fond
Ensuite, ajoutez un fond blanc.
- Couleur de fond : Blanc #ffffff
Texte
Dans l'onglet Conception, commencez à styliser les différents types de texte. Premièrement, le texte qui s'applique aux valeurs des attributs.
- Police : Nunito
- Style : Italique
- Couleur: Gris foncé verdâtre #314942
- Taille:
- Ordinateur de bureau : 0.8vw
- Tablette : 1.5vw
- Téléphone : 2vw
Texte du titre
Deuxièmement, stylisez le texte du titre.
- Police : Nunito
- Poids : Ultra gras
- Couleur : Rose #f24881
- Taille:
- Ordinateur de bureau : 1.7vw
- Tablette : 3vw
- Téléphone : 3.5vw
- Hauteur de ligne : 1 em
Texte d'attribut
Troisièmement, stylisez le texte de l'attribut.
- Police : Nunito
- Poids : gras
- Couleur: Gris foncé verdâtre #314942
- Taille:
- Ordinateur de bureau : 0.9vw
- Tablette : 2vw
- Téléphone : 3vw
Espacement
Ensuite, ajustez l'espacement comme suit.
- Marge supérieure:
- Ordinateur de bureau et tablette : -0,5 vw
- Téléphone : -3vw
- Rembourrage supérieur :
- Ordinateur de bureau : 1.5vw
- Tablette : 3vw
- Téléphone : 5vw
- Rembourrage gauche : 1vw
- Rembourrage droit :
- Ordinateur de bureau : 2vw
- Tablette et téléphone : 5vw
Frontière
Enfin, ajoutez les coins arrondis.
- Coins arrondis:
- Bureau : 1vw aux quatre coins
- Tablette et téléphone : 3vw aux quatre coins
Ajouter le module Woo Price à la colonne 2
Teneur
Ajoutez un module de prix woo et choisissez ce produit dans l'onglet contenu.
- Produit : Ce produit
Fond
Ajoutez également un fond rose au module pour le faire ressortir.
- Couleur de fond : Rose #f24881
Texte de l'ancien prix de vente
Passez à l'onglet conception et stylisez l'ancien prix de vente.
* Lorsque vous ajoutez un nouveau et un ancien prix de vente à un produit, le module de prix woo ne les affichera pas tous les deux dans le générateur de thème. Vérifiez sur la page du produit réel pour voir à quoi ressemble le design final.
- Police : Nunito
- Couleur : Blanc #ffffff
- Taille:
- Ordinateur de bureau : 1.5vw
- Tablette : 2.5vw
- Téléphone : 3vvw
Vente Nouveau Prix Texte
Continuez en stylisant le nouveau prix.
- Police : Nunito
- Poids : gras
- Couleur : Blanc #ffffff
- Taille:
- Ordinateur de bureau : 2vw
- Tablette : 2vw
- Téléphone : 4vw
- Espacement des lettres : 1px
Espacement
Ensuite, ajustez l'espacement du module.
- Marge supérieure:
- Ordinateur de bureau et tablette : -0,5 vw
- Téléphone : -3vw
- Rembourrage supérieur et inférieur :
- Ordinateur de bureau : 1.5vw
- Tablette et téléphone :
- Rembourrage gauche et droit :
- Ordinateur de bureau : 2vw
- Tablette et téléphone : 5vw
Frontière
Enfin, ajoutez les coins arrondis.
- Coins arrondis:
- Bureau : 1vw aux quatre coins
- Tablette et téléphone : 3vw aux quatre coins
Conception finale
Voici à quoi ressemble le design sur le produit réel par rapport à ce à quoi il ressemble dans le générateur de thème.
Ajouter le module Woo Ajouter au panier à la colonne 2
Teneur
Sous le module de prix, placez un module woo ajouter au panier. Sélectionnez ce produit dans l'onglet contenu.
* Lorsque vous ajoutez un module woo ajouter au panier, vous remarquerez qu'en haut il y a un menu déroulant pour une option de couleur. Si vous ne l'avez pas spécifié sur votre page produit, cela n'apparaîtra pas dans votre conception finale. Vous pouvez vous en assurer en vérifiant le produit en direct pendant que vous construisez dans le générateur de thème.
- Produit : Ce produit
Éléments
En continuant, sélectionnez les éléments qui apparaîtront dans le module.
- Champ de quantité : Désactivé
- Stock : Off
Fond
Ensuite, ajoutez une couleur de fond blanc.
- Couleur de fond : Blanc #ffffff
Bouton
Il est maintenant temps de styler le bouton. Ajoutez les valeurs comme suit.
- Taille du texte:
- Ordinateur de bureau : 2vw
- Tablette : 3vw
- Téléphone : 5vw
- Couleur du texte : Rose #f24881
- Couleur de fond : Blanc #ffffff
- Espacement des lettres : 1px
- Police : Nunito
- Poids : lourd
- Marge supérieure et inférieure : -0.3vw
Espacement
Ensuite, ajustez l'espacement du module.
- Marge supérieure:
- Ordinateur de bureau et tablette : -0,5 vw
- Tablette : -3vw
- Rembourrage supérieur et inférieur : 0vw
- Marge gauche et droite : 0vw
Frontière
Enfin, ajoutez une bordure arrondie.
- Coins arrondis:
- Bureau : 1vw aux quatre coins
- Tablette et téléphone : 3vw aux quatre coins
Aperçu
Jetons un dernier coup d'œil à la conception finale sur différentes tailles d'écran. Le modèle de conception de produits pour enfants s'appliquera désormais à tous les produits de votre magasin. Assurez-vous de vérifier la taille des images pour vous assurer qu'elles s'adaptent bien.
Bureau
Mobile
C'est un Wrap sur la page produit des enfants !
Dans cet article, nous vous avons montré comment recréer un design pour une page de produit pour enfants. Ce design avec des bords doux, un arrière-plan amusant et des couleurs joyeuses rendra tous vos produits attrayants et prêts à être achetés. Nous espérons que ce design vous plaira et que vous l'utiliserez pour inspirer vos propres créations Divi. Laissez-nous vos impressions dans les commentaires !