Comment mettre en surbrillance un élément de menu dans WordPress

Mettre en surbrillance un élément de menu dans WordPress peut attirer l'attention de vos visiteurs sur des pages importantes ou des offres spéciales. Cela peut aider à améliorer la navigation et l'engagement des utilisateurs.

Que vous souhaitiez mettre l'accent sur une nouvelle fonctionnalité, une promotion ou une mise à jour essentielle, faire ressortir certains éléments de menu peut renforcer l'efficacité de votre site.

Par exemple, nous avons mis en surbrillance la page de tarification dans le menu de navigation principal de plusieurs de nos marques partenaires pour attirer l'attention des utilisateurs. Cette approche a encouragé davantage de visiteurs à explorer la tarification de nos produits et a entraîné une augmentation des conversions.

Dans cet article, nous vous montrerons comment mettre facilement en surbrillance un élément de menu dans WordPress à l'aide de code CSS.

Pourquoi mettre en surbrillance un élément de menu dans WordPress ?

Un menu de navigation est une liste de liens pointant vers des zones importantes de votre site. Ils sont généralement présentés sous forme de barre horizontale dans l'en-tête de chaque page d'un site WordPress.

En mettant en surbrillance un élément de menu dans votre menu de navigation, vous pouvez facilement diriger l'attention de l'utilisateur vers votre appel à l'action le plus important.

Par exemple, si vous souhaitez que les utilisateurs visitent la page de tarification ou un article spécifique sur votre blog WordPress, vous pouvez mettre en surbrillance cet élément dans votre menu de navigation. Cela peut augmenter le trafic sur cette page et stimuler les ventes.

Cela étant dit, voyons comment vous pouvez mettre en surbrillance un élément de menu dans WordPress à l'aide de CSS :

• Méthode 1 : Mettre en surbrillance un élément de menu à l'aide de l'éditeur de site complet
• Méthode 2 : Mettre en surbrillance un élément de menu à l'aide d'un personnaliseur de thème
• Personnalisation de la mise en surbrillance de votre élément de menu

Méthode 1 : Mettre en surbrillance un élément de menu à l'aide de l'éditeur de site complet

Si vous utilisez un thème compatible avec les blocs, vous aurez l'éditeur de site complet à la place de l'ancien personnaliseur de thème. Vous pouvez facilement y mettre en surbrillance un élément de menu actuel également.

Tout d'abord, accédez à la page Apparence » Éditeur depuis le tableau de bord d'administration de WordPress. Cela vous dirigera vers l'éditeur de site complet.

Ici, double-cliquez simplement sur l'élément de menu que vous souhaitez mettre en surbrillance, puis cliquez sur l'icône « Paramètres » en haut. Cela ouvrira immédiatement les paramètres de cet élément de menu spécifique dans le panneau de blocs.

Maintenant, faites simplement défiler jusqu'à l'onglet « Avancé » et cliquez sur l'icône fléchée à côté pour le développer.

Cela ouvrira un champ « Classe CSS supplémentaire » où vous devrez écrire highlighted-menu.

Ensuite, cliquez sur le bouton « Enregistrer » en haut de la page pour sauvegarder vos modifications.

Après cela, vous devrez ajouter un petit bout de CSS à votre thème pour l'effet de surbrillance. Vous pouvez soit corriger le personnaliseur de thème manquant, soit utiliser un plugin d'extrait de code pour ajouter du code CSS.

Comment ajouter des extraits de code CSS à l'aide de WPCode

Pour ajouter du CSS à WordPress, nous recommandons d'utiliser WPCode car c'est le meilleur plugin d'extraits de code WordPress sur le marché qui rend l'ajout de code personnalisé sûr et facile.

Tout d'abord, vous devez installer et activer le plugin WPCode. Pour plus d'instructions, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, accédez à la page Extraits de code » + Ajouter un extrait depuis votre panneau d'administration WordPress.

Ici, survolez l'option « Ajouter votre code personnalisé (Nouvel extrait) » avec votre souris, et cliquez sur le bouton « + Ajouter un extrait personnalisé » en dessous.

Ensuite, vous devez sélectionner « Extrait CSS » comme type de code dans la liste des options qui apparaissent.

Vous serez maintenant redirigé vers la page « Créer un extrait personnalisé », où vous pourrez commencer par choisir un nom pour votre extrait.

Ensuite, copiez et collez le code CSS suivant dans la zone « Aperçu du code » :

/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Voici à quoi cela devrait ressembler :

Une fois que vous avez fait cela, faites défiler vers le bas jusqu'à la section « Insertion ».

