Comment ajouter un bouton à votre en-tête WordPress (3 méthodes) 

Lorsque j'ai essayé pour la première fois d'ajouter un bouton dans mon en-tête WordPress, je voulais quelque chose qui se démarque, un appel à l'action clair là où les gens le verraient en premier.

Que vous liaisiez vers une page d'inscription, un cadeau gratuit ou un formulaire de réservation, un bouton dans votre menu WordPress peut guider les visiteurs exactement là où vous voulez qu'ils aillent. Lors de mes tests, ajouter un bouton à un en-tête WordPress avec SeedProd prend moins de 5 minutes et ne nécessite aucune modification de vos fichiers de thème.

Dans ce tutoriel, je vais vous montrer comment ajouter un bouton à votre en-tête WordPress de 3 manières différentes, étape par étape.

Pourquoi ajouter un bouton à votre menu d'en-tête WordPress ?

Les menus de navigation sur les sites Web WordPress sont généralement des liens textuels qui se ressemblent tous. En tant que tels, chaque élément de menu a la même importance, le même poids et la même urgence.

Si vous ajoutiez une URL vers un formulaire de commande important, ou une page d'inscription, cela ressemblerait aux autres liens de votre menu. Il ne se démarquerait pas et n'aurait pas l'air assez urgent pour que les utilisateurs cliquent en premier.

Cependant, transformer ce lien important en bouton dans WordPress le rendra instantanément plus visible. Un bouton dans votre en-tête WordPress améliorera l'expérience utilisateur et l'engagement de vos visiteurs avec votre site Web WordPress.

Bien qu'il existe des blocs de boutons pour les articles et les pages, WordPress n'offre actuellement pas de boutons de menu par défaut. Heureusement, il existe quelques façons d'ajouter des boutons à votre menu, et ils sont relativement faciles à mettre en œuvre.

Dans cet esprit, examinons 3 façons d'ajouter un bouton à votre menu d'en-tête WordPress.

SeedProd est la meilleure option si vous souhaitez un contrôle visuel et prévoyez de personnaliser la mise en page complète de votre en-tête. La méthode de classe CSS fonctionne avec n'importe quel thème classique et prend environ 3 minutes si vous êtes à l'aise avec le collage de CSS. L'éditeur de site complet de WordPress est intégré aux thèmes de blocs et ne nécessite aucun plugin supplémentaire.

Comment ajouter un bouton à un en-tête WordPress avec SeedProd ?

Avec SeedProd, vous pouvez ajouter un bouton d'appel à l'action stylisé à votre en-tête WordPress en environ 5 minutes en faisant glisser un bloc Bouton dans votre modèle d'en-tête, sans code requis.

Nous recommandons cette méthode en premier car elle offre le plus d'options de personnalisation et vous permet de créer votre menu d'en-tête WordPress visuellement avec glisser-déposer.

SeedProd est l'un des meilleurs constructeurs de pages de destination et de sites Web pour WordPress. Il vous permet de créer des thèmes WordPress flexibles et optimisés pour le référencement, des pages de destination et des sites Web complets sans avoir à engager un développeur ou à ajouter des shortcodes à votre site.

Le constructeur par glisser-déposer de SeedProd vous permet de créer un en-tête, un pied de page ou une barre latérale personnalisés, et d'y ajouter un bouton là où cela est pertinent.

Vous pouvez également ajouter des comptes à rebours, des formulaires d'inscription, des galeries et des curseurs avant/après à la même mise en page d'en-tête.

Suivez donc les étapes ci-dessous pour ajouter des boutons à votre en-tête WordPress avec SeedProd.

Étape 1. Installer et activer SeedProd

Tout d'abord, vous devrez obtenir une copie du plugin SeedProd et le télécharger sur votre ordinateur. Nous utiliserons SeedProd Pro pour ce tutoriel car il inclut la fonctionnalité Theme Builder.

Dans votre tableau de bord de compte, vous verrez un gros bouton de téléchargement pour enregistrer le fichier .zip du plugin. Il est également conseillé de copier votre clé de licence à ce stade car vous en aurez besoin sous peu.

Après avoir téléchargé le plugin, rendez-vous sur votre tableau de bord WordPress et téléchargez les fichiers du plugin. Vous pouvez toujours suivre ce guide sur l'installation et l'activation d'un plugin WordPress si vous avez besoin d'aide.

Une fois que vous avez fait cela, allez à la page SeedProd » Paramètres et collez votre clé de licence.

