Si vous souhaitez concevoir un menu agréable pour votre site web, vous avez le choix entre plusieurs méthodes. L'une d'entre elles consiste à utiliser l'éditeur de menu par défaut de WordPress, qui est simple et pratique. Une autre consiste à utiliser le widget de menu de navigation d'Elementor, qui peutHautement personnalisablevotre menu pour qu'il réponde mieux à vos besoins.

Créer un menu de navigation dans WordPress

La création d'un menu de navigation dans WordPress est facile. Tout d'abord, connectez-vous à votre tableau de bord WordPress et cliquez sur la barre latérale "Apparence > Menu". Recherchez et cliquez surcréer un nouveau menuSur la page, vous verrez un champ de saisie pour le nom du nouveau menu que vous souhaitez. Une fois le nom saisi, cliquez sur le bouton bleu "Créer un menu" pour commencer à ajouter les éléments de votre menu.

2. ajouter et personnaliser les menus de navigation

Sur le c?té de la page, vous devriez voir des menus déroulants contenant des pages, des articles, des liens personnalisés et des catégories à choisir.

L'ajout de pages au menu de navigation de WordPress est assez simple. Tout d'abord, cliquez sur l'onglet "Tout afficher" de la page "Menu" pour parcourir toutes les pages disponibles. Si vous avez beaucoup de pages, vous pouvez utiliser la fonction "Recherche" pour trouver rapidement la page dont vous avez besoin. Cochez les cases situées à c?té des pages que vous souhaitez ajouter et cliquez sur "Ajouter au menu".

Après avoir ajouté plusieurs pages au menu, vous pouvez personnaliser davantage chaque élément du menu. Cliquez sur la flèche située à c?té de chaque élément de la structure du menu et vous verrez les options suivantes :

• Onglets de navigation: Il s'agit du nom des liens affichés dans le menu, tels que Boutique, Galerie et à propos.
• Titre Attributs: Il s'agit du texte d'invite qui s'affiche lorsque la souris survole un élément de menu pour fournir plus d'informations ou d'instructions.
• Ouvrir le lien dans une nouvelle fenêtre: Normalement, il n'est pas recommandé de cocher cette case si l'on n'établit pas de lien avec un site externe.
• Classe CSS: Ici, vous pouvez ajouter des classes CSS pour personnaliser les styles, comme l'ajout d'espacement ou de texte en gras.
• lien relationSi le lien pointe vers un site web tiers associé, le lien peut être indiqué ici, par exemple s'il s'agit du site web d'un partenaire, d'un membre de la famille ou d'un autre site web de l'utilisateur.
• descriptionsSi votre thème permet d'afficher des descriptions, vous pouvez ici donner une brève description de l'élément de menu.

3. modifier la structure du menu de navigation

WordPress vous permet de créer des menus hiérarchiques, ce qui signifie que vous pouvez définir des éléments de menu parent et des éléments de sous-menu en dessous. Ainsi, lorsqu'un visiteur survole l'élément de menu parent, les pages enfants situées en dessous s'affichent.

Pour réorganiser les éléments de menu ou créer des sous-menus, vous pouvez procéder par glisser-déposer. Voici comment procéder : si vous souhaitez définir un élément de menu comme sous-menu, il vous suffit de le faire glisser sous l'élément de menu parent correspondant et légèrement vers la droite, de manière à définir l'élément de sous-menu. Après cette opération, la navigation sur votre site web sera plus hiérarchisée et plus facile.

4. publier votre menu

Dans l'écran Editeur de menu, cliquez sur l'onglet Gérer les emplacements. Sélectionnez ensuite l'emplacement que vous souhaitez définir comme nouveau menu. Les emplacements disponibles dépendent du thème de votre site, mais en général, vous verrez probablement des options telles que "Menu principal" ou "Menu supérieur". Cochez les cases correspondantes pour placer votre nouveau menu dans ces emplacements. Cette étape vous permettra de vous assurer que votre menu appara?t au bon endroit sur votre site web.

Vous trouverez également des options de réglage similaires au bas de la page du menu principal, qui sont présentées sous forme de cases à cocher.

Si cela ne fonctionne pas, vous pouvez essayer une autre approche : allez à "état extérieur">"widgets"Faites ensuite glisser le nouveau menu personnalisé ou le widget de menu de navigation à l'endroit souhaité. La disposition du menu du site sera ainsi adaptée à vos besoins.

