Comment mettre en évidence les catégories de produits dans la section beautiful Heroes du site Divi

Couleur de fond blanche. Colonne 2 couleur de fond: # FFFFFF Allez à l’onglet conception des paramètres de ligne et changez les paramètres de taille pour continuer. Utiliser une largeur personnalisée: Oui unités: px largeur personnalisée: 2000 Px utiliser une largeur personnalisée de gouttière: Oui largeur de gouttière: 1 hauteur de colonne équilibrée: Oui L’espacement supprime également toutes les écoutilles de ligne personnalisées par défaut. Remplissage supérieur: 0px remplissage inférieur: 0px Shadow box et ajoute des ombres fines à la boîte.
Intensité du flou de l’ombre du cadre: 80 px Ajouter un formulaire texte à la colonne 2 ajouter du contenu il est temps de commencer à ajouter un formulaire! Dans la deuxième colonne, le premier formulaire dont nous avons besoin est le titre du formulaire texte. Ajoutez quelque chose de votre choix. Paramètres du texte du titre, puis allez aux paramètres du texte du titre et faites quelques modifications. Poids de la police d’en – tête: surgras taille du texte de l’en – tête: 60 Px (bureau et tablette), 50 Px (téléphone cellulaire) espacement des lettres de l’en – tête: – 4px hauteur de l’arc: 0,8 em L’espacement ajoute également des marges personnalisées et des valeurs de remplissage. Marge supérieure: 17vw marge gauche: 2vw (bureau), 4vw (tablette), 5vw (téléphone mobile) Le deuxième et dernier module nécessaire pour ajouter un module séparateur à la deuxième colonne de visibilité de la colonne 2 est le module séparateur. Assurez – vous que l’option afficher le séparateur est activée. Afficher les séparateurs: Oui La couleur change la couleur du séparateur suivant. Couleur: # 757f1e Styles vous pouvez également modifier le style du séparateur dans les paramètres de style. Styles de séparateurs: doubles Redimensionnez le séparateur et augmentez son poids dans les paramètres de taille du module.
Poids du séparateur: 6px Espacement Enfin, ajoutez des marges supérieures et inférieures personnalisées au module séparateur. M
Onde cylindrique. Ajoutez une partie de votre sélection et liez la page catégories de produits dans les paramètres du lien. La couleur de fond par défaut va ensuite aux paramètres de fond et ajoute une couleur de fond. Couleur de fond: # eaeaea Couleur de fond lorsque vous déplacez la souris changez cette couleur de fond lorsque vous déplacez la souris. Couleur de fond: # ffbb00 Les paramètres de texte par défaut changent les paramètres de texte sur l’onglet conception suivant.
Poids de la police de texte: style de police de texte super gras: couleur du texte en majuscules: # 333333 taille du texte: 16px espacement des lettres de texte: – 1px direction du texte: Centre Paramètres de texte en vol stationnaire et les modifier en vol stationnaire. Couleur du texte: # FFFFFF taille du texte: 20px Espacement par défaut nous avons également appliqué des valeurs d’espacement prédéfinies. Remplissage en haut: 45px remplissage en bas: 45px remplissage à gauche: 5px remplissage à droite: 5px L’espacement lorsque la souris passe, et lorsque la souris passe, nous changerons l’espacement. Marge supérieure: – 50 Px marge gauche: – 20 Px marge supérieure: 70 Px marge inférieure: 70 Px marge gauche: 5 Px marge droite: 5 px Shadow default Box continue en ouvrant les paramètres shadow box et en ajoutant des ombres de boîte entièrement transparentes. Intensité du flou de l’ombre du cadre: 80 Px couleur de l’ombre: rgba (255255255,0) Les ombres de cadre en vol stationnaire changent la couleur des ombres de cadre en vol stationnaire afin qu’elles soient complètement transparentes pour l’affichage. Couleur de l’ombre: rgba (0,0,0,0,34) Cloner le formulaire de texte 2 deux fois et le placer dans les colonnes restantes une fois que vous avez terminé l’édition du formulaire de texte dans la colonne 2, vous pouvez continuer à cloner le formulaire deux fois et placer une copie dans la colonne 2
Faites la queue. Modifier la première copie modifier le contenu ouvre la première copie dans la troisième colonne et modifie le contenu et les liens de la catégorie de produits. Changer la couleur de fond vous permet également de changer la couleur de fond de ce module. Couleur de fond: # dddddd Modifier le contenu de la deuxième copie modifier le contenu de la deuxième copie dans la colonne 4. Changez la couleur de fond avec la couleur de fond. Couleur de fond: # c6c6c6c6 Ajouter un module d’image de plus petite taille d’écran à la colonne 2 de la ligne 1 charger l’image enfin et surtout, nous ajouterons également un module d’image à la deuxième colonne de la première ligne pour optimiser tout le contenu de l’écran plus petit. Visibilité en cachant ce module dans l’onglet avancé du module sur le Bureau, assurez – vous que le module n’est affiché que sur des écrans plus petits. Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Dans cet article, nous avons recréé un exemple étonnant de conception qui met en évidence les principales catégories de produits de votre site. Nous espérons que ce tutoriel vous inspirera également à créer vos propres types de conception. Si vous avez des questions ou des suggestions, assurez – vous de laisser un commentaire dans la section commentaires ci – dessous!