À partir de là, cliquez sur le bouton Vérifier la clé pour débloquer vos fonctionnalités Pro.

Étape 2. Choisir un modèle prédéfini

Avec votre clé de licence active, vous pouvez maintenant décider quelle mise en page vous souhaitez créer avec SeedProd. Il existe 2 approches différentes que vous pouvez adopter, comme suit :

• Thème WordPress : créez un thème WordPress personnalisé pour remplacer la conception actuelle de votre site Web par un modèle d'en-tête personnalisé. (aucun code requis).
• Page de destination : créez une page unique et ajoutez un en-tête personnalisé à cette page uniquement tout en conservant votre thème existant.

Pour ce guide, nous allons vous présenter l'option 1 car elle remplacera le menu de navigation sur l'ensemble de votre site Web. Mais si vous préférez l'option 2, vous pouvez suivre ce guide pour créer une page de destination dans WordPress, puis revenir à ce tutoriel à partir de l'étape 4.

Puisque nous choisissons l'option de thème WordPress, vous devrez aller dans SeedProd » Theme Builder et cliquer sur le bouton Thèmes.

Cela affichera une bibliothèque de kits de sites Web pré-faits que vous pouvez importer en un seul clic.

Vous pouvez filtrer les modèles par WooCommerce, popularité, du plus récent au plus ancien, et vice versa. Lorsque vous avez trouvé un thème qui vous plaît, cliquez sur l'icône en forme de coche pour le lancer.

Une fois votre thème importé, vous verrez automatiquement une page comme celle-ci :

Elle comprend une liste des modèles qui composent votre thème WordPress, et vous pouvez modifier chacun d'eux avec le constructeur visuel par glisser-déposer de SeedProd.

Étape 3. Personnalisez votre en-tête

Puisque vous souhaitez ajouter un bouton à votre en-tête, modifions le modèle En-tête. Faites défiler vers le bas jusqu’à ce que vous le trouviez dans la liste, puis cliquez sur le lien Modifier le design.

Lorsque vous ouvrirez le modèle d’en-tête, vous verrez une mise en page à 2 colonnes comme celle-ci :

Comme vous pouvez le voir, il y a divers blocs WordPress à gauche et un aperçu de votre design à droite. Vous pourrez cliquer n’importe où sur votre design pour modifier le contenu et faire glisser des blocs du panneau de gauche pour ajouter plus de fonctionnalités à votre page.

Lorsque vous regardez la mise en page actuelle de l’en-tête, vous verrez une colonne avec un bloc Image et une colonne avec le bloc Menu WordPress.

Pour ajouter un bouton à l’en-tête, vous devrez ajouter une 3e colonne, ce que nous allons vous montrer comment faire maintenant.

Tout d’abord, survolez votre section d’en-tête jusqu’à ce qu’elle ait un contour violet, puis cliquez sur l’icône Dupliquer la section.

Cela ajoutera une copie de votre en-tête sous le premier.

Ensuite, survolez la colonne de votre première section jusqu’à ce qu’elle ait un contour bleu, puis cliquez sur l’icône Corbeille pour la supprimer.

Vous aurez maintenant une section vide avec la possibilité de choisir une nouvelle disposition de colonnes. Allez-y et cliquez sur la mise en page à 3 colonnes.

Vous pouvez maintenant survoler l’icône Déplacer sur votre section dupliquée et déplacer les blocs d’image et de menu de navigation dans votre nouvelle section.

Cela vous laissera une colonne vide où vous pourrez ajouter un bloc Bouton.

Avant de passer à l’étape suivante, assurez-vous de supprimer l’ancienne section d’en-tête en cliquant sur l’icône Corbeille.

Vous êtes maintenant prêt à créer un bouton pour votre menu d’en-tête WordPress.

Étape 4. Ajoutez un bouton à votre en-tête

Ajouter un bouton à votre en-tête avec SeedProd est facile. Trouvez le bloc Bouton dans la barre latérale gauche et faites-le glisser dans la colonne vide de votre zone d’en-tête.

Une fois le bouton en place, vous pouvez cliquer dessus pour personnaliser le texte du lien du bouton, le sous-texte du bouton, le lien, l’alignement sur mobile et bureau, et la taille du bouton.

Vous pouvez même ajouter des icônes personnalisées avant et après le texte du bouton en choisissant dans la bibliothèque d’icônes Font Awesome.