Widgets de menu de navigation pour Elementor Pro

Pour utiliser les widgets du menu de navigation, vous devez installer n'importe quelle version de l'applicationElementor ProSi vous utilisez la version gratuite. Si vous utilisez la version gratuite, vous devez vous en tenir au menu par défaut de WordPress ou utiliser un tiers.

Avec la version Pro, vous avez également accès à plus de 300 modèles,Constructeur de thèmesetSite web WooCommercerépondre en chantantPop-ups marketingLe site dispose de plus d'animations et de widgets supplémentaires pour les utilisateurs de WooCommerce.

Comment créer un menu de navigation dans Elementor

Le Widget Menu de Navigation est très flexible et riche en fonctionnalités, vous donnant la liberté de placer des menus sur votre site web qui ne sont pas limités au haut de la page ou à la zone d'en-tête. Vous pouvez le placer où vous le souhaitez, et même l'inclure dans des articles. Voici quelques-unes de ses principales fonctionnalités :

• Vous pouvez ajouter plusieurs menus n'importe où sur le site.
• Ajoutez facilement des effets d'animation attrayants au passage de la souris.
• Il prend en charge la conception réactive pour les appareils mobiles et peut être personnalisé pour s'afficher sur les ordinateurs, les tablettes et les téléphones portables.
• Le réglage de la mise en page, des couleurs et d'autres éléments de conception vous permet de contr?ler précisément l'apparence de vos menus.
• Des options exhaustives de remplissage, d'espacement et d'alignement sont fournies pour garantir que chaque détail du menu est impeccable.

Tout d'abord, créez un menu WordPress par défaut. Assurez-vous de suivre les conseils ci-dessus pour savoir exactement comment faire.

Si votre menu WordPress est complet, ajoutez-le à votre site en utilisant le widget Menu de navigation. Pour ce faire, créez ou modifiez le modèle dans lequel vous souhaitez que le menu apparaisse (par ex.en-tête). Trouvez ici le widget de menu de navigation et ajoutez-le à l'emplacement souhaité.

Une fois cela fait, votre menu WordPress peut maintenant être édité - et personnalisé - dans Elementor !

1. mise en page et animation

