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:
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.
Désormais, pour créer un menu WordPress, vous n'avez plus 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.
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.
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.
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é !
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.
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.
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é.
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 :
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 :
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.
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 :
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 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.
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 la navigation…
Astra et OceanWP sont deux des thèmes WordPress les plus populaires sur le marché. Professionnel…
Créer un excellent site Web d'actualités ne nécessite pas que vous deveniez un concepteur de sites Web. Nous…
Le thème Newspaper 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 incontournable. Il…
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
Bonjour, merci pour votre post, en lisant l'article ci-dessous, quoi que vous fassiez, vous êtes invités à laisser votre post et l'éditeur de l'élément ou vous êtes sur votre page, n'oubliez pas de laisser un commentaire. Comment puis-je trouver une solution? grâces
Salut! Habituellement, ce problème apparaît lorsque votre menu est vide ou n'est pas enregistré. Veuillez revérifier du côté du menu WordPress.
Bonjour, vous êtes invités à nous consulter pour vos instructions automatiques sur votre sous-menu ou l'élément de menu.
Merci.
Salut, désolé, je ne comprends pas bien votre question ? Pourriez-vous préciser ?
ciao quand les voix du sous-menu sono troppo longhe viennent-elles diviser votre plus juste ?
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 mobilenej nie otwiera sie. Jak peut-il utiliser votre téléphone ?
Bonjour, l'affichage du menu mobile est automatique si vous utilisez le widget de navigation Elementor. Mais vous devriez vérifier un paramètre appelé "point d'arrêt" dans les paramètres du menu. Il s'agit de la taille de l'écran lorsque votre menu basculera.
Maintenant c'est la prochaine fois, je vais continuer avec l'étape suivante, maintenant c'est le prochain thème Creaton. Có gì hỗ trợ mình với nhé.
Sziasztok, az miképp old ható meg, hogy egy vertikális menüben az almenüre kattintás uán ne zárja össze azarja össze az az oldal betöltésekor? EPro
Bonjour, malheureusement, ce n'est pas possible, une telle option n'existe pas dans le widget de navigation Elementor.
Ciao. Il est possible d'utiliser le menu en pleine visibilité et de voir le contenu visuel de la page. Purtroppo tutte le volte che ci ho provato il menu scende ma que la couleur de l'arrière-plan du menu ne rende pratiquement illisible l'écriture. Grazie