Comment mettre en évidence les catégories de produits dans une superbe section de héros de site Web Divi

Si vous êtes familiarisé avec les sites de commerce électronique, vous connaissez sans aucun doute également les catégories de produits. Les catégories de produits peuvent être certaines des pages les plus puissantes de votre site Web. C'est pourquoi il est important de les rendre faciles à trouver et de les mettre en valeur de manière simple et élégante. Avec les options intégrées de Divi, vous pouvez emmener votre conception dans de nombreuses directions. Dans ce tutoriel, nous allons vous montrer comment mettre en évidence les catégories de produits dans votre section héros. Nous allons créer l'exemple de conception à partir de zéro et, espérons-le, cela vous inspirera également à mettre en évidence les catégories de produits de votre propre manière créative !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Commençons à créer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Fond dégradé

Commencez par ajouter une nouvelle section à votre page. Ouvrez les paramètres de cette section et ajoutez-y un fond dégradé.

• Couleur 1 : #ffffff
• Couleur 2: #757f1e
• Type de dégradé : Linéaire
• Direction du gradient : 90 degrés
• Position de départ : 50 %
• Position finale : 50 %

Espacement

Ensuite, accédez à l'onglet Conception et ajoutez des rembourrages haut et bas personnalisés à la section.

• Rembourrage supérieur : 130 px
• Rembourrage inférieur : 130px

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Colonne 1 Couleur d'arrière-plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une couleur d'arrière-plan à la première colonne.

• Couleur d'arrière-plan de la colonne 1 : rgba(0,0,0,0.19)

Image de fond de la colonne 1

Ajoutez également une image d'arrière-plan à la première colonne ainsi qu'un mode de fusion.

• Position de l'image d'arrière-plan de la colonne 1 : en bas au centre
• Répétition de l'image d'arrière-plan de la colonne 1 : aucune répétition
• Colonne 1 Mélange d'image d'arrière-plan : Multiplier

Couleur d'arrière-plan de la colonne 2

La deuxième colonne n'aura besoin que d'une couleur de fond blanc.

• Couleur d'arrière-plan de la colonne 2 : #ffffff

Dimensionnement

Continuez en allant dans l'onglet conception des paramètres de ligne et modifiez les paramètres de dimensionnement.

• Utiliser la largeur personnalisée : Oui
• Unité : PX
• Largeur personnalisée : 2000px
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement

Supprimez également tout le remplissage personnalisé par défaut de la ligne.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Boîte ombre

Et ajoutez une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Le premier module dont nous aurons besoin dans la deuxième colonne est un module de texte intitulé. Ajoutez du contenu de votre choix.

Paramètres de texte d'en-tête

Ensuite, allez dans les paramètres de texte d'en-tête et apportez quelques modifications.

• Poids de la police d'en-tête : ultra gras
• Taille du texte de l'en-tête : 60 px (ordinateur de bureau et tablette), 50 px (téléphone)
• Espacement des lettres d'en-tête : -4px
• Hauteur de la ligne de cap : 0,8 em

Espacement

Ajoutez également des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 17vw
• Rembourrage gauche : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)

Ajouter le module diviseur à la colonne 2

Visibilité

Le deuxième et dernier module nécessaire dans la deuxième colonne est un module diviseur. Assurez-vous que l'option Afficher le diviseur est activée.

• Afficher le diviseur : Oui

Couleur

Changez ensuite la couleur du séparateur.

• Couleur : #757f1e

modes

Modifiez également le style de séparation dans les paramètres de styles.

• Style de diviseur: Double

Dimensionnement

Et augmentez le poids du diviseur dans les paramètres de dimensionnement du module.

• Poids du diviseur : 6px

Espacement

Enfin, ajoutez des marges supérieures et inférieures personnalisées au module de séparation.

• Marge supérieure : 2vw
• Marge inférieure : 15vw

Ajouter la ligne n° 2

Structure des colonnes

Passons au deuxième rang ! Choisissez la structure de colonne suivante pour cela :

Colonne 1 Couleur d'arrière-plan

Ouvrez les paramètres de ligne et ajoutez une couleur d'arrière-plan à la première colonne.

• Colonne 1 Couleur d'arrière-plan : #212121

Dimensionnement

Ensuite, allez dans l'onglet conception et jouez avec la taille de la rangée.

• Utiliser la largeur personnalisée : Oui
• Unité : PX
• Largeur personnalisée : 2000px
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Supprimez également tout le rembourrage personnalisé de la ligne en ajoutant « 0px » au rembourrage supérieur et inférieur.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Boîte ombre

