Comment ajouter les effets de soulignement et de surlignement élégants dans le menu Divi

Publié: 2024-11-25

Le menu Divi est un outil de navigation polyvalent et personnalisable qui est un composant essentiel des sites Web créés avec Divi Theme Builder. Reconnu pour sa flexibilité, le menu Divi nous permet de créer des systèmes de navigation visuellement époustouflants et hautement fonctionnels qui s'alignent parfaitement avec votre identité de marque.

L'ajout d'effets de soulignement et de survol élégants est un moyen d'améliorer le menu de votre site Web. Ces animations subtiles mais visuellement attrayantes améliorent l'interaction de l'utilisateur et améliorent l'expérience de navigation globale.

Ce tutoriel explorera comment créer ces effets de survol dynamiques pour votre menu Divi à l'aide de CSS et de paramètres personnalisés. Cela vous aidera à obtenir un look soigné et moderne pour votre site Web, que vous soyez un concepteur de sites Web expérimenté ou un débutant Divi. Ce tutoriel est facile à suivre et garantit une finition professionnelle.

Effet de survol souligné
Effet de survol

Comment ajouter les effets de soulignement et de surlignement élégants dans le menu Divi

Étape 1 : Créer ou ouvrir un modèle d'en-tête

Sur votre tableau de bord WordPress, accédez à Divi -> Theme Builder . Sur la page Theme Builder, créez un nouveau modèle d'en-tête ou ouvrez-en un existant en cliquant sur le bouton Ajouter un en-tête global ou en sélectionnant le modèle d'en-tête auquel vous souhaitez ajouter l'effet de survol ou de soulignement élégant.

Si vous créez l'en-tête à partir de zéro, une fois que vous avez entré le modèle d'en-tête, vous pouvez commencer par le concevoir.

Ajoutez une nouvelle section et une nouvelle ligne, puis choisissez une mise en page (par exemple, une ligne, deux colonnes). Ensuite, utilisez des modules tels que le module Menu pour la navigation, le module Recherche si vous souhaitez une barre de recherche et le module Social Media Follow pour les icônes sociales. Dans cet exemple, nous ajoutons uniquement le module Menu à notre en-tête.

Ensuite, modifiez et stylisez votre en-tête comme vous le souhaitez.

Étape 2 : ajouter le CSS personnalisé

Une fois que vous avez ajouté et stylisé votre en-tête, nous ajouterons le CSS personnalisé à votre modèle d'en-tête.

Accédez aux paramètres de la page en cliquant sur le bouton d'engrenage (️) de votre éditeur de modèle d'en-tête. Ensuite, accédez à l'onglet Avancé -> CSS personnalisé . Une fois que vous êtes entré dans la section CSS personnalisé , copiez l'extrait CSS simple ci-dessous et collez-le dans le champ de saisie CSS personnalisé .

Voici un exemple d'extrait CSS que vous pouvez appliquer pour ajouter l'effet de survol de soulignement élégant à votre menu : 

 .et_pb_menu_0_tb_header ul li > a:avant{
    contenu: '';
    largeur : 0 ;
    gauche : 50 % ;
    hauteur : 4px ;
    rayon de bordure : 2 px ;
    arrière-plan : RVB (145, 255, 2) ;
    position : absolue ;
    indice z : -1 ;
    bas : 14px ;
    opacité : 0 ;
    transition : .4s cubique-bézier (.27,.03,.30,1.63) ;
}

.et_pb_menu_0_tb_header ul li > a:hover:avant{
    largeur : 110 % ;
    gauche : -5% ;
    opacité : 1 ;
}

.et-menu li li > a{
    largeur : 140 px ;
    remplissage : 15 px ;
}

Remarque : Si vous souhaitez modifier l'effet de survol de souligné à surligné, vous pouvez remplacer la propriété et la valeur de « bottom: 14px; » (par exemple, top:15px ;).

C'est ça. Après avoir ajouté le CSS personnalisé, cliquez sur le bouton Enregistrer les modifications sur la page Theme Builder pour appliquer les modifications.

Pour voir le résultat, ouvrez n'importe quelle page de votre site comprenant le modèle d'en-tête que vous venez de personnaliser.

Qu'a fait le code CSS ?

État initial 

 .et_pb_menu_0_tb_header ul li > a:avant {
}

Ce sélecteur CSS cible le pseudo-élément :before des éléments d'ancrage (< a >) au sein des éléments de liste (< li >) d'une liste non ordonnée (< ul >) avec la classe.

.et_pb_menu_0_tb_header . Il applique les styles suivants :

  • content: '' : Crée un contenu vide pour le pseudo-élément.
  • width: 0 : Définit la largeur initiale à 0 pixel.
  • left: 50% : Positionne l'élément de ligne horizontalement au centre.
  • height: 4px : Définit la hauteur à 4 pixels.
  • border-radius: 2px : Arrondit les coins.
  • background: rgb(145, 255, 2) : Définit la couleur d'arrière-plan sur une valeur RVB spécifique.
  • position: absolute : positionne l'élément de ligne dans son conteneur parent (éléments de menu).
  • z-index: -1 : Place l'élément derrière un autre contenu.
  • bottom: 14px : Positionne l'élément de ligne à 14 pixels du bas des éléments de menu.
  • opacity: 0 : Rend l'élément de ligne initialement invisible.
  • transition: .4s cubic-bezier(.27,.03,.30,1.63) : Ajoute un effet de transition en douceur lorsque les propriétés de l'élément changent.

État de survol 

 .et_pb_menu_0_tb_header ul li > a:hover:avant {
}

Ce sélecteur cible le même pseudo-élément que précédemment, mais uniquement au survol de l'ancre. Il modifie les propriétés suivantes :

  • width: 110% : étend la largeur à 110 % de la largeur de son élément de menu.
  • left: -5% : Il décale l'élément de ligne de 5% vers la gauche.
  • opacity: 1 : Cela rend l'élément de ligne visible.

Style supplémentaire 

 .et-menu li li > a {
    largeur : 140 px ;
    remplissage : 15 px ;
}

Ce code CSS applique des styles aux éléments de sous-menu dans les éléments du menu principal. Voici une répartition de chaque partie :

  • width: 140px : Définit la largeur de l'ancre à 140 pixels.
  • padding: 15px : Ajoute 15 pixels de remplissage autour du contenu de l'ancre.

L'essentiel

L’ajout d’effets de soulignement et de survol élégants à votre menu Divi peut améliorer considérablement l’attrait visuel et l’expérience utilisateur de votre site Web. Vous pouvez créer un menu qui se démarque tout en s'alignant sur l'identité de votre marque en utilisant du CSS personnalisé, des ajustements de conception réfléchis et le générateur de thème flexible de Divi.

En conclusion, ces effets de survol ajoutent non seulement une touche professionnelle mais améliorent également la navigation en fournissant un retour visuel clair. N'hésitez pas à expérimenter les valeurs des propriétés de l'extrait CSS, telles que les couleurs, l'épaisseur, la position de la ligne et la vitesse d'animation, pour adapter les effets au style unique de votre site, garantissant ainsi un design soigné et attrayant.