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:
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.
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.
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.
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.
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é !
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.
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.
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é.
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:
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:
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.
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:
Navigation réactive : offre un positionnement réactif du menu.
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.
Les en-têtes et pieds de page d'un site Web sont des éléments essentiels. Dans la plupart des cas, l'en-tête fournit une navigation…
Deux des thèmes WordPress les plus populaires sur le marché sont Astra et OceanWP. Professionnel…
La création d'un excellent site Web d'actualités ne vous oblige pas à devenir concepteur de sites Web. Nous…
Le thème Journal est l'un des thèmes WordPress les plus importants conçus par tagDiv, un…
Lorsqu'il s'agit de créer une boutique en ligne, WooCommerce est le plugin . Ce…
Un en-tête est généralement la première chose qu'une personne voit lorsqu'elle visite votre site Web,…
Voir les commentaires
Hola gracias por el post, cuando añado el nav menú no me aparece mi menú se queda solo un recadro gris en el editor of elementor y si voy a la page donde lo tengo no aparece nada. Como puedo solucionarlo? gracias
Salut! Habituellement, ce problème apparaît lorsque votre menu est vide ou non enregistré. Veuillez vérifier le côté du menu WordPress.
Hola, una consulta, cómo se puede dar la instrucción para cerrar automáticamente un submenu al ouvrir otro ítem del menu.
Gracias.
Bonjour, désolé je n'ai pas bien compris votre question ? Pourriez-vous préciser ?
ciao quando le voci del submenù sono troppo lunghe come si riesce a Dividerle su più righe ?
Bonjour, ce n'est pas recommandé car la navigation serait très complexe à lire, dans ce cas il vaut mieux un style méga menu
Menu w wersji mobilnej nie otwiera sie. Jak moge je utworzyc zeby wyswietlalo sie na telefonach?
Bonjour, l'affichage du menu mobile est automatique si vous utilisez le widget de navigation Elementor. Mais vous devriez vérifier un paramètre d'appel "point d'arrêt" dans les paramètres du menu. Il s'agit de la taille de l'écran lorsque votre menu basculera.
Tôi dùng thằng này, mà trên destop tôi để chế độ Horizontal mà nó không nằm ngang, nó cứ nằm dọc, tôi dùng theme Creaton. Có gì hỗ trợ mình với nhé.
Sziasztok, az miképp oldható meg, hogy egy vertikális menüben az almenüre kattintás után ne zárja össze a menüt az oldal betöltésekor ? EPro
Salut, malheureusement ce n'est pas possible, il n'y a pas une telle option dans le widget de navigation Elementor.
Ciao. Vorrei sapere se è possibile fare in modo che il menu rimanga semper visibile anche quando si scende con la visualizzazione della pagina. Purtroppo tutte le volte che ci ho provato il menu scende mail il colore di background del menu no rendendolo praticamente illegibile the scritte. Grazie