Lorsque j'ai essayé pour la première fois d'ajouter un bouton dans l'en-tête de mon site WordPress, je voulais quelque chose qui se démarque, un appel à l'action clair, là où les gens le verraient en premier.
Qu'il s'agisse d'un lien vers une page d'inscription, un cadeau ou un formulaire de réservation, un bouton dans votre menu WordPress peut guider les visiteurs exactement là où vous voulez qu'ils aillent. C'est l'un des moyens les plus simples d'augmenter le nombre de clics sans modifier l'ensemble de votre design.
Dans ce tutoriel, je vous montrerai comment ajouter un bouton dans les menus d'en-tête de WordPress, étape par étape.
Résumé : Pour ajouter un bouton dans votre en-tête WordPress, vous pouvez utiliser un constructeur visuel comme SeedProd pour faire glisser un bloc Bouton directement dans votre disposition de navigation. Pour les thèmes à blocs, vous pouvez également utiliser l'éditeur de site complet pour placer un bouton à côté de votre menu, sans plugin supplémentaire.
Pourquoi ajouter un bouton à votre menu d'en-tête WordPress ?
Les menus de navigation sur les sites WordPress sont généralement des liens textuels qui se ressemblent tous. Chaque élément du menu a donc la même importance, le même poids et la même urgence.
Si vous deviez ajouter une URL à un formulaire de commande important ou à une page d'inscription, elle ressemblerait aux autres liens de votre menu. Il ne se démarquerait pas et ne serait pas assez urgent pour que les utilisateurs cliquent en premier.
Cependant, transformer ce lien important en bouton dans WordPress le rendra instantanément plus visible. En plus de pouvoir le trouver plus facilement, un bouton dans l'en-tête de votre site WordPress améliorera l'expérience utilisateur et l'engagement des visiteurs sur votre site WordPress.
Malgré la présence de blocs de boutons pour les articles et les pages, WordPress ne propose pas de boutons de menu par défaut. Heureusement, il existe quelques moyens d'ajouter des boutons à votre menu, et ils sont relativement faciles à mettre en œuvre.
Dans cette optique, nous allons voir 2 façons d'ajouter un bouton dans les menus d'en-tête de WordPress sans écrire de code HTML ou CSS.
Comment ajouter un bouton dans le menu d'en-tête de WordPress avec SeedProd
Tout d'abord, nous allons vous montrer comment ajouter un bouton à votre menu d'en-tête à l'aide d'un puissant plugin WordPress appelé SeedProd. Nous recommandons d'abord cette méthode car elle offre le plus d'options de personnalisation et vous permet de construire visuellement votre menu d'en-tête WordPrress par glisser-déposer.
SeedProd est l'un des meilleurs constructeurs de pages d'atterrissage et de sites web pour WordPress. Il vous permet de créer des thèmes WordPress, des pages d'atterrissage et des sites web complets, flexibles et adaptés au référencement, sans avoir à engager un développeur ou à ajouter des shortcodes à votre site.
Le constructeur de pages 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'insérer un bouton à l'endroit voulu.
En outre, il existe d'innombrables autres blocs WordPress que vous pouvez utiliser, notamment des widgets WordPress, des comptes à rebours, des formulaires d'optin, des galeries, des curseurs avant et après, et bien d'autres encore.
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 devez 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 fonction Theme Builder.
Dans le tableau de bord de votre compte, vous verrez un grand bouton de téléchargement pour enregistrer le fichier .zip du plugin. C'est également une bonne idée de copier votre clé de licence à ce stade, car vous en aurez besoin prochainement.
Après avoir téléchargé le plugin, rendez-vous dans 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 sur la page " Paramètres " de SeedProd et collez votre clé de licence.
Cliquez ensuite sur le bouton Vérifier la clé pour déverrouiller vos fonctions Pro.
Étape 2. Choisir un modèle préfabriqué
Avec votre clé de licence active, vous pouvez maintenant décider de la mise en page que vous souhaitez faire avec SeedProd. Il y a 2 approches différentes que vous pouvez adopter, qui sont les suivantes :
- Thème WordPress : créez un thème WordPress personnalisé pour remplacer le design actuel de votre site web par un modèle d'en-tête personnalisé.(aucun code requis).
- Landing Page: créez une seule page et ajoutez un en-tête personnalisé à cette page 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 d'atterrissage dans WordPress, puis revenir à ce tutoriel à partir de l'étape 4.
Puisque nous choisissons l'option du thème WordPress, vous devrez aller sur SeedProd " Theme Builder et cliquer sur le bouton Themes.
Vous accéderez ainsi à une bibliothèque de kits de sites web préfabriqués que vous pourrez importer d'un simple clic.
Vous pouvez filtrer les modèles par WooCommerce, par 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 de la coche pour le lancer.
Une fois l'importation de votre thème terminée, vous verrez automatiquement une page comme celle-ci :
Il comprend une liste des modèles qui composent votre thème WordPress, et vous pouvez modifier chacun d'entre eux à l'aide du constructeur visuel de SeedProd, basé sur le principe du glisser-déposer.
Étape 3. Personnalisez votre en-tête
Puisque vous souhaitez ajouter un bouton à votre en-tête, modifions le modèle d'en-tête. Faites défiler la liste jusqu'à ce que vous le trouviez, puis cliquez sur le lien Modifier le modèle.
Lorsque vous ouvrez le modèle d'en-tête, vous voyez une disposition en deux colonnes comme celle-ci :
Comme vous pouvez le voir, il y a plusieurs blocs WordPress sur la gauche et un aperçu de votre design sur la droite. Vous pourrez cliquer n'importe où sur votre design pour en modifier le contenu et faire glisser des blocs depuis le panneau de gauche pour ajouter d'autres fonctionnalités à votre page.
Si vous regardez la disposition 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 devez ajouter une troisième colonne, ce que nous allons faire maintenant.
Tout d'abord, survolez votre section d'en-tête jusqu'à ce qu'elle soit entourée d'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 dans votre première section jusqu'à ce qu'elle ait un contour bleu, puis cliquez sur l'icône de la corbeille pour la supprimer.
Vous aurez maintenant une section vide avec l'option de choisir une nouvelle disposition de colonnes. Allez-y et cliquez sur la disposition en 3 colonnes.
Vous pouvez maintenant survoler l'icône Déplacer sur votre section dupliquée et déplacer les blocs d'images et d'éléments de menu nav dans votre nouvelle section.
Il reste alors une colonne vide dans laquelle vous pouvez ajouter un bloc de boutons.
Avant de passer à l'étape suivante, veillez à supprimer l'ancienne section d'en-tête en cliquant sur l'icône de la 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. Il suffit de trouver le bloc Bouton dans la barre latérale gauche et de le faire 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 les mobiles et les ordinateurs de 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 plus d'options de personnalisation, cliquez sur l'onglet Paramètres avancés . C'est là que vous pouvez modifier la couleur et la typographie du texte, changer la couleur d'arrière-plan, ajouter une ombre, un rayon de bordure, un espacement, des classes CSS personnalisées et même masquer le bouton sur certains appareils.
De plus, l'option Animation est un moyen fantastique de faire ressortir davantage votre bouton.
Lorsque vous êtes satisfait de l'aspect de votre bouton de menu, n'oubliez pas 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 page unique, la barre latérale ou le pied de page de WordPress.
Étape 5. Publier vos modifications
Après avoir personnalisé le reste de votre site web, la dernière étape consiste à rendre ces changements actifs. Pour ce faire, retournez d'abord à la page SeedProd " Theme Builder.
Ensuite, trouvez le bouton Enable SeedProd Theme (Activer le thème SeedProd) dans le coin supérieur droit et mettez-le en position Yes (Oui).
Super ! Vous pouvez maintenant prévisualiser votre thème WordPress et voir votre bouton d'en-tête en action.
Ajouter un bouton au menu d'en-tête de WordPress sans plugin
Certaines personnes n'ont pas besoin de toute la flexibilité et des options de personnalisation d'un constructeur de pages, tandis que d'autres préfèrent limiter l'ajout de plugins WordPress à leur site web. Si vous appartenez à l'une ou l'autre de ces catégories, la méthode suivante est faite pour vous.
Nous allons vous montrer comment utiliser l'éditeur par défaut de WordPress pour ajouter un bouton à votre menu d'en-tête sans avoir recours à un plugin.
Tout d'abord, allez dans Apparence " Éditeur dans 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 Template Parts et sélectionnez l'option Header sur le côté droit.
Une fois que vous avez fait cela, vous verrez une présentation visuelle de votre en-tête WordPress. Dans l'éditeur, cliquez sur l'en-tête Navigation.
Vous verrez les paramètres de mise en page de la navigation dans la barre latérale droite, mais d'abord, cliquez sur l'icône (+) plus pour commencer à ajouter vos éléments de menu.
Vous pouvez cliquer et rechercher n'importe quelle page pour l'ajouter à votre menu dans WordPress.
Une fois les liens de votre 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.
Saisissez 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 votre bouton de menu d'en-tête en modifiant les paramètres suivants :
- Style de remplissage ou de contour du bouton
- Pourcentage de largeur
- Couleur du texte et de l'arrière-plan
- Taille de la typographie
- Rembourrage
- Rayon de la bordure
- CSS supplémentaire et nom de la classe
- Et plus encore.
Lorsque vous avez terminé de personnaliser votre bouton, cliquez sur le bouton de menu Enregistrer dans le coin supérieur droit.
Désormais, toutes les pages qui utilisent la partie du modèle "Header" afficheront votre bouton de menu et vos liens de navigation.
Si vous utilisez un thème qui n'inclut pas de fonctionnalité pour l'éditeur de site, vous pouvez suivre ce guide pour ajouter un bouton à votre menu à l'aide de l'ancien personnalisateur de menu.
Personnellement, j'ai trouvé que le constructeur par glisser-déposer de SeedProd était le moyen le plus simple de le faire, surtout si vous voulez plus de contrôle sans toucher au code.
Questions fréquemment posées
Puis-je ajouter un bouton à mon menu WordPress sans code ?
Oui ! Vous pouvez utiliser l'éditeur de site complet (FSE) ou un constructeur visuel comme SeedProd pour ajouter un bloc de boutons directement à votre en-tête - aucun code n'est nécessaire.
Comment mettre en évidence un lien dans ma navigation WordPress ?
La meilleure façon est de le transformer en un bouton stylisé en utilisant SeedProd ou le bloc de boutons WordPress. Cela permet d'attirer l'attention et d'améliorer l'expérience utilisateur de votre site.
J'espère que ce tutoriel sur l'ajout d'un bouton dans les menus d'en-tête de WordPress vous a été utile. Vous aimerez peut-être aussi les tutoriels suivants pour personnaliser votre site web WordPress :
- Comment ajouter des heures d'ouverture à WordPress
- Comment créer facilement une boîte à lumière dans WordPress
- Comment atténuer une image de fond dans WordPress sans CSS
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.
Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.