Ici, choisissez simplement le mode « Insertion automatique » afin que le code puisse être exécuté automatiquement sur l'ensemble de votre site web.

Maintenant, allez en haut de la page et basculez l'interrupteur de « Inactif » à « Actif ».

Ensuite, cliquez simplement sur le bouton « Enregistrer l'extrait » pour stocker vos paramètres.

Vous avez maintenant mis en surbrillance avec succès un élément de menu dans WordPress à l'aide d'un éditeur de site complet.

Voici à quoi ressemblera votre élément de menu après avoir ajouté le code CSS.

Comment accéder au personnalisateur de thème à l'aide d'un thème de bloc

Si vous souhaitez utiliser le personnalisateur de thème et un thème FSE, copiez et collez simplement l'URL ci-dessous dans votre navigateur. Assurez-vous de remplacer « example.com » par le nom de domaine de votre propre site :

https://example.com/wp-admin/customize.php

Cela ouvrira le personnalisateur de thème pour votre thème de bloc, où vous devrez développer l'onglet « CSS additionnel ».

À partir de là, copiez et collez l'extrait CSS dans la zone « CSS additionnel » :

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Après cela, cliquez simplement sur le bouton « Publier » en haut pour enregistrer vos paramètres.

Méthode 2 : Mettre en surbrillance un élément de menu à l'aide d'un personnaliseur de thème

Si vous utilisez un ancien thème WordPress, vous aurez probablement un personnalisateur de thème activé par défaut. La mise en surbrillance d'un élément de menu dans un personnalisateur de thème est un processus assez simple.

Tout d'abord, allez simplement dans Apparence » Personnaliser dans votre tableau de bord WordPress pour lancer le personnalisateur de thème. Une fois qu'il s'ouvre, cliquez simplement sur l'onglet « Menus » dans la barre latérale gauche.

À partir de là, cliquez sur l'icône d'engrenage en haut à droite pour afficher les propriétés avancées.

Maintenant, cochez la case « Classes CSS ».

Après cela, faites défiler jusqu'à la section « Menus ».

Si vous avez plusieurs menus WordPress, cliquez simplement sur le menu dont vous souhaitez mettre en surbrillance les éléments.

Cela ouvrira un nouvel onglet où vous pourrez sélectionner l'élément de menu que vous souhaitez mettre en surbrillance. Il peut s'agir de « Contactez-nous » comme dans notre exemple, ou de votre page de tarification ou du lien vers votre boutique en ligne.

Cliquez simplement sur l'élément de menu de votre choix pour développer certains paramètres. Ici, cliquez sur le champ « Classes CSS ».

Il vous suffit d'écrire 'highlighted-menu' dans le champ. Vous pouvez ajouter cette classe CSS à plusieurs éléments de menu, et ils seront tous mis en surbrillance.

Ensuite, allez simplement dans l'onglet « CSS additionnel » du personnaliseur de thème.

Après cela, copiez et collez le code CSS suivant :

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Félicitations ! Vous avez réussi à mettre en surbrillance un élément de menu.

Enfin, n'oubliez pas de cliquer sur le bouton « Publier » en haut pour enregistrer vos paramètres.

Personnalisation de la mise en surbrillance de votre élément de menu

Maintenant que vous avez mis en surbrillance l'élément de menu, vous pouvez ajuster le code CSS pour personnaliser votre élément de menu comme vous le souhaitez.

Par exemple, vous pouvez changer la couleur d'arrière-plan de votre élément de menu.

Recherchez simplement le code suivant dans l'extrait CSS que vous venez de coller :

background: #FFB6C1

Une fois que vous l'avez trouvé, vous pouvez simplement remplacer le code couleur rose par le code hexadécimal de la couleur de votre choix :

background: #7FFFD4;

Ci-dessus se trouve le code hexadécimal pour l'aquamarine.

Vous pouvez consulter notre guide pour ajouter facilement du CSS personnalisé pour d'autres idées sur la façon de personnaliser l'élément de menu mis en surbrillance.

Une fois que vous êtes satisfait de vos choix, cliquez simplement sur le bouton « Publier » dans le personnalisateur de thème ou sur « Enregistrer le snippet » dans WPCode pour enregistrer vos modifications.

Nous espérons que cet article vous a aidé à apprendre comment mettre en surbrillance une icône de menu dans WordPress. Vous voudrez peut-être aussi consulter notre guide pour débutants sur comment styliser les menus de navigation WordPress ou notre tutoriel sur comment ajouter des icônes d'image avec des menus de navigation dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.