Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 901.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits.

Souhaitez vous savoir comment personnaliser les icones de panier et de recherche du module Fullwidth Menu de Divi ?

Le menu de votre site Web est l’un des éléments les plus importants de votre site Web en raison de l’impact direct qu’il peut avoir sur la façon dont les utilisateurs naviguent dans votre contenu. 

Une barre de menus 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 « Fullwidth Menu » de Divi offre une grande flexibilité en vous permettant de personnaliser le panier et les icônes de recherche comme bon vous semble. 

Dans ce tutoriel, nous allons vous montrer trois conceptions différentes pour le module « Fullwidth Menu » avec un style différent pour les icônes de panier et de recherche.

Commençons!

Aperçu

Voici un aperçu de ce que nous allons concevoir.

Première conception

Pour le premier design, nous plaçons l’une des icônes à gauche et l’autre à droite en sélectionnant 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 la troisième conception, nous utilisons du CSS supplémentaire pour personnaliser les icônes.

Lire aussi : Divi : Comment personnaliser le module « Countdown Timer » avec un GIF

Personnalisation des icônes de panier et de recherche du module « Fullwidth Menu » de Divi

Créer l’en-tête global

Pour chacune des trois conceptions de menu, nous commencerons par ouvrir le constructeur de thèmes de Divi.

Pour cela, à partir du tableau de bord de WordPress, rendez vous dans Divi > Theme Builder

Cliquez ensuite sur Add Global Header

Choisir ensuite Build Global Header

Insérez une nouvelle section pleine largeur.

Ensuite, supprimez la section précédente.

Insérez le module Fullwidth Menu.

Téléchargez votre logo dans le menu.

Nous sommes maintenant prêts à continuer.

Première conception

Notre premier design intégrera les effets de survol intégrés de Divi pour changer la couleur du texte et des icônes au survol. Commençons.

Consulter également : Divi : Comment ajouter une icône hamburger au module Menu

Commencez par ouvrir les paramètres du module et ajoutez un arrière-plan.

  • Background : #fbf9f4

Accédez à l’onglet Design et sélectionnez la disposition du logo.

  • Style : Inline Centered Logo
Icônes de recherche de panier de style Divi Mise en page du menu pleine largeur 1 Style de mise en page

Modifions maintenant certains des paramètres du texte du menu.

  • Active Link Color : #09148c
  • Menu Font : Rubik
  • Menu Font Weight : Bold
  • Font Style : TT et U (Majuscule et Souligné)

Ensuite, définissez la couleur du texte du menu, la taille du texte et l’espacement des lettres.

  • Menu Text Color : #000000
  • Menu Text Size : 21 px
  • Letter Spacing : 1px

Nous voulons ajouter des effets de survol à ce menu, alors modifiez la couleur du texte du menu au survol. Définissez une couleur de texte de menu différente au survol.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer Facilement et Gratuitement n'importe quel design de site Web ou blog avec un look professionnel. Arrêtez de payer cher pour un site internet que pouvez faire vous-même.

  • Menu Text Color (Hover) : #b70018

Ensuite, accédez aux paramètres Dropdown Menu sous l’onglet Design.

  • Dropdown Menu Background Color : #fbf9f4
  • Dropdown Menu Line Color : #b70018
  • Menu Text Color : #000000

Nous voulons que la couleur du texte du menu déroulant change également au survol, alors sélectionnez les options de survol pour ce paramètre et définissez une couleur de texte différente.

  • Dropdown Menu Text Color (Hover) : #b70018
  • Dropdown Menu Active Link Color : #b70018
  • Mobile Menu Background Color : #fbf9f4
  • Mobile Menu Text Color : #000000

Encore une fois, 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 lors du survol.

  • Mobile Menu Text Color (Hover) : #b70018

Personnalisation du panier et de l’icône de recherche

Ajoutons et personnalisons maintenant les icônes de panier et de recherche. Sous l’onglet Content, accédez à Elements et activez l’icône du panier et l’icône de recherche.

  • Show Shopping Cart Icon : YES
  • Show Search Icon : YES

Revenez à l’onglet Design et ouvrez les paramètres de l’icône. Chacune de nos icônes sera noire et rouge au survol. Tout d’abord, définissez la couleur noire.

  • Shopping Cart Icon Color : #000000
  • Search Icon Color : #000000
  • Hamburger Menu Icon Color : #000000

