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

Vous cherchez un moyen de créer un menu incroyable pour aider à améliorer l'UI/UX de votre site Web ? Si oui, alors vous êtes au bon endroit. Ici, nous avons mis en place un guide détaillé pour vous aider.

Tout d'abord, nous vous montrons une procédure pas à pas pour créer un menu pour votre site 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 '
• Widget Elementor Nav-Menu Caractéristiques principales
• Créer un menu avec le widget nav-menu pro
• Menu réactif mobile
• Emballer

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 amener du trafic vers votre site, mais aussi 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 le seul objectif.

Le deuxième facteur le plus important est de garder à l'esprit le rôle de «WebCrawler» ou Bots qui sont conçus pour explorer les sites Web et 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 serait difficile pour les bots de classer votre contenu, mais vous perdrez également vos visiteurs.

En bref, la «facilité de navigation» est un contributeur essentiel à l'amélioration de l'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 menus complexe, qui se charge en 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 menu au pixel près et incroyablement flexible sans utiliser de code.

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

Avant de commencer avec le widget de navigation Elementor, explorons comment créer un menu WordPress simple en utilisant la version gratuite d'Elementor.

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

Maintenant, 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 constructeur 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 pour le menu. Il reprendra la conception 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 principal WordPress.

Maintenant, dans la barre latérale de gauche, accédez à Apparence > Menus . Vous trouverez ici une mise en page à deux colonnes avec "Ajouter des éléments de menu" à gauche et "Structure de menu" à droite.

Sous la structure du menu, vous trouverez un champ pour le "Nom du menu". Ce sera le nom du menu que nous allons créer maintenant. Appelons-le Menu 1.

Remarque : Ne vous inquiétez pas. Vos lecteurs ne pourront pas voir les noms des menus. C'est une fonctionnalité qui vous aide à organiser tous vos différents menus.

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. Dans la section "Ajouter des éléments de menu" sur votre gauche, vous trouverez une liste organisée de choses que vous pouvez ajouter à votre menu.

Par défaut, cela contient l'une de 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 - Plus récent , Afficher tout et Rechercher . N'oubliez pas d'utiliser ces options si vous avez beaucoup d'articles.

Une fois que vous avez terminé d'ajouter tous les éléments de menu, appuyez 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 de 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 voir apparaître dans le menu parent. Ensuite, faites glisser et déposez tous les éléments de menu que vous souhaitez en tant qu'éléments de menu enfant en dessous. Maintenant, faites-le 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 ancien amp le, 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 maintenant toutes les fonctionnalités de base du menu que WordPress propose 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 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 fonctionnalités clés spécifiques du widget Nav Menu lui-même? Voici une brève introduction.

Widget Elementor Nav-Menu Caractéristiques principales

• 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 et également sur vos pages séparément ou globalement.
• Donnez un look éblouissant à votre menu en utilisant des animations, des effets de survol ou un statut actif
• Créez un menu réactif mobile de votre site et contrôlez l'apparence de votre site sur les écrans mobiles
• Personnalisez la couleur, la typographie et le rembourrage 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 vous personnaliserez 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 de menu de navigation.

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

La section Disposition : vous avez 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 la gauche vers la droite.
• Vertical: Vous retrouverez également une mise en page verticale sur de nombreux sites, notamment sur les sites proposant des services créatifs. Dans le cas d'une mise en page verticale, la répartition 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 une disposition verticale et nécessitent une interaction avec l'utilisateur pour les révéler. 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 sur des effets d'animation sur deux lignes. 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 se développe du milieu vers l'extérieur et donne une sensation de croissance.
• Drop in : Drop dans l'animation se déroule de bas en haut.
• Abandon: l' animation d'abandon se déroule de haut en bas.

De même, il existe une animation encadrée, surlignée, double ligne, d'arrière-plan et de texte. Chacun d'entre eux propose son propre ensemble d'animations et vous pouvez les consulter vous-même pour savoir ce que vous obtenez avec eux.

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

Section d'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 l'arrière-plan du menu.

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

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 au centre, à gauche, à droite et justifié.

Couleur de fond et typographie : vous pouvez obtenir votre look personnalisé à l'aide de la palette de couleurs et de la couleur d'arrière-plan souhaitées. 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 que vous concevez les arrière-plans selon vos goûts.

Menu réactif mobile

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

Le widget Elementor vous permet de contrôler complètement les options du menu mobile sur WordPress. Vous pouvez contrôler l'affichage de l'écran mobile avec un ensemble distinct de paramètres pour les écrans uniquement mobiles. 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 de l'Elementor sont les suivantes:

• Pleine largeur sur mobile: vous avez également la possibilité de définir une largeur totale ou une largeur limitée.
• Points d'arrêt sur tablette ou mobile: vous pouvez utiliser les paramètres de 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 latéral / central: choisissez l'alignement du menu mobile.

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

Emballer

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 avez créé une liste intelligemment, cela aiderait à garder vos visiteurs sur votre site pendant une longue période. Le menu est tout aussi important que celui de la disposition entière d'un site Web, de l'en-tête et de la section de pied de page.

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