Maintenant vous pouvez utiliser le module Woo dans Divi, la seule limite est votre imagination. Chaque module Woo dynamique peut être personnalisé comme tous les autres modules du générateur. Dans cet article, nous vous montrerons comment recréer un design de bloc créatif pour votre page produit. Les modules dynamiques sont assemblés en un ensemble créatif qui se distingue du fond sombre. Vous pouvez également télécharger gratuitement le fichier json! On y va. Avant de commencer, jetons un coup d’oeil à la conception sur différents écrans de taille. 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! Abonnez – vous à notre chaîne YouTube 1. Ajouter \ ouvrir des produits woocommerce détails du produit ouvrir un produit existant ou en créer un nouveau. Pour recréer cette conception de style de bloc, vous devez saisir les informations suivantes: titre description catégorie de prix attributs caractéristiques attributs de l’image onglet est un jeu de mots
Ajouter du contenu de chapelure en bois ajouter le premier module, chapelure en bois. Sélectionnez ce produit.
Produit: ce produit Texte dans l’onglet conception, modélisez le texte comme suit. Police de texte: Fenix couleur du texte: brun # 594239 taille du texte: Bureau: 1vw tablette: 2vw Téléphone: 3vw L’espacement ajoute des valeurs d’espacement pour différentes tailles d’écran. Marge supérieure: 3vw marge gauche: Bureau: 10vw tablette + téléphone: 20vw Ajouter une image Woo ajouter du contenu il est temps d’ajouter une image produit en utilisant le module image woo. Dans l’onglet contenu, sélectionnez ce produit. Produit: ce produit Continuer à redimensionner le module.
Largeur: 100% Visibilité Enfin, masquer le débordement. Débordement horizontal + vertical: caché Ajouter une ligne # 2 Structure de colonne ajouter une deuxième ligne et deux colonnes. Redimensionner d’abord, redimensionner. Largeur de la gouttière: 1 largeur: Bureau: 53% tablette + téléphone: 53% largeur maximale: 100% alignement: droite L’espacement est suivi d’une valeur d’espacement. Marge supérieure: Bureau: – 47vw tablette + téléphone mobile: 0vw marge gauche: tablette: – 5vw téléphone mobile: – 8vw marge inférieure: Bureau + tablette: 4.1vw marge gauche: Bureau: 0vw tablette: 16vw téléphone mobile: 12vw marge droite: Bureau: 0vw tablette: 0vw
Dans l’onglet avancé, ajoutez des CSS personnalisés. Principaux éléments du CSS: affichage: flexible; Affichage: Flex; Visibilité Enfin, réglez le débordement à visible. Débordement horizontal + vertical: visible Réglage de l’espacement des colonnes 1 avant d’ajouter des modules, ajuster les valeurs d’espacement dans la colonne 1. Remplissage à gauche: 4vw remplissage à droite: 0vw Le réglage de l’espacement des colonnes 2 ajuste également la valeur d’espacement des colonnes 2. Remplissage supérieur: Bureau: tablette 7vw: 17vw Téléphone: 28vw
Moi, ajoutez le tableau de description woo. Dans l’onglet contenu, sélectionnez ce produit. Produit: ce type de produit Description: description Le texte modélise donc le texte. Caractères: Open sans couleur: crème # f2eed0 taille: Bureau: 08vw tablette: 2vw Téléphone: 3vw Redimensionner vous permet également de redimensionner. Largeur: 100% Espacement de la même façon, réglez l’espacement. Remplissage en haut + en bas: Bureau: tablette 2vw + téléphone: 3vw à gauche + à droite: Bureau: tablette 2vw + téléphone: 3vw Bordure similaire à d’autres modules, ajouter une bordure. Styles de bord: les quatre largeurs de bord: 2px couleur: crème # f2eed0 Ajouter des informations supplémentaires sur le bois à la colonne 2 ajouter du contenu il est maintenant temps d’ajouter des Propriétés personnalisées en utilisant le module d’informations supplémentaires sur le bois. Dans l’onglet contenu, sélectionnez ce produit. Produit: ce produit Texte modifier les paramètres de texte comme suit. Caractères: Open sans style: italique: crème # f2eed0 taille: Bureau: 0.6vw tablette: 1.6vw Téléphone: 2.2vw Les attributs texte modélisent ensuite le texte de l’attribut en conséquence: caractères: Fenix couleur: crème # f2eed0 taille: Bureau: 1.1vw tablette: 2vw Téléphone: 3vw espace: 1px Redimensionner vous permet également de redimensionner. Largeur: 100% Bordure, et enfin ajouter une bordure. Styles de bord: haut + droite + largeur du bord inférieur: haut + droite + bas: 2x couleur du bord: haut + droite + bas: crème Ajouter une ligne # 3 structure de colonne ajouter une troisième ligne contenant deux colonnes. Redimensionner avant d’ajouter un module, redimensionnez la ligne en fonction de la taille de l’écran. Largeur: Bureau: 50% compression: 87% Téléphone: 93% alignement: à droite Le remplissage ajuste également le remplissage. Joint inférieur: 12vw Le réglage de l’espacement des colonnes 1 se poursuit en ajustant le remplissage dans la première colonne. Remplissage à gauche: Bureau
Tablette 5vw + téléphone: 12vw Ajouter le prix du bois à la colonne 1 ajouter maintenant le prix du produit en utilisant la liste de prix du bois. Dans l’onglet contenu, sélectionnez ce produit. Produit: ce produit Le texte est ensuite tarifé et modélisé en conséquence. Caractères: Fenix couleur: crème # f2eed0 taille: Bureau: 1.5vw tablette: 3.5vw Téléphone: 5vw De plus, redimensionnez le module. Largeur: Bureau: 39% tablette: 45% Téléphone: 54% L’espacement ajuste également l’espacement. Remplissage en haut: Bureau: 1vw tablette: 2vw téléphone mobile: 3v2 remplissage en bas: Bureau: 1vw tablette + téléphone mobile: 2vw remplissage à gauche: Bureau: 1vw tablette + téléphone mobile: 2vw remplissage à droite: tablette + téléphone mobile: 2vw Bordure Enfin, ajoutez une bordure. Styles de bord: toutes les quatre largeurs de bord: 2px couleur: crème Ajouter du bois à la carte à la colonne 2 ajouter le dernier module est le module ajouter du bois à la carte. Dans l’onglet contenu, sélectionnez ce produit. Styles de boutons les styles de boutons sont présentés ci – dessous. Style personnalisé: Oui bouton taille du texte: Bureau: 1.3vw tablette: 3.5vw Téléphone: 5vw couleur du texte: crème # f2eed0 couleur de fond: cuivre orange # d66b00 Ensuite, ajoutez des valeurs de remplissage au bouton. Remplissage en haut + en bas: 0,5 VW remplissage à gauche + à droite: 1,5 VW Enfin et surtout, redimensionnez le module et c’est fait! Largeur: 100% Regardons enfin les résultats sur différents écrans de taille. Bureau Mobile C’est une coquille, c’est tout! Si votre contenu est plus long ou plus court que celui de ce tutoriel, l’espacement des blocs peut être interrompu. Tout ce que vous devez faire est d’ajuster les paramètres de colonne pour mieux s’adapter à la combinaison. Nous espérons que ce tutoriel vous inspirera à créer un design
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! Abonnez – vous à notre chaîne YouTube 1. Ajouter \ ouvrir des produits woocommerce détails du produit ouvrir un produit existant ou en créer un nouveau. Pour recréer cette conception de style de bloc, vous devez saisir les informations suivantes: titre description catégorie de prix attributs caractéristiques attributs de l’image onglet est un jeu de mots
Ajouter du contenu de chapelure en bois ajouter le premier module, chapelure en bois. Sélectionnez ce produit.
Produit: ce produit
Largeur: 100%
Moi, ajoutez le tableau de description woo. Dans l’onglet contenu, sélectionnez ce produit. Produit: ce type de produit Description: description
Tablette 5vw + téléphone: 12vw Ajouter le prix du bois à la colonne 1 ajouter maintenant le prix du produit en utilisant la liste de prix du bois. Dans l’onglet contenu, sélectionnez ce produit. Produit: ce produit