Ensuite, sélectionnez l’icône de survol et ajoutez la couleur lors du survol.

  • Shopping Cart Icon Color (Hover) : #b70018
  • Search Icon Color (Hover) : #b70018
  • Hamburger Menu Icon Color (Hover) : #b70018

Définissez la taille des icônes.

  • Shopping Cart Icon Font Size : 25 px
  • Search Icon Font Size : 25 px

Accédez à la section Spacing, puis définissez le rembourrage supérieur et inférieur.

  • Padding (Top et Bottom) : 5px

Enfin, nous allons ajouter une bordure en haut et en bas du module Menu. Ouvrez les paramètres de bordure.

  • Top Border Width : 3 px
  • Bottom Border Width : 3 px

Conception finale

Et voici notre conception finale.

Deuxième conception

Notre deuxième conception utilisera les effets de survol intégrés de 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é de fond au module Menu. Le dégradé a trois arrêts, les réglages sont les suivants :

  • Gradient Stops :
    • 0 % : rgba(255,255,255,0)
    • 23 % : rgba(252,199,76,0.65)
    • 82 % : rgba(232,119,255,0.32)

Définissez le type de dégradé et la position du dégradé.

  • Gradient Type : Conical
  • Gradient Position : Bottom

Ensuite, accédez à l’onglet Design et définissez la mise en page (Layout).

  • Style : Centered

Accédez à la section Menu Text pour personnaliser la conception du texte du menu.

  • Active Link Color : #FFFFFF
  • Menu Font : Syne
  • Font Weight : Bold
  • Menu Font Style : TT (Majuscule)
  • Menu Text Color : #FFFFFF

Définissez maintenant la taille du texte du menu et l’espacement des lettres.

  • Menu Text Size : 20 px
  • Menu Letter Spacing : 2px

Puisque nous voulons que la taille du texte de notre menu augmente au survol, sélectionnez l’option de survol.

  • Menu Text Size : 22px

Ensuite, modifiez les paramètres de conception du menu déroulant.

  • Dropdown Menu Background Color : #fcda90
  • Dropdown Menu Line Color : #FFFFFF
  • Menu Text Color : #FFFFFF
  • Dropdown Menu Active Link Color : #FFFFFF

Définissez la couleur d’arrière-plan et du texte du menu mobile.

  • Mobile Menu Background Color : #fcda90
  • Mobile Menu Text Color : #FFFFFF

Personnalisation du panier et de l’icône de recherche

Commençons maintenant à personnaliser nos icônes de menu. Accédez à Elements sous l’onglet Content et activez l’icône du panier et l’icône de recherche.

  • Sow Shopping Cart Icon : YES
  • Show Search Icon : YES

Revenez à l’onglet Design et ouvrez les paramètres de l’icône.

  • Shopping Cart Icon Color : #ffffff
  • Search Icon Color : #ffffff
  • Hamburger Menu Icon Color : #ffffff

Les icônes auront une couleur orange foncé au survol. Sélectionnez l’option de couverture et définissez la couleur.

  • Shopping Cart Icon Color (Hover) : #fcac00
  • Search Icon Color (Hover) : #fcac00
  • Hamburger Menu Icon Color (Hover) : #fcac00

Ensuite, définissez la taille de la police pour les icônes de panier et de recherche.

Découvrez les meilleurs outils pour votre site Web

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

  • Shoppin Cart Icont Font Size : 25 px
  • Search Icon Font Size : 25 px

Pour que la taille de l’icône augmente au survol, sélectionnez l’option de survol.

  • Shopping Cart Icon Font Size (Hover) : 30 px
  • Search Icon Font Size (Hover) : 30 px

Enfin, passez à la section Spacing et définissez le rembourrage supérieur et inférieur.

  • Padding (Top et Bottom) : 5 px

Conception finale

Voici la conception finale de notre deuxième disposition de menu.

Troisième conception

Pour notre conception finale, nous ajouterons un cercle d’arrière-plan derrière les icônes de panier à l’aide de CSS personnalisés. 

Lire également : Divi : Comment créer un menu sticky et extensible au survol

Commençons.

Tout d’abord, ajoutez une couleur d’arrière-plan au module.

  • Arrière-plan : #efb6ac

Ensuite, accédez à l’onglet Design et ouvrez l’option Menu Text.

  • Active Link Color : #e84322
  • Menu Font : Cinzel
  • Menu Font Weight : 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.

  • Menu Text Color (Desktop) : #e7644a

