Lorsque vous affichez des produits populaires sur la page d’atterrissage, non seulement choisissez les bons produits, mais montrez – les de façon attrayante. Avec le nouveau module woocommerce de Divi, de nombreuses nouvelles possibilités de conception sont apparues. Pour vous aider à vous inspirer, nous allons redessiner un design de produit populaire beau et élégant que vous pouvez utiliser pour la prochaine page cible Divi. Vous pouvez également télécharger gratuitement le fichier json! On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau statique
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! Commençons à recréer! Tout d’abord, ajoutez une section normale à une nouvelle page ou à une page existante. Ouvrir les paramètres de section et ajuster la valeur de remplissage supérieure en conséquence
Et en bas: remplissage en haut: 8vw remplissage en bas: 8vw Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante:
Redimensionnez sans ajouter de module, ouvrez les paramètres de ligne et changez les paramètres de taille de ligne. Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 largeur: 85vw largeur maximale: 100% Il est temps d’ajouter le module image woo à la colonne de contenu dynamique! Le premier module dont nous avons besoin est le module image woo. Sélectionnez le produit que vous souhaitez voir. L’image passe à l’onglet conception et modifie les paramètres de l’image. Image du filet: 20 pixels (tous les coins) Boîte d’ombre floue forcée: 50 Px couleur d’ombre: rgba (0,0,0,0,3)
Le prochain module dont nous avons besoin pour ajouter le module Woo title à la colonne de contenu dynamique est le module Woo title. Sélectionnez le produit de votre choix. Paramètres du texte du titre modifier les paramètres du texte du titre du formulaire comme suit: niveau du titre: H3 caractères du titre: dialogue taille du texte du titre: 3vw (bureau), 5vw (tablette), 7vw (téléphone) Séparer les paramètres complets du module en ajoutant des valeurs de marge personnalisées à différents écrans de taille. Marge supérieure: 7vw (bureau), 14vw (tablette et téléphone mobile) marge inférieure: 2vw (bureau), 4vw (tablette et téléphone mobile) Marge gauche: 2vw (bureau), 5vw (tablette et téléphone mobile) Marge droite: 2vw (bureau), 5vw (tablette et téléphone mobile)
Ajoutez le formulaire de description de woo à la colonne de contenu dynamique du module suivant, le formulaire de description de woo. Sélectionnez le produit de votre choix. Paramètres de texte passer à l’onglet conception du module et modifier les paramètres de texte comme suit: police de texte: Montserrat taille du texte: 0,8vw (bureau), 1,6vw (t)
Ablet), 2vw (téléphone) hauteur de la ligne de texte: 1,8 em L’espacement peut également utiliser des valeurs de marge personnalisées pour différentes tailles d’écran. Marge supérieure: 2vw (bureau), 4vw (tablette et téléphone mobile) marge inférieure: 2vw (bureau), 4vw (tablette et téléphone mobile) Marge gauche: 2vw (bureau), 5vw (tablette et téléphone mobile) Marge droite: 2vw (bureau), 5vw (tablette et téléphone mobile)
Ajoutez le module Woo Add to cart à la colonne de contenu dynamique juste en dessous du formulaire Woo description et nous ajouterons un add – in au cart de woo. Sélectionnez le produit de votre choix. Les paramètres de champ par défaut passent à l’onglet conception du module et changent les paramètres de champ comme suit: couleur de fond du champ: # FFFFFF couleur du texte du champ: # 3d3d3d caractères du champ: Montserrat Champ largeur de la bordure: 0px champ couleur de la bordure: # 3d3d3d Les paramètres du champ lorsque vous déplacez la souris changent la largeur de la bordure lorsque vous déplacez la souris. Largeur de la bordure du champ: 1px
Ensuite, ouvrez les paramètres du bouton et appliquez le style au bouton. Chaque bouton utilise un style personnalisé: Oui bouton taille du texte: 1vw (bureau), 3vw (tablette), 4vw (téléphone) bouton couleur du texte: # 3d3d3d bouton couleur de fond: # FFFFFF bouton largeur de la bordure: 0px bouton couleur de la bordure: # 3d3d bouton couleur de fond: # FFFFFF bouton largeur de la bordure: 0px bouton couleur de la bordure: # 3d3d bouton couleur de fond: # FFFFFF bouton largeur de la bordure: 0px bouton couleur de la bordure: # 3d3d Caractères du bouton: Talk Remplissage supérieur: 0,5vw remplissage inférieur: 0,5vw remplissage gauche: 2vw remplissage droit: 2vw Le réglage du bouton change la largeur du bord du bouton lorsque vous passez le curseur.
Largeur de la bordure du bouton: 1px L’espacement va ensuite à l’espacement et ajoute des valeurs de marge personnalisées à différentes tailles d’écran. Marge inférieure: 7vw (bureau), 14vw (tablette et téléphone mobile) Marge gauche: 2vw (bureau), 5vw (tablette et téléphone mobile) Marge droite: 2vw (bureau), 5vw (tablette et téléphone mobile) Droits de douane
La section bordure par défaut modifie également les paramètres de bordure du module. Largeur du bord inférieur: 1px couleur du bord inférieur: # 3d3d3d Définit les bords en vol stationnaire et supprime la largeur des bords en vol stationnaire. Largeur du bord inférieur: 0px
Ajoutez le module Woo Price à la colonne de contenu dynamique le dernier module dont nous avons besoin dans cette colonne est le module Woo price. Sélectionnez le produit de votre choix. Paramètres du texte du titre passer à l’onglet conception du module et modifier les paramètres du texte du prix en conséquence: police du texte du prix: Montserrat poids de la police du texte du prix: couleur claire du texte du prix: # 333333 taille du texte du prix: 2vw (bureau), 4vw (tablette), 6vw (téléphone mobile) hauteur de la ligne de prix: 1,8 em L’espacement change également la valeur de la marge. Marge inférieure: 5vw marge gauche: 2vw (bureau), 5vw (tablette et téléphone mobile) Marge droite: 2vw (bureau), 5vw (tablette et téléphone mobile)
Une fois la colonne et tous ses modules terminés, vous pouvez cloner la colonne entière deux fois. Changez la structure des colonnes de la ligne changez ensuite la structure des colonnes de la ligne. Modifier tout contenu dynamique continuer à éditer tout contenu dynamique dans les colonnes 2 et 3 en utilisant les autres produits de votre choix. Modifier l’espacement des modules de la colonne 2 les modules de la deuxième colonne de l’en – tête Woo nécessitent un changement d’espacement supplémentaire. Commencez par le module Woo title. Marge gauche: 5vw (tous les appareils) Marge droite: 5vw (tous les appareils) Module de description Woo ensuite, changez le réglage de l’espacement du module de description woo. Marge supérieure: 4vw (tous les appareils) marge inférieure: 4vw (tous les appareils) Marge gauche: 5vw (tous les appareils) Marge droite: 5vw (tous les appareils) Module Woo ajouté au panier p
7vw (bureau), 0vw (tablette et téléphone mobile) bas: – 2vw (bureau), 0vw (tablette et téléphone mobile) Seule la zone d’ombre de colonne 2 passe aux paramètres de colonne 2 et applique des ombres fines. Position verticale de l’ombre du cadre: 22 pixels brouillage forcé boîte d’ombre: 150 pixels couleur de l’ombre: rgba (0,0,0,0,27) (bureau), rgba (0,0,0,0,1) (tablette et téléphone) Enfin et surtout, changez l’index Z de la deuxième colonne et vous avez fini! Indice Z: 11 Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau statique Déplacer la souris Mobile Dans cet article, nous vous montrons comment présenter élégamment les produits populaires sur la page d’atterrissage Divi. Nous vous montrons étape par étape comment créer de beaux résultats en utilisant uniquement les options intégrées de Divi. Cet exemple de conception montre la polyvalence du nouveau module woocommerce de Divi et comment vous pouvez créer une excellente conception web de commerce électronique en peu de temps. Si vous avez des questions ou des suggestions, veuillez les commenter immédiatement dans la section commentaires ci – dessous! Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.
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! Commençons à recréer! Tout d’abord, ajoutez une section normale à une nouvelle page ou à une page existante. Ouvrir les paramètres de section et ajuster la valeur de remplissage supérieure en conséquence
Et en bas: remplissage en haut: 8vw remplissage en bas: 8vw
Ablet), 2vw (téléphone) hauteur de la ligne de texte: 1,8 em
Largeur de la bordure du bouton: 1px
La section bordure par défaut modifie également les paramètres de bordure du module. Largeur du bord inférieur: 1px couleur du bord inférieur: # 3d3d3d
7vw (bureau), 0vw (tablette et téléphone mobile) bas: – 2vw (bureau), 0vw (tablette et téléphone mobile)