Pour encore plus d’options de personnalisation, cliquez sur l’onglet des paramètres Avancé. C’est ici que vous pouvez modifier la couleur du texte et la typographie, changer la couleur d’arrière-plan, ajouter une ombre portée, le rayon de la bordure, l’espacement, les classes CSS personnalisées, et même masquer le bouton sur des appareils spécifiques.

De plus, l’option Animation est un moyen fantastique de faire ressortir davantage votre bouton.

Dans l’onglet Avancé, le commutateur Masquer sur mobile contrôle si le bouton apparaît dans votre navigation mobile. Par défaut, il s’affiche sur tous les appareils.

Lorsque vous êtes satisfait de l’apparence de votre bouton de menu, assurez-vous de cliquer sur le bouton Enregistrer.

Vous pouvez maintenant continuer à personnaliser le reste de votre thème WordPress. Par exemple, vous pouvez modifier votre page de blog, les modèles de pages uniques, et la barre latérale ou changer votre pied de page WordPress.

Étape 5. Publiez vos modifications

Après avoir personnalisé le reste de votre site Web, la dernière étape consiste à rendre ces modifications publiques. Pour ce faire, retournez d'abord à la page SeedProd » Theme Builder.

Ensuite, trouvez le bouton Activer le thème SeedProd dans le coin supérieur droit et mettez-le sur Oui.

Vous pouvez maintenant prévisualiser votre thème WordPress et voir votre bouton d'en-tête en action.

Comment ajouter un bouton d'en-tête WordPress à l'aide d'une classe CSS

La méthode de la classe CSS fonctionne avec n'importe quel thème WordPress classique et ne nécessite pas de plugin. J'ai utilisé cette approche lorsqu'un constructeur visuel complet n'était pas nécessaire.

Tout d'abord, allez dans Apparence » Menus dans votre tableau de bord WordPress. Sélectionnez le menu que vous souhaitez modifier dans le menu déroulant en haut de l'écran.

Ensuite, cliquez sur l'onglet Options de l'écran dans le coin supérieur droit de l'écran. Cochez la case à côté de Classes CSS. Cela ajoute un nouveau champ à chaque élément de menu.

Développez maintenant l'élément de menu que vous souhaitez styliser comme un bouton. Tapez un nom de classe dans le champ Classes CSS. J'utilise header-button, mais n'importe quel nom fonctionne tant qu'il n'y a pas d'espaces. Cliquez sur Enregistrer le menu lorsque vous avez terminé.

Vous devez maintenant ajouter du CSS qui transforme cette classe en bouton. La façon la plus simple est via WPCode, qui vous permet d'ajouter des extraits de code sans modifier directement les fichiers de votre thème. Allez dans Extraits de code » Ajouter un extrait, choisissez CSS comme type d'extrait, et collez ceci :

li.header-button > a {
    display: inline-block !important;
    background-color: #0073aa !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    line-height: normal !important;
}
li.header-button > a:hover {
    background-color: #005177 !important;
    color: #ffffff !important;
}

Enregistrez et activez l'extrait. Votre élément de menu s'affichera maintenant comme un bouton stylisé dans l'en-tête de votre WordPress.

Changez background-color pour correspondre aux couleurs de votre marque. Ajustez les valeurs de padding pour contrôler la taille du bouton. Si vous préférez ne pas installer WPCode, le même CSS fonctionne dans Apparence » Personnaliser » CSS additionnel.

Gardez à l'esprit que cette approche ne fonctionne qu'avec les thèmes WordPress classiques qui utilisent Apparence » Menus. Si votre site utilise un thème de blocs avec l'Éditeur de site complet, utilisez la méthode de la section suivante.

Comment ajouter un bouton d'en-tête WordPress sans plugin ?

Si votre thème WordPress utilise l'Éditeur de site complet, vous pouvez ajouter un bouton d'en-tête sans aucun plugin. Cette méthode ne fonctionne qu'avec les thèmes de blocs.

Tout d'abord, allez dans Apparence » Éditeur depuis votre tableau de bord WordPress. Cela ouvrira l'Éditeur de site complet de WordPress, qui utilise des blocs pour construire votre site Web.

Ensuite, ouvrez la barre latérale, cliquez sur l'en-tête Parties de modèle, et sélectionnez l'option En-tête sur le côté droit.

Une fois que vous avez fait cela, vous verrez une disposition visuelle de l'en-tête de votre WordPress. Dans l'éditeur, cliquez sur l'en-tête Navigation.

Vous verrez les paramètres de disposition de la navigation dans la barre latérale droite, mais d'abord, cliquez sur l'icône (+) pour commencer à ajouter vos éléments de menu.