Cliquez sur l’icône de survol et définissez la couleur du texte au survol.

  • Menu Text Color (Hover) : #e84322

Ensuite, définissez la taille du texte du menu et l’espacement des lettres.

  • Menu Text Size : 21px
  • Menu Letter Spacing : 1px

Nous voulons également que l’espacement des lettres s’étende au survol, alors sélectionnez l’option de survol pour les paramètres.

  • Menu Letter Spacing : 2px

Définissez l’alignement du texte à gauche.

  • Text Alignment : à gauche

Ensuite, modifiez les paramètres suivants du menu déroulant.

  • Dropdown Menu Background Color : #efb6ac
  • Dropdown Menu Line Color : #e7644a

Lire aussi : Divi : Comment créer une section Témoignages sous forme de grille

  • Dropdown Menu Text Color
    • Desktop : #e7644a
    • Hover : #e84322
  • Dropdown Menu Active Link Color : #e84322

Définissez la couleur d’arrière-plan et du texte du menu mobile.

  • Mobile Menu Background Color : #efb6ac
  • Mobile Menu Text Color :
    • Desktop : #e7644a
    • Hover : #e84322

Personnalisation du panier et de l’icône de recherche

Tout d’abord, accédez à Elements sous l’onglet Content et activez l’icône du panier et l’icône de recherche.

  • Show Shopping Cart Icon : YES
  • Show Shopping Icon : YES

Ensuite, revenez à l’onglet Design et ouvrez les paramètres de l’icône. Définissez la couleur de l’icône.

  • Shopping Cart Icon Color : #e7644a
  • Search Icon Color : #e7644a
  • Hamburger Menu Icon Color : #e7644a

La couleur de ces icônes changera au survol. Activez les options de survol et définissez la couleur.

  • Shopping Cart Icon Color (Hover) : #e84322
  • Search Icon Color (Hover) : #e84322
  • Hamburger Menu Icon Color (Hover) : #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.

  • Shopping Cart Icon Font Size : 22 px
  • Search Icon Font Size : 22 px

Ensuite, définissez la taille de la police de l’icône au survol.

  • Shopping Cart Icon Font Size (Hover) : 26 px
  • Search Icon Font Size (Hover) : 26 px

Ensuite, accédez à la section Spacing et ajoutez un rembourrage supérieur et inférieur.

  • Padding (Top et Bottom) : 5 px

Enfin, nous pouvons ajouter du CSS personnalisé à l’en-tête global pour ajouter les cercles derrière le panier et l’icône de recherche. 

Vous pouvez personnaliser ce CSS comme vous le souhaitez pour qu’il corresponde à la conception de votre module Menu.

Plus de 11 millions d'outils à télécharger

Envato Elements propose les meilleures ressources pour créer et développer tous les aspects de votre site internet. Vous y trouverez des millions de templates WordPress, des ressources graphiques, audio et bien plus encore. Parfait pour les débutants.

Ouvrez les paramètres du modèle d’en-tête, puis accédez à l’onglet Advanced 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

Cela complète la conception de notre troisième et dernière disposition de menu.

Résultat final

Examinons maintenant la conception finale des trois différents menus.

Première conception

personnaliser les icones de panier et de recherche du module Fullwidth Menu de Divi
personnaliser les icones de panier et de recherche du module Fullwidth Menu de Divi

Télécharger DIVI Maintenant !!!

Deuxième conception

personnaliser les icones de panier et de recherche du module Fullwidth Menu de Divi
personnaliser les icones de panier et de recherche du module Fullwidth Menu de Divi

Troisième conception

personnaliser les icones de panier et de recherche du module Fullwidth Menu de Divi
personnaliser les icones de panier et de recherche du module Fullwidth Menu de Divi

Télécharger DIVI Maintenant !!!

Conclusion

Le module 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 conceptions uniques pour votre site Web. 

Vous pouvez facilement rehausser l’apparence de vos modules Menu à l’aide des paramètres Divi intégrés tels que les effets de survol et le CSS personnalisé. 

Nous espérons que ce tutoriel vous inspirera pour vos prochains projets Divi. Si vous avez un quelconque souci ou des suggestions, retrouvons nous dans la section commentaires pour en discuter.

Vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet.

N’hésitez pas à consulter également notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.

%d blogueurs aiment cette page :