Après avoir créé un menu et ajouté des liens, vous souhaiterez peut-être en personnaliser l’apparence. Ce guide présente les modifications de design les plus courantes que vous pouvez apporter à votre menu.
Les thèmes à blocs vous permettent de personnaliser entièrement le design du menu via l’éditeur, accessible sous Apparence dans votre Tableau de bord. Les thèmes classiques proposent des options de design de menu plus limitées, intégrées à l’Outil de personnalisation, également sous Apparence dans votre Tableau de bord.
Pour savoir quelle section de ce guide suivre, rendez-vous sur votre Tableau de bord WordPress.com et vérifiez ce qui apparaît sous Apparence dans le menu de gauche. Si vous voyez éditeur, suivez la section Éditeur de site de ce guide. Sinon, suivez les instructions relatives à l’Outil de personnalisation.
Si votre thème utilise l’éditeur de site (c’est-à-dire que les options Apparence → Éditeur apparaissent dans votre Tableau de bord), vous pouvez contrôler le design du menu à l’aide des réglages du bloc Navigation en suivant ces étapes :
- Depuis le Tableau de bord de votre site, accédez à Apparence → Éditeur.
- Sélectionnez Modèles et choisissez un modèle contenant votre menu, comme Accueil ou Accueil.
- Ouvrez la Vue en liste dans le coin supérieur gauche de votre écran (il s’agit de l’icône qui ressemble à trois lignes horizontales superposées).
- Sélectionnez le bloc Navigation dans la vue en liste.
- Si vous ne voyez pas de bloc Navigation, vous pouvez en créer un.
- Affichez les réglages du bloc Navigation sur le côté droit de l’écran.
- Personnalisez les styles du bloc Navigation via l’icône des réglages ou l’icône des styles.
- Cliquez sur le bouton Enregistrer pour enregistrer vos modifications.
Découvrez en détail chaque réglage dans notre guide des réglages du bloc Navigation, notamment :
- Les styles du bloc Navigation, comme la couleur, la typographie et les dimensions.
- Les réglages de mise en page du bloc Navigation, comme la justification, l’orientation et l’affichage du menu.
Cette vidéo montre comment accéder au bloc Navigation et en modifier les réglages et le style. Cette fonctionnalité est disponible dans nos thèmes à blocs, entièrement personnalisables. Vous pouvez ralentir ou accélérer la vidéo à l’aide des commandes situées dans le coin inférieur droit, après avoir cliqué sur le bouton Lecture.
Cette section concerne les sites créés avec le créateur de site par IA (tous les forfaits payants) ou les sites sur lesquels l’Agent WordPress a été activé (tous les forfaits payants). Ouvrez l’Agent WordPress en cliquant sur l’icône IA (une étoile à quatre branches) en bas de l’écran.
L’Agent WordPress peut modifier directement l’apparence de votre menu ainsi que son fonctionnement. Voici quelques exemples de demandes que vous pouvez lui adresser :
- « Changez la couleur de mon menu de navigation pour qu’elle corresponde à mon image de marque. »
- « Configurez mes menus déroulants pour qu’ils s’ouvrent au clic plutôt qu’au survol. »
- « Affichez mon menu sous forme de menu hamburger sur toutes les tailles d’écran. »
- « Ajoutez une classe CSS appelée ‘featured-link’ à l’élément de menu Contact. »
Vous pouvez modifier l’emplacement du menu dans tous les thèmes à blocs. Ces thèmes utilisent l’éditeur sous Apparence pour vous offrir un contrôle total sur la mise en page, y compris l’emplacement du menu de votre site.
Bien que l’emplacement du menu soit entièrement personnalisable dans un thème à blocs, vous pouvez commencer par rechercher un thème qui affiche le menu à un endroit qui vous plaît. En savoir plus sur le changement de thème.
Si vous avez déjà choisi un thème à blocs et souhaitez modifier l’emplacement du menu, plusieurs options s’offrent à vous :
- Découvrez comment sélectionner et déplacer le bloc Navigation, ou passez directement au didacticiel vidéo.
- Ajoutez un nouveau menu à votre modèle.
- Ajoutez un menu de navigation à une page ou à un article en utilisant le bloc Liste de pages.
- Ajoutez une navigation au sein d’une page ou d’un article à l’aide du bloc Table des matières.
Si vous utilisez un thème qui ne propose pas l’éditeur sous Apparence dans votre Tableau de bord, découvrez nos thèmes à blocs, entièrement personnalisables.
Sur un écran d’ordinateur, un menu apparaît généralement sous la forme d’une liste de liens textuels sur une seule ligne. Sur les écrans plus petits (tablettes et appareils mobiles), il n’y a généralement pas assez d’espace pour afficher tous les liens de manière à ce que les visiteurs puissent facilement appuyer dessus.
C’est pourquoi il est courant de masquer les éléments de menu derrière un bouton appelé menu « superposition » ou « hamburger » (nommé ainsi parce que les trois lignes horizontales ressemblent à un hamburger).
Dans les réglages du bloc Navigation de l’éditeur de site, vous pouvez ajuster l’affichage du menu en superposition. Suivez les étapes ci-dessous pour personnaliser l’affichage du menu en superposition :
- Depuis le Tableau de bord de votre site, accédez à Apparence → éditeur.
- Sélectionnez Modèles et choisissez un modèle contenant votre menu, comme Accueil ou Accueil.
- Ouvrez la Vue en liste dans le coin supérieur gauche de votre écran (il s’agit de l’icône qui ressemble à trois lignes horizontales superposées).
- Sélectionnez le bloc Navigation dans la Vue en liste.
- Affichez les réglages du bloc Navigation sur le côté droit de l’écran.
- Cliquez sur l’icône Réglages (l’icône en forme d’engrenage).
- Sous Affichage, choisissez vos réglages de menu en superposition :
- Mobile : le réglage par défaut. Le menu en superposition n’apparaît que sur les écrans de taille mobile.
- Désactivé : ne pas afficher de menu en superposition du tout.
- Toujours : afficher le menu en superposition en permanence, quelle que soit la taille de l’écran.
- Grâce au modèle de superposition, vous pouvez personnaliser le design de la superposition plein écran qui apparaît sur mobile. Consultez notre guide sur la personnalisation de la superposition de navigation.
- Cliquez sur le bouton « Enregistrer » pour enregistrer vos modifications.
Les internautes ont l’habitude de voir une icône de menu hamburger sur les appareils mobiles. Afficher le menu « bureau », c’est-à-dire désactiver le menu en superposition, peut compliquer la navigation sur votre site Web depuis un appareil mobile.
Consultez le guide du bloc Navigation pour découvrir toutes les fonctionnalités du bloc.
Les thèmes classiques et les thèmes tiers peuvent appliquer leurs propres réglages par défaut pour l’affichage du menu sur les appareils mobiles. Consultez la documentation du thème que vous avez choisi pour en savoir plus.
Vous pouvez choisir si un menu déroulant s’ouvre au survol, au clic, ou reste visible en permanence.
Pour définir la visibilité des sous-menus, suivez ces étapes :
- Depuis le Tableau de bord de votre site, accédez à Apparence → éditeur.
- Sélectionnez Modèles et choisissez un modèle contenant votre menu, comme Accueil ou Accueil.
- Ouvrez la Vue en liste dans le coin supérieur gauche de votre écran.
- Sélectionnez votre bloc Navigation.
- Dans la colonne latérale des réglages du bloc, cliquez sur l’icône Réglages (l’icône en forme d’engrenage).
- Sous Affichage, recherchez le réglage « Visibilité du sous-menu » et choisissez l’une des options suivantes :
- Survol : le menu déroulant s’ouvre lorsqu’un visiteur survole l’élément de menu parent. Vous pouvez aussi désactiver ce réglage pour afficher une flèche à côté du menu.
- Clic : le menu déroulant s’ouvre lorsqu’un visiteur clique sur l’élément de menu parent.
- Cliquez sur le bouton Enregistrer pour enregistrer vos modifications.
Cette section du guide s’applique aux sites disposant de nos plans WordPress.com Personnel, Premium, Business et Commerce. Pour les sites gratuits, mettez votre plan à niveau pour accéder à cette fonctionnalité.
Les classes CSS sont un réglage avancé du menu qui vous permet d’attribuer une classe CSS à des éléments de menu précis.
Pour déterminer quelle section de ce guide suivre, rendez-vous sur votre Tableau de bord WordPress.com et vérifiez sous Apparence dans le menu de gauche. Si vous voyez éditeur, suivez la section Thèmes à blocs de ce guide. Sinon, suivez les instructions pour les thèmes classiques.
Pour ajouter une classe CSS dans l’éditeur de site, suivez ces étapes :
- Depuis le Tableau de bord de votre site, accédez à Apparence → éditeur.
- Sélectionnez Modèles et choisissez un modèle contenant votre menu, comme Accueil ou Accueil.
- Ouvrez la Vue en liste dans le coin supérieur gauche de votre écran (il s’agit de l’icône qui ressemble à trois lignes horizontales superposées).
- Sélectionnez le bloc Navigation dans la Vue en liste.
- Si vous ne voyez pas de bloc Navigation, vous pouvez en créer un.
- Affichez les réglages du bloc Navigation sur le côté droit de l’écran.
- Cliquez sur l’icône Réglages en forme d’engrenage ⚙️ et ouvrez la section intitulée « Avancé ».
- Ajoutez votre classe CSS.
Vous pouvez également définir une classe CSS pour des liens individuels dans le bloc Navigation. Sélectionnez le lien souhaité avant d’accéder à la section Avancé.
Consultez notre guide sur le bloc Navigation pour découvrir toutes les fonctionnalités du bloc.
En savoir plus sur l’ajout de CSS personnalisé.
Assistance WordPress.com 