Ajout d'un bouton dans le menu de navigation de l'en-tête

Publié: 2021-06-22

Le menu de navigation de l'en-tête est WordPress est un élément souvent inutilisé de l'immobilier du site Web. Alors que la plupart des gestionnaires de sites Web l'utilisent uniquement pour la navigation, vous pouvez également ajouter une barre de recherche ou même du contenu promotionnel. Mais, pour le faire efficacement, vous devriez envisager d'ajouter un bouton dans le menu de navigation de l'en-tête . Dans cet article, nous expliquerons pourquoi cela est bénéfique et comment le faire correctement.

L'avantage d'ajouter un bouton dans le menu de navigation de l'en-tête

Avoir un bouton dans le menu de navigation de l'en-tête peut sembler une chose triviale. Après tout, il ne semble pas y avoir beaucoup de différence entre un lien hypertexte standard et un bouton. Eh bien, en réalité, avoir un bouton au lieu de texte brut peut donner des résultats surprenants . Cela est principalement dû au fonctionnement de l'attention humaine et à la notoriété de vos boutons.

Comment les gens vivent généralement le menu de navigation d'en-tête

Le menu de navigation d'en-tête est généralement la deuxième chose que les gens remarquent. Si vous avez bien conçu votre site Web et ajouté le menu de navigation correctement, le titre de votre message devrait être la première chose qui attire l'attention du spectateur. Mais, après cela, leur regard devrait naturellement se diriger vers le menu de navigation afin de voir ce qui est disponible. S'ils décident de rester sur la page actuelle, qu'il en soit ainsi. Mais, s'il y a d'autres points d'intérêt sur votre site Web, ils doivent être clairement visibles dans le menu de navigation de l'en-tête.

Une fille naviguant sur un site Web avec son grand-père.
Vous devriez toujours essayer de rendre votre site Web intuitif et facile à naviguer.

Après tout, votre objectif devrait être de garder les gens aussi longtemps que possible sur votre site Web . Et avoir un menu facile à comprendre peut être d'une grande aide. Alors, d'où viennent les boutons dans tout cela ?

L'avantage d'ajouter un bouton

L'idée principale de l'ajout d'un bouton est de souligner quelque chose d'important. Bien que le menu d'en-tête contienne des liens intéressants, ils n'ont pas tous la même importance. Certains sont de simples outils de navigation pour aider à la lecture. Et d'autres sont des contenus promotionnels plus directs, qui servent à guider vos lecteurs vers la conversion. Eh bien, en ce qui concerne ce dernier contenu, les boutons devraient être votre choix préféré . Comme vous pouvez les modifier comme bon vous semble, ils se démarqueront naturellement et attireront l'attention. Ainsi, si vous comprenez le parcours de vos clients sur votre site Web, vous pouvez facilement utiliser des boutons pour les attirer vers les médias sociaux ou pour une conversion réussie.

Divers boutons de médias sociaux, montrant ce que vous devez garder à l'esprit lors de l'ajout d'un bouton dans le menu de navigation de l'en-tête.
Il n'est pas rare que les gens utilisent des boutons pour intégrer leur site Web aux médias sociaux.

Conseils de personnalisation

Personnaliser vos boutons pour avoir le bon effet peut être un peu délicat. D'une part, vous ne voulez pas qu'ils ressortent trop car ils gâcheraient l'apparence de la page Web. Mais, vous ne voulez pas non plus qu'ils se fondent trop car ils n'attireront pas l'attention. Donc, ce que vous devez trouver, c'est le juste milieu, ce qui est plus facile à dire qu'à faire. Notre conseil est de rechercher des sites Web qui utilisent avec succès les boutons dans leur menu de navigation d'en-tête et de voir comment ils utilisent les couleurs. N'oubliez pas que vous pouvez modifier la forme, le contour, la police et la couleur de votre bouton. Alors, utilisez cette variété de personnalisation à votre avantage. Idéalement, vous trouverez le style qui va bien avec l'esthétique globale de votre site web . Tout en attirant l'attention.

Comment ajouter un bouton dans le menu de navigation de l'en-tête

Heureusement, l'ajout d'un bouton dans le menu de navigation de l'en-tête de WordPress est étonnamment simple. Tout d'abord, vous devez vous diriger vers le menu de navigation et ajouter le lien que vous souhaitez convertir en bouton. Vous pouvez le faire sur la page Apparence -> Menu . Une fois que vous avez fait cela, cliquez sur le bouton Options d'écran en haut. Ce faisant, vous obtiendrez un menu déroulant avec quelques options. Dans ce cas, il vous suffit de cocher l'option 'CSS Classes' .

Une fois que vous avez parcouru cela, faites défiler vers le bas et cliquez sur l'élément de menu que vous souhaitez convertir en bouton. Là, vous obtiendrez une nouvelle option de classe CSS dans les paramètres de l'élément. Dans celui-ci, vous pouvez entrer le nom de la classe. Théoriquement, vous pouvez nommer votre classe comme bon vous semble. Mais, pour cet article, nous donnerons le nom de classe « menu-bouton » pour une meilleure compréhension. Une fois que vous avez entré votre nom, n'oubliez pas de cliquer sur le bouton "Enregistrer le menu" .

Ajout de code CSS

Après avoir ajouté notre classe CSS personnalisée, nous pouvons procéder à l'ajout du code CSS. Ici, vous devez aller dans Apparence -> Personnaliser et lancer le personnalisateur de thème WordPress. Ce faisant, vous obtiendrez un aperçu de votre site Web et une liste des paramètres de thème. Ce que vous devez faire est de cliquer sur l'onglet CSS supplémentaire et de le développer. Ici, vous obtiendrez une boîte où vous pourrez ajouter votre code CSS personnalisé. Pour commencer, nous vous suggérons de simplement coller le code suivant :

.bouton de menu {
couleur de fond :#eb5e28 ;
bordure : 1px ;
rayon de bordure : 3 px ;
-webkit-box-shadow : 1px 1px 0px 0px #2f2f2f ;
-moz-box-shadow : 1px 1px 0px 0px #2f2f2f ;
boîte-ombre:1px 1px 0px 0px #2f2f2f;
}
.menu-bouton a, .menu-bouton a:survol, .menu-bouton a:actif {
couleur:#fff !important;
}

Une fois que vous avez ajouté le code CSS, le personnalisateur de thème l'appliquera à l'aperçu de votre site Web. Cela vous permettra de voir les modifications que vous avez apportées. Et ne vous inquiétez pas, les changements ne sont pas permanents. Si vous en ressentez le besoin, allez-y et expérimentez CSS et voyez ce que vous pouvez faire. Pour enregistrer vos modifications, cliquez sur le bouton Publier.

Un ordinateur portable avec programmation CSS dessus.
Essayez d'apprendre un peu de CSS avant d'ajouter au menu de navigation de l'en-tête. Cela vous fera un monde de bien.

Et avec cela, vous avez terminé d'ajouter un bouton dans le menu de navigation de l'en-tête.

Dernières pensées

Tout bien considéré, les boutons peuvent être un excellent complément à votre menu d'en-tête. Mais, il est primordial que vous trouviez le bon design . En fait, l'une des principales raisons pour lesquelles les gens évitent d'ajouter un bouton est qu'ils ne peuvent tout simplement pas adapter le bouton à la conception du site Web. Si vous êtes bloqué, nous vous suggérons fortement de consulter un graphiste professionnel et de valoriser ses commentaires. Comme vous pouvez le voir, il ne faut vraiment pas grand-chose pour ajouter un bouton, une fois que vous avez compris le design.