Sur la barre latérale gauche, vous devriez voir trois onglets :Contenu, style et niveau avancé. La première chose à faire (si ce n'est pas déjà fait) est de se rendre sur le site de la"élément"et doit"menu"Passez au menu que vous souhaitez afficher. Cela vous permet de le voir dans l'écran de prévisualisation.

Lorsque vous définissez la présentation du menu, vous pouvez choisir entre une présentation horizontale, une présentation verticale ou un menu déroulant caché. Essayez différentes options de mise en page et vous verrez immédiatement comment le menu change en fonction du style. En outre, vous pouvez ajuster l'alignement des éléments du menu pour répondre à vos besoins en matière de conception.

En ce qui concerne les animations, vous disposez d'un large éventail d'options pour rendre vos menus plus attrayants. Il s'agit notamment d'animations de soulignement, de surlignage et de double soulignement, ainsi que d'animations de bordure, d'arrière-plan et de texte. Il vous suffit de cliquer sur "aiguille sur une jauge" pour sélectionner votre type d'animation préféré, puis cliquez sur "anime"Voir et sélectionner des options spécifiques. Vous pouvez voir ici quelques exemples spécifiques d'effets d'animation.

L'indicateur de sous-menu vous permet de modifier le style d'affichage des ic?nes fléchées des sous-menus. Si vous souhaitez personnaliser davantage l'apparence du sous-menu, accédez à l'onglet Styles et cliquez sur la section Menu déroulant pour la développer. Vous pouvez y ajuster le comportement du sous-menu en affichage normal et au survol, modifier la mise en page du texte, ajouter des bordures, des ombres ou des séparateurs, et ajuster les marges intérieures en fonction de vos besoins en matière de conception. Ces paramètres rendront votre menu plus personnel et plus fonctionnel.

2. la couleur et l'espacement

Vous avez configuré la présentation du menu comme vous l'entendez, et vous pouvez la personnaliser encore davantage en ajustant les couleurs et les remplissages. Aller à"type"et développez l'onglet"menu principal".

Dans les paramètres de mise en page, vous pouvez modifier la taille, la police et l'épaisseur du texte, et vous pouvez choisir de mettre le texte en majuscules ou en minuscules. En outre, vous pouvez procéder à des ajustements de style individuels pour différents types d'appareils. Par exemple, vous pouvez augmenter la taille du texte sur les appareils mobiles, modifier la couleur du texte sur les appareils de bureau ou procéder à d'autres ajustements à votre convenance. Ces options vous permettent d'offrir une expérience de navigation optimale pour chaque appareil.

Les options Couleur du texte et Pointeur permettent de personnaliser la couleur des liens de menu lorsqu'ils sont affichés normalement, lorsqu'ils sont survolés et lorsqu'ils sont activés. Pour ces différents états, vous pouvez ajuster le style respectivement pour l'état survolé et l'état actif.

L'ajustement de l'espacement est également facile et précis ; vous pouvez définir le remplissage du texte, l'espacement des lettres, la hauteur des lignes, etc :

• votre taille (honorifique): Ajuste la hauteur d'une ligne, de manière similaire au remplissage vertical, en affectant l'espace au-dessus et au-dessous du texte.
• espacement des lettres: Définit la distance entre les lettres ; plus l'espacement est grand, plus l'écart entre les lettres est important.
• largeur du pointeur: Définit l'épaisseur de la ligne en cas de survol ou d'activation.
• Remplissage horizontalEspace entre les éléments de menu ou, dans une présentation verticale, entre les éléments de menu et les bords de la colonne.
• Remplissage verticalDans une présentation verticale, il s'agit de l'espace entre les éléments de menu ou entre le haut et le bas d'une colonne.
• L'espace entre les deux: Cette option permet d'augmenter l'espace entre les éléments du menu.
• Rayon de la bordureSi vous utilisez une couleur d'arrière-plan, ce paramètre ajoute un effet de coin arrondi.

Si vous définissez des points d'arrêt pour les appareils mobiles, vous pouvez définir des espaces différents pour les modes ordinateur de bureau et tablette. Dans le cas contraire, vous devrez modifier les options mobiles séparément.

Enfin, dans l'onglet Avancé, vous pouvez définir des classes CSS, ajuster les marges et l'espacement, ajouter des images d'arrière-plan, modifier les paramètres réactifs, etc. Il convient d'être prudent lorsque vous modifiez ces options afin qu'elles n'affectent pas les performances de votre site web sur les appareils mobiles.

3. configurer le menu mobile

Le widget du menu de navigation offre un certain nombre d'options de réglage dans l'onglet Disposition qui sont optimisées pour les petits appareils. Vous trouverez ci-dessous une brève description de ces options :

• point de rupture: Définir quand changer la disposition du menu pour un meilleur affichage sur les petits écrans tels que les tablettes ou les téléphones portables.
• largeur totaleLorsque cette option est activée, le menu sur les appareils mobiles s'étend sur toute la largeur de l'écran et n'est pas limité à la largeur initiale de la barre de navigation.
• s'aligner dans le bon ordreLes liens : Vous pouvez choisir de centrer les liens dans le menu mobile, ou de les afficher à gauche ou à droite.
• changer de mode ou de flux de donnéesMenu hamburger : Vous pouvez choisir de conserver le menu hamburger (l'ic?ne avec trois lignes horizontales) ou de le masquer complètement sur votre appareil mobile.
• Alignement par basculement: Définit la position de l'ic?ne du menu hamburger, centrée, alignée à gauche ou alignée à droite.

Dans l'onglet Styles, vous trouverez également des options pour ajuster l'apparence des boutons à bascule du menu mobile, y compris la personnalisation des couleurs, des arrière-plans, des tailles et l'ajout de bordures. Ces paramètres vous permettent d'embellir et d'optimiser l'affichage du menu mobile.

Elementor dispose d'une option de mode réactif en bas de la barre latérale. Elle vous permet de prévisualiser l'aspect du menu mobile sur les écrans de tablettes et d'appareils mobiles.

Résumé :

Il existe plusieurs fa?ons de créer des menus de navigation personnalisés dans WordPress. Bien que la configuration du menu par défaut de la plateforme soit simple à utiliser et réponde aux besoins de base, si vous trouvez que ces menus ne sont pas assez flexibles ou qu'il leur manque certaines fonctionnalités, les widgets de menu de navigation d'Elementor peuvent être une meilleure option. Avec Elementor, la création et la personnalisation des menus sont faciles et flexibles, avec un large éventail de possibilités de personnalisation.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.