Vous pouvez cliquer et rechercher n'importe quelle page pour l'ajouter à votre menu dans WordPress.

Avec vos liens de menu en place, cliquez à nouveau sur l'icône (+) pour ajouter un nouveau bloc WordPress. Cette fois, recherchez le bloc Bouton et ajoutez-le à votre en-tête.

Entrez maintenant le texte du bouton et cliquez sur l'icône de lien pour ajouter le lien sur lequel vous souhaitez que les visiteurs cliquent. Dans notre cas, nous ajouterons un lien vers notre rapport gratuit.

Dans les options de l'écran de bloc à droite, vous pouvez personnaliser le bouton de votre menu d'en-tête en modifiant les paramètres suivants :

• Style de bouton rempli ou contour
• Pourcentage de largeur
• Couleur du texte et de l'arrière-plan
• Taille de la typographie
• Marge intérieure
• Rayon de bordure
• CSS et nom de classe supplémentaires
• Et plus encore.

Le bouton apparaîtra dans votre en-tête sur ordinateur et mobile. Dans le bloc de navigation, vous pouvez également contrôler son affichage lorsque le menu se réduit sur les petits écrans.

Une fois que vous avez terminé la personnalisation de votre bouton, cliquez sur le bouton de menu Enregistrer dans le coin supérieur droit.

Désormais, toute page utilisant la partie de modèle d'en-tête affichera votre bouton de menu et vos liens de navigation.

Si vous utilisez un thème qui n'inclut pas les fonctionnalités de l'éditeur de site, vous pouvez suivre ce guide sur l'ajout d'un bouton à votre menu à l'aide de l'ancien personnaliseur de menu.

Personnellement, j'ai trouvé que le constructeur glisser-déposer de SeedProd était le moyen le plus simple d'y parvenir, surtout si vous souhaitez plus de contrôle sans toucher au code.

Questions fréquemment posées

Comment ajouter un bouton à l'en-tête dans WordPress ?

Vous avez trois options : utiliser SeedProd pour faire glisser visuellement un bloc Bouton dans votre modèle d'en-tête, utiliser l'éditeur complet du site WordPress pour ajouter un bloc Bouton dans votre bloc de navigation si vous avez un thème de blocs, ou attribuer une classe CSS à un élément de menu et le styliser comme un bouton avec une courte règle CSS. SeedProd est l'option la plus rapide si vous souhaitez un contrôle du style sans écrire de code.

Comment faire en sorte que mon bouton d'en-tête s'affiche sur mobile ?

Dans SeedProd, ouvrez les paramètres du bloc Bouton et accédez à l'onglet Avancé. Le commutateur Masquer sur mobile est désactivé par défaut, ce qui signifie que votre bouton s'affiche sur tous les appareils. Dans l'éditeur complet du site WordPress, le bouton hérite du comportement réactif du bloc de navigation, il se réduit donc avec votre menu sur mobile, sauf si vous le configurez séparément.

Puis-je ajouter plusieurs boutons à mon en-tête WordPress ?

Oui. Avec SeedProd, vous pouvez faire glisser plusieurs blocs Bouton dans votre modèle d'en-tête et styliser chacun différemment. Dans l'éditeur complet du site, vous pouvez ajouter plus d'un bloc Bouton dans le bloc de navigation. Pour la méthode de classe CSS, attribuez des noms de classe différents à différents éléments de menu et stylisez chaque classe séparément.

L'ajout d'un bouton d'en-tête fonctionne-t-il avec n'importe quel thème WordPress ?

Cela dépend de la méthode. SeedProd remplace entièrement l'en-tête de votre thème, il fonctionne donc indépendamment de votre thème actuel. La méthode de classe CSS fonctionne avec les thèmes classiques qui utilisent Apparence » Menus. La méthode de l'éditeur complet du site nécessite un thème de blocs. Si vous n'êtes pas sûr du type de thème que vous avez, allez dans Apparence dans votre tableau de bord WordPress. Si vous voyez une option Éditeur, vous avez un thème de blocs.

J'espère que ce tutoriel sur la façon d'ajouter un bouton dans les menus d'en-tête WordPress vous a été utile. Vous pourriez également aimer les tutoriels suivants pour personnaliser votre site Web WordPress :

• Comment ajouter les heures d'ouverture à WordPress
• Comment créer facilement une lightbox d'image dans WordPress
• Comment estomper une image d'arrière-plan dans WordPress sans CSS

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.