Enfin, donnez à la rangée une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu

Le premier module dont nous aurons besoin est un module de texte. Ajoutez-en un à la première colonne avec un contenu de votre choix.

Paramètres de texte

Continuez en allant dans l'onglet conception et en modifiant les paramètres du texte.

• Poids de la police de texte : léger
• Couleur du texte : #ffffff
• Taille du texte : 18 pixels (ordinateur de bureau), 15 pixels (tablette), 12 pixels (téléphone)
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : à gauche
• Couleur du texte : clair

Paramètres de texte d'en-tête

Modifiez également les paramètres du texte du titre.

• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte : 25 px (ordinateur de bureau), 20 px (tablette), 18 px (téléphone)
• En-tête 3 Espacement des lettres : -1px

Espacement

Ajoutez également des valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 30px
• Rembourrage inférieur : 30px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Ajouter le module de texte n° 2 à la colonne 2

Ajouter du contenu

Continuez en ajoutant un autre module de texte à la deuxième colonne. Ajoutez du contenu de votre choix et liez également la page de catégorie de produit dans les paramètres de lien.

Couleur d'arrière-plan par défaut

Ensuite, allez dans les paramètres d'arrière-plan et ajoutez une couleur d'arrière-plan.

• Couleur de fond : #eaeaea

Couleur d'arrière-plan du survol

Changez cette couleur d'arrière - plan sur le vol stationnaire.

• Couleur d'arrière-plan : #ffbb00

Paramètres de texte par défaut

Modifiez les paramètres de texte dans l'onglet Conception ensuite.

• Poids de la police de texte : ultra gras
• Style de police de texte : majuscule
• Couleur du texte : #333333
• Taille du texte : 16px
• Espacement des lettres du texte : -1px
• Orientation du texte : Centre

Paramètres de texte de survol

Et modifiez ces paramètres au survol.

• Couleur du texte : #ffffff
• Taille du texte : 20 pixels

Espacement par défaut

Nous appliquons également des valeurs d'espacement par défaut.

• Rembourrage supérieur : 45 px
• Rembourrage inférieur : 45px
• Rembourrage gauche : 5px
• Rembourrage droit : 5px

Espacement de survol

Que nous allons changer en survol.

• Marge supérieure : -50px
• Marge de gauche : -20px
• Rembourrage supérieur : 70 pixels
• Rembourrage inférieur : 70px
• Rembourrage gauche : 5px
• Rembourrage droit : 5px

Ombre de boîte par défaut

Continuez en ouvrant les paramètres de l'ombre de la boîte et ajoutez une ombre de la boîte complètement transparente.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(255,255,255,0)

Ombre de la boîte de survol

Modifiez la couleur de l'ombre de la boîte complètement transparente au survol pour qu'elle apparaisse.

• Couleur de l'ombre : rgba(0,0,0,0.34)

Cloner le module de texte #2 deux fois et le placer dans les colonnes restantes

Une fois que vous avez terminé de modifier le module de texte dans la colonne 2, vous pouvez continuer et cloner le module deux fois et placer les doublons dans les deux colonnes restantes de la ligne.

Changer le premier duplicata

Modifier le contenu

Ouvrez le premier doublon dans la troisième colonne et modifiez le contenu et le lien de la catégorie de produits.

Changer la couleur d'arrière-plan

Modifiez également la couleur de fond de ce module.

• Couleur d'arrière-plan : #dddddd

Changer le deuxième duplicata

Modifier le contenu

Modifiez également le contenu du deuxième doublon dans la colonne 4.

Changer la couleur d'arrière-plan

Avec la couleur de fond.

• Couleur d'arrière-plan : #c6c6c6

Ajouter un module d'image pour des tailles d'écran plus petites à la colonne 2 de la ligne n°1

Télécharger une image

Enfin, nous allons également ajouter un module Image à la deuxième colonne de la première ligne pour tout optimiser pour des tailles d'écran plus petites.

Visibilité

Assurez-vous que ce module n'apparaît que sur des écrans de plus petite taille en le masquant sur le bureau dans l'onglet avancé du module.

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Dernières pensées

Dans cet article, nous avons recréé un exemple de design époustouflant qui met les principales catégories de produits de votre site Web à l'honneur. Nous espérons que ce tutoriel vous inspirera également pour créer vos propres types de designs. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!