Menu de navigation Elementor – Créez un menu incroyable pour votre site Web WordPress

Cherchez-vous un moyen de créer un menu étonnant pour vous aider à améliorer l'UI/UX de votre site Web ? Si tel est le cas, vous êtes au bon endroit. Nous avons élaboré ici un guide détaillé pour vous aider.

Tout d’abord, nous vous montrons une procédure pas à pas sur la façon de créer un menu pour votre site Web WordPress. Et une fois que vous aurez compris cela, nous vous expliquerons comment utiliser le widget Elementor Navigation Menu pour personnaliser et booster votre menu WordPress.

Table des matières :

• Pourquoi avez-vous besoin d’un menu de navigation personnalisé ?
• Créer un menu WordPress de base à l'aide d'Elementor
• 1. Créez un menu simple pour votre site WordPress
• 2. Choisissez et personnalisez les éléments du menu de navigation
• 3. Créer des sous-menus – Éléments de menu parent et enfant (facultatif)
• 4. Gérez l'emplacement de votre menu et publiez
• Comment créer un menu de navigation à l'aide du widget Elementor pro nav'
• Fonctionnalités clés du widget Elementor Nav-Menu
• Créer un menu avec le widget nav-menu pro
• Menu réactif pour mobile
• Conclusion

Pourquoi avez-vous besoin d’un menu de navigation personnalisé ?

Il est essentiel de savoir que les menus de navigation sont importants non seulement pour générer du trafic vers votre site, mais également pour un meilleur classement SEO.

En effet, les menus de navigation sont principalement conçus pour l’engagement des utilisateurs, mais ce n’est pas leur seul objectif.

Le deuxième facteur le plus important est de garder à l’esprit le rôle des « WebCrawler » ou des robots conçus pour explorer les sites Web, indexer le contenu au niveau approprié et faire rapport au moteur de recherche pour classer le contenu au bon endroit.

Par conséquent, si vous créez des menus trop compliqués, il sera alors difficile pour les robots de classer votre contenu, mais vous perdrez également vos visiteurs.

En bref, la « facilité de navigation » contribue de manière essentielle à l'amélioration d'une meilleure expérience utilisateur et joue un rôle impératif dans l'amélioration du classement de notre site et l'augmentation du trafic.

C'est une excellente raison pour de nombreux sites Web d'entreprise de conserver une seule icône de navigation au lieu d'une barre de menu complexe, qui se charge jusqu'à un menu plein écran lorsque vous cliquez dessus.

Grâce au widget Elementor pro avec un menu de navigation 100% réactif, vous pouvez créer une barre de menus au pixel près et incroyablement flexible sans utiliser de code.

Dans ce didacticiel, nous allons vous montrer comment utiliser le widget du menu de navigation Elementor pour obtenir le menu WordPress avancé et personnalisé.

Avant de commencer avec le widget Elementor Navigation, explorons comment créer un menu WordPress simple à l'aide de la version gratuite d'Elementor.

Créer un menu WordPress de base à l'aide d'Elementor

Désormais, pour créer un menu WordPress, vous n'avez pas besoin d'installer de plugin spéciaux. Par défaut, WordPress est livré avec un générateur de menus facile à utiliser, qui vous aidera à créer des menus de navigation simples pour votre site Web.

Cela étant dit, vous n’aurez accès à aucune option de personnalisation du menu. Il prendra en charge le design du thème WordPress actuellement actif. Mais si c’est tout ce que vous voulez, alors c’est un excellent moyen de configurer un menu de navigation pour votre site WordPress.

1. Créez un menu simple pour votre site WordPress

Tout d’abord, vous devrez vous connecter à votre tableau de bord backend WordPress.

Maintenant, dans la barre latérale gauche, accédez à Appearance > Menus . Vous trouverez ici une disposition à deux colonnes avec « Ajouter des éléments de menu » à gauche et « Structure du menu » à droite.

Sous Structure du menu, vous trouverez un champ pour le « Nom du menu ». Ce sera le nom du menu que nous allons créer en ce moment. Appelons-le Menu 1.

Remarque : Ne vous inquiétez pas. Vos lecteurs ne pourront pas voir les noms des menus. C'est une fonctionnalité pour vous aider à garder tous vos différents menus organisés.

Après avoir donné un nom à votre menu, cliquez sur le bouton « Créer un menu » pour le rendre disponible. Maintenant, vous devez ajouter les différents éléments de menu.

2. Choisissez et personnalisez les éléments du menu de navigation

Vient maintenant la partie où vous remplissez votre nouveau menu avec des éléments de menu. Sous la section « Ajouter des éléments de menu » sur votre côté gauche, vous trouverez une liste organisée des éléments que vous pouvez ajouter à votre menu.

Par défaut, celui-ci contient toutes vos pages, publications, pages de destination, liens personnalisés et catégories.

