Le menu de votre site Web est l’un des éléments les plus importants de votre site en raison de l’impact direct qu’il peut avoir sur la façon dont les utilisateurs naviguent dans votre contenu. Une barre de menu bien conçue peut faire une grande différence en simplifiant la navigation, en mettant en évidence les pages clés et en améliorant l’expérience utilisateur globale. Le module de menu pleine largeur de Divi offre une grande flexibilité en vous permettant de styliser les icônes de panier et de recherche comme bon vous semble. Dans ce tutoriel, nous allons vous montrer trois conceptions différentes pour le module de menu pleine largeur avec différents styles pour les icônes de panier et de recherche.
C’est parti !
Aperçu
Voici un aperçu de ce que nous allons concevoir.
Premier modèle
Pour le premier modèle, nous plaçons une des icônes à gauche et l’autre à droite en choisissant une structure de menu centrée. Nous allons également changer la couleur au survol.
Deuxième conception
Pour le deuxième design, nous plaçons les deux icônes sur le côté droit et changeons la couleur au survol.
Troisième conception
Pour le troisième modèle, nous utilisons des feuilles de style en cascade supplémentaires pour styliser les icônes. Vous pouvez utiliser ces mêmes classes CSS pour donner aux icônes le style que vous souhaitez.
Ce dont vous avez besoin pour commencer
Avant de commencer, installez et activez le thème Divi et assurez-vous que vous disposez de la dernière version de Divi sur votre site Web.
Vous êtes maintenant prêt à commencer !
Comment styliser les icônes de panier et de recherche dans votre module Divi Fullwidth Menu
Construire l’en-tête global
Pour chacune des trois conceptions de menu, nous allons commencer par ouvrir le Créateur de thème à partir de la section Divi du panneau d’administration de WordPress. Sélectionnez Add Global Header, puis sélectionnez Build Global Header.
Insérez une nouvelle section pleine largeur, puis supprimez la section ordinaire vide.
Ensuite, insérez le module de menu pleine largeur.
Téléchargez votre logo dans le menu.
Nous sommes maintenant prêts à construire notre design.
Premier design
Notre premier design intégrera les effets de survol intégrés à Divi pour changer la couleur du texte et des icônes au survol. Commençons.
Commencez par ouvrir les paramètres du menu pleine largeur et ajoutez un arrière-plan.
Accédez à l’onglet Conception et sélectionnez la disposition du logo centré en ligne.
- Style : Logo centré en ligne
Modifions maintenant certains des paramètres du texte du menu.
- Couleur du lien actif : #09148c
- Police de caractères du menu : Rubik
- Poids de la police du menu : Gras
- Style de la police du menu : Majuscules et souligné
Ensuite, définissez la couleur du texte du menu, la taille du texte et l’espacement des lettres.
- Couleur du texte du menu : #000000
- Taille du texte du menu : 21px
- Espacement des lettres du menu : 1px
Nous souhaitons ajouter des effets de survol à ce menu. Sélectionnez donc l’icône de survol pour la couleur du texte du menu. Définissez une couleur de texte de menu différente au survol.
- Couleur du texte du menu au survol #b70018
Ensuite, accédez aux paramètres du menu déroulant sous l’onglet Conception.
- Couleur de fond du menu déroulant : #fbf9f4
- Couleur de la ligne du menu déroulant : #b70018
- Couleur du texte du menu déroulant : #000000
Nous voulons que la couleur du texte du menu déroulant change également au survol, sélectionnez donc les options de survol pour ce paramètre et définissez une couleur de texte différente au survol.
- Couleur du texte du menu déroulant au survol : #b70018
- Couleur du lien actif du menu déroulant : #b70018
- Couleur d’arrière-plan du menu mobile : #fbf9f4
- Couleur du texte du menu mobile : #000000
Une fois encore, nous voulons que la couleur du texte du menu mobile change au survol. Sélectionnez les options de survol pour ce paramètre, puis définissez une couleur de texte différente au survol.
- Couleur du texte du menu mobile au survol : #b70018
Personnalisation de l’icône de panier et de recherche
Ajoutons et personnalisons maintenant les icônes de panier et de recherche. Sous l’onglet Contenu, naviguez jusqu’à Éléments et activez l’icône du panier et celle de la recherche.
- Afficher l’icône du panier : Oui
- Afficher l’icône de recherche : Oui
Revenez à l’onglet Design et ouvrez les paramètres des icônes. Chacune de nos icônes sera noire, et sera rouge au survol. Tout d’abord, définissez la couleur noire.
- Couleur de l’icône du panier d’achat : #000000
- Couleur de l’icône de recherche : #000000
- Couleur de l’icône du menu hamburger : #000000
Ensuite, sélectionnez l’icône de survol et ajoutez la couleur de survol.
- Couleur de l’icône du panier au survol : #b70018
- Couleur de l’icône de recherche au survol : #b70018
- Couleur de l’icône du menu Hamburger au survol : #b70018
Définissez la taille de l’icône du panier et de l’icône de recherche.
- Icône du panier Taille de la police : 25px
- Taille de la police de l’icône de recherche : 25px
Accédez à la section Espacement, puis définissez les rembourrages supérieur et inférieur.
- Padding-Top : 5px
- Padding-Bottom : 5px
Enfin, nous allons ajouter une bordure en haut et en bas du module de menu. Ouvrez les paramètres de la bordure.
Conception finale
Et voici notre conception finale.
Deuxième design
Notre deuxième design utilisera les effets de survol intégrés à Divi pour modifier la taille des icônes de menu et du texte au survol. Commençons.
Tout d’abord, nous allons ajouter un dégradé d’arrière-plan au module de menu. Le gradient a trois arrêts, les paramètres sont les suivants :
- Premier arrêt : 0%, rgba(255,255,255,0)
- Deuxième arrêt : 23%, rgba(252,199,76,0.65)
- Troisième arrêt : 82 %, rgba(232,119,255,0.32)
Définissez le Type de gradient et la Position du gradient.
- Type de gradient : Conique
- Position du dégradé : Bas de page
Ensuite, accédez à l’onglet Design et définissez la mise en page.
Passez à la section Texte du menu pour personnaliser la conception du texte du menu.
- Couleur du lien actif : #FFFFFF
- Police de caractères du menu : Syne
- Poids de la police du menu : Gras
- Style de la police du menu : Capitalisé
Définissez maintenant la taille du texte du menu et l’espacement des lettres.
- Taille du texte du menu : 20px
- Espacement des lettres du menu : 2px
Puisque nous voulons que la taille du texte de notre menu augmente au survol, sélectionnez l’option de survol.
- Taille du texte du menu au survol : 22px
Ensuite, modifiez les paramètres de conception du menu déroulant.
- Couleur de fond du menu déroulant : #fcda90
- Couleur de la ligne du menu déroulant : #FFFFFF
- Couleur du texte du menu déroulant : #FFFFFF
- Couleur du lien actif du menu déroulant : #FFFFFF
Définissez la couleur de l’arrière-plan et du texte du menu mobile.
- Couleur d’arrière-plan du menu mobile : #fcda90
- Couleur du texte du menu mobile : #FFFFFF
Personnalisation de l’icône du panier et de la recherche
Commençons maintenant à personnaliser les icônes de notre menu. Naviguez vers Éléments sous l’onglet Contenu et activez l’icône du panier et l’icône de recherche.
- Afficher l’icône du panier : Oui
- Afficher l’icône de recherche : Oui
Revenez à l’onglet Conception et ouvrez les paramètres de l’icône.
- Couleur de l’icône du panier : #000000
- Couleur de l’icône de recherche : #000000
- Couleur de l’icône du menu hamburger : #000000
Les icônes auront une couleur orange foncé au survol. Sélectionnez l’option de couverture et définissez la couleur.
- Couleur de l’icône du panier au survol : #fcac00
- Couleur de l’icône de recherche au survol : #fcac00
- Couleur de l’icône du menu Hamburger au survol : #fcac00
Ensuite, définissez la taille de la police pour les icônes de panier et de recherche.
- Icône du panier Taille de la police : 25px
- Taille de la police de l’icône de recherche : 25px
Pour que la taille de l’icône augmente au survol, sélectionnez l’option de survol.
- Taille de la police de l’icône du panier au survol : 30px
- Taille de la police de l’icône de recherche au survol : 30px
Enfin, passez à la section Espacement et définissez les rembourrages supérieur et inférieur.
- Rembourrage en haut : 5px
- Padding-Bottom : 5px
Conception finale
Voici la conception finale de notre deuxième disposition de menu.
Troisième conception
Pour notre conception finale, nous allons ajouter un cercle d’arrière-plan derrière les icônes de panier à l’aide d’un CSS personnalisé. Commençons.
Tout d’abord, ajoutez une couleur de fond au module de menu pleine largeur.
Ensuite, accédez à l’onglet Conception et ouvrez les options Texte du menu.
- Couleur du lien actif : #e84322
- Police du menu : Cinzel
- Poids de la police du menu : Ultra Bold
Nous voulons que la couleur du texte du menu change au survol. Tout d’abord, définissez la couleur du texte du menu.
Cliquez sur l’icône de survol et définissez la couleur du texte de survol.
- Couleur du texte du menu au survol : #e84322
Ensuite, définissez la taille du texte du menu et l’espacement des lettres.
- Taille du texte du menu : 21px
- Espacement des lettres du menu : 1px
Nous souhaitons également que l’espacement des lettres s’étende au survol, c’est pourquoi nous sélectionnons l’option de survol pour ce paramètre.
- Espacement des lettres du menu au survol : 2px
Définissez l’alignement du texte sur la gauche.
Ensuite, modifiez les paramètres suivants du menu déroulant.
- Couleur de fond du menu déroulant : #efb6ac
- Couleur de la ligne du menu déroulant : #e7644a
- Couleur du texte du menu déroulant : #e7644a
- Couleur du texte du menu déroulant au survol : #e84322
- Couleur du lien actif du menu déroulant : #e84322
Définissez la couleur de l’arrière-plan et du texte du menu mobile.
- Couleur d’arrière-plan du menu mobile : #efb6ac
- Couleur du texte du menu mobile : #e7644a
- Couleur du texte du menu mobile au survol : #e84322
Personnalisation de l’icône de panier et de recherche
Tout d’abord, accédez à Éléments sous l’onglet Contenu et activez l’icône du panier et l’icône de recherche.
- Afficher l’icône du panier : Oui
- Afficher l’icône de recherche : Oui
Ensuite, revenez à l’onglet Design et ouvrez les paramètres de l’icône. Définissez la couleur de l’icône.
- Couleur de l’icône du panier d’achat : #e7644a
- Couleur de l’icône de recherche : #e7644a
- Icône de menu hamburger Couleur : #e7644a
La couleur de ces icônes change au survol. Activez les options de survol et définissez la couleur.
- Couleur de l’icône du panier au survol : #e84322
- Couleur de l’icône de recherche au survol : #e84322
- Couleur de l’icône du menu Hamburger au survol : #e84322
Nous souhaitons également que la taille de l’icône augmente au survol. Tout d’abord, définissez la taille de la police de l’icône.
- Icône du panier Taille de la police : 22px
- Taille de la police de l’icône de recherche : 22px
Ensuite, définissez la taille de la police de l’icône au survol.
- Taille de la police de l’icône du panier au survol : 26px
- Taille de la police de l’icône de recherche au survol : 26px
Ensuite, accédez à la section Espacement et ajoutez les renforts supérieur et inférieur.
- Padding-Top : 5px
- Padding-Bottom : 5px
Enfin, nous pouvons ajouter une feuille de style CSS personnalisée à l’en-tête global pour ajouter les cercles derrière l’icône de panier et de recherche. Vous pouvez personnaliser ce CSS comme vous le souhaitez pour l’adapter au design de votre module de menu.
Ouvrez les paramètres du modèle d’en-tête, puis accédez à l’onglet Avancé et insérez le CSS personnalisé suivant.
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding : 2% 2% 2% 2% ;
background-color:#F7D5C2 ;
border-radius : 50% ;
}
Conception finale
Voilà qui termine la conception de notre troisième et dernière disposition de menu.
Résultat final
Voyons maintenant la conception finale des trois modules de menu.
Première conception
Second design
Troisième design
Réflexions finales
Le module de menu et les icônes de panier et de recherche de Divi sont faciles à personnaliser afin de créer des mises en page et des designs uniques pour votre site Web. Vous pouvez facilement améliorer l’apparence de vos modules de menu en utilisant les paramètres intégrés de Divi, comme les effets de survol et les CSS personnalisés. Nous espérons que ce tutoriel vous a donné des idées de conception que vous pourrez mettre en œuvre sur votre propre site Web ! Comment avez-vous personnalisé l’apparence de votre module de menu et de vos icônes ? Faites-nous en part dans les commentaires !