sélectionnez simplement les éléments de menu que vous souhaitez ajouter à l’aide de la case à cocher, puis cliquez sur le bouton « Ajouter au menu ». Cela remplira votre menu avec tous vos éléments de menu sélectionnés.

Remarque : Notez que chaque section sous « Ajouter des éléments de menu » a la possibilité de basculer entre – Les plus récents , Afficher tout et Rechercher . N'oubliez pas d'utiliser ces options s'il y a beaucoup d'éléments.

Une fois que vous avez terminé d'ajouter tous les éléments de menu, cliquez sur le bouton « Enregistrer le menu » et passez à l'étape suivante.

3. Créer des sous-menus – Éléments de menu parent et enfant (facultatif)

Saviez-vous que par défaut WordPress vous permet également de créer des sous-menus ? Lors de la création de la structure du sous-menu, vous disposez d'un élément de menu parent et d'un élément de menu enfant.

Lorsqu'un utilisateur survole l'élément de menu parent, il révèle tous les éléments de menu enfant cachés en dessous.

Cool, non ?

Maintenant, pour créer une structure de sous-menu, tout ce que vous avez à faire est de choisir un élément de menu que vous souhaitez placer dans le menu parent. Ensuite, faites glisser et déposez tous les éléments de menu que vous souhaitez comme éléments de menu enfants en dessous. Maintenant, faites-le simplement glisser vers la droite et vous avez terminé !

4. Gérez l'emplacement de votre menu et publiez

Maintenant que vous avez créé votre nouveau menu et ajouté des sous-menus, il est temps de gérer son emplacement.

En haut de votre éditeur de menu, vous devriez remarquer une option appelée « Gérer les emplacements ». Cliquez dessus et quelque chose de similaire à l'écran suivant devrait apparaître :

Désormais, les emplacements de menu disponibles dépendront du thème que vous avez installé. Dans cet amp , nous avons un thème qui prend en charge 3 menus.

Après avoir attribué un menu à chacun des emplacements de menu disponibles, cliquez sur « Enregistrer les modifications » et c'est tout.

Vous connaissez désormais toutes les fonctionnalités de menu de base proposées par WordPress par défaut. Cependant, si vous souhaitez plus de personnalisation et de fonctionnalités, lisez la suite pour en savoir plus sur le widget de menu Elementor Pro Nav.

Comment créer un menu de navigation à l'aide du widget Elementor pro nav'

Si vous souhaitez ajouter un menu de navigation personnalisé à votre site WordPress, vous aurez besoin de la version Elementor Pro. La version Elementor Pro est livrée avec le widget de navigation Elementor ainsi que de nombreuses autres fonctionnalités spéciales telles que plus de 300 modèles, un générateur de thème, un widget contextuel, des widgets WooCommerce et de nombreuses autres fonctionnalités intéressantes.

Quelles sont les principales fonctionnalités spécifiques du widget Nav Menu lui-même ? Voici une brève introduction.

Fonctionnalités clés du widget Elementor Nav-Menu

• Le widget Nav-menu vous donne la liberté de placer votre menu où vous le souhaitez. Sur votre en-tête ou en haut ou n’importe où sur votre page.
• Vous pouvez ajouter plusieurs menus sur votre site ainsi que sur vos pages séparément ou globalement.
• Donnez un look éblouissant à votre menu en utilisant l'animation, les effets de survol ou le statut actif
• Créez un menu réactif pour mobile de votre site et contrôlez l'apparence de votre site sur les écrans mobiles
• Personnalisez la couleur, la typographie et le remplissage ou d'autres ajustements de votre barre de menus
• Créez un menu au pixel près avec la bonne précision d'alignement, d'espacement et de remplissage.

Créer un menu avec le widget nav-menu pro

Vous devrez créer un menu WordPress de base comme nous l'avons mentionné ci-dessus, puis personnaliser le menu WordPress par défaut à l'aide du widget pro-nav-menu. Une fois que vous avez créé la liste principale, l'étape suivante consiste à l'ajouter à l'emplacement souhaité, c'est-à-dire la section En-tête.

Maintenant, lorsque vous avez terminé avec les paramètres de base, personnalisons le menu à l'aide du widget du menu de navigation.

Dans le coin supérieur de la section des paramètres, trois options sont disponibles : Contenu, style et avancé.

La section Mise en page : vous disposez de trois options : horizontal, vertical ou un accordéon déroulant caché.

• Horizontal : La mise en page horizontale est la mise en page la plus couramment utilisée par les sites. Il se propage sur l’écran de gauche à droite.
• Vertical : Vous trouverez également une mise en page verticale sur de nombreux sites, notamment sur les sites proposant des services de création. Dans le cas d’une mise en page verticale, l’étalement de la barre de navigation se fera de haut en bas.
• Liste déroulante : les menus déroulants sont également assez courants. Les listes déroulantes sont disposées verticalement et nécessitent une interaction avec l'utilisateur pour être révélées. Ils sont principalement utilisés pour créer un design épuré.

Section Aligner : cette section vous aide à aligner les éléments de texte du menu ; centre, droite ou gauche.

Section Animation : cette section vous permettra d'ajouter des effets d'animation sous, sur ou double ligne. Vous pouvez également opter pour le cadre, l’arrière-plan et les animations de texte subtiles.

Les animations de soulignement sont les suivantes :

• Fondu : L'animation de fondu propose une animation de fondu sous les éléments de menu.
• Diapositive : l'animation de la diapositive fait glisser la barre sous les éléments de menu.
• Grow : L'animation de croissance grandit du milieu vers l'extérieur et donne une sensation de croissance.
• Drop in : l'animation Drop in se déroule de bas en haut.
• Abandon : l'animation d'abandon s'effectue de haut en bas.

De même, il existe des animations encadrées, surlignées, doubles lignes, d’arrière-plan et de texte. Chacun d'eux propose son propre ensemble d'animations et vous pouvez les consulter vous-même pour savoir ce que vous obtenez avec elles.

Section Pointeur : sélectionnez le type de pointeur dans le menu déroulant.

Section indicateur de sous-menu : le widget Elementor regorge de nombreuses options de style de sous-menu. Où vous pouvez non seulement contrôler la couleur, le style et également l’arrière-plan du menu.

Remplissage et espacement des menus : le remplissage peut être ajusté rapidement. Vous pouvez modifier le remplissage horizontal du menu et du sous-menu, le remplissage vertical, l'espace intermédiaire ainsi que l'alignement à droite, à gauche et centré.

Elementor aborde extrêmement bien l’espacement et le remplissage des menus. Ils ont travaillé dur derrière les portes pour s'assurer qu'ils peuvent apporter les outils au développeur afin qu'il puisse facilement créer le design auquel il pense.

L'espacement des menus offre de nombreuses options, notamment :

• Espace entre les éléments de menu
• Remplissage horizontal et vertical pour les éléments de menu et de sous-menu
• Alignement centré, gauche, droite et justifié.

Couleur d'arrière-plan et typographie : vous pouvez obtenir le look de votre marque sur mesure à l'aide de la palette de couleurs et de la couleur d'arrière-plan souhaitées. En outre, vous pouvez également choisir les options de menu transparentes ou semi-transparentes.

En tant que concepteur, vous pouvez jouer avec ces options autant que vous le pouvez et vous assurer de concevoir les arrière-plans selon vos goûts.

Menu réactif pour mobile

Le mobile est une partie importante du Web, et c'est pourquoi les développeurs Elementor fournissent également des outils vous permettant de créer également la barre de navigation pour le mobile.

Le widget Elementor vous permet un contrôle complet des options de menu mobile sur WordPress. Vous pouvez contrôler l’affichage de l’écran mobile avec un ensemble distinct de paramètres pour les écrans mobiles uniquement. Il existe une option pour les paramètres de l'écran mobile au bas de la section des paramètres Elementor où vous pouvez afficher les options de votre écran mobile.

En bref, les fonctionnalités du menu mobile d'Elementor sont les suivantes :

• Pleine largeur sur mobile : vous avez également la possibilité de définir la pleine largeur ou une largeur limitée.
• Points d'arrêt sur tablette ou mobile : vous pouvez utiliser les paramètres du point d'arrêt pour définir le menu mobile pour mobile ou tablette.
• Menus verticaux et accordéon : Elementor offre également la possibilité d'afficher une icône de hamburger pliable.
• Basculer l’alignement : l’icône du hamburger peut être alignée au centre, à gauche ou à droite.
• Alignement de côté/centre : Choisissez l’alignement du menu mobile.

Navigation réactive : offre un positionnement réactif du menu.

Conclusion

Le menu est l’une des fonctionnalités les plus importantes de tout site Web. Parce que cela aide les visiteurs à parcourir votre site Web et si vous créiez une liste intelligemment, cela aiderait à garder vos visiteurs sur votre site pendant longtemps. Le menu est tout aussi important que celui de la mise en page complète de n’importe quel site Web, de l’en-tête et du pied de page.

Par conséquent, le widget de menu doit être capable de fournir l’apparence unique de votre marque avec toutes les fonctionnalités essentielles. Le widget Elementor Navigation est doté de fonctionnalités riches en fonctionnalités qui permettent aux clients de personnaliser la section de menu pour l'adapter à la voix de votre marque. Désormais, vous pouvez utiliser un menu élégant et personnalisé sur votre site Web, sur votre page de destination, votre en-tête ou toute autre section où vous souhaitez l'afficher.