Créer un menu sur Elementor : le guide complet et détaillé

Dans ce tutoriel je vais vous expliquer comment créer un menu avec Elementor sur WordPress. Comme vous le savez, créer un menu de navigation optimisé pour aider vos visiteurs à trouver rapidement ce qu’ils cherchent, améliore l’expérience utilisateur. Sans parler du fait qu’il peut vous aider à mieux vous classer sur les moteurs de recherche. Pour réaliser ça, vous apprendrez ici à créer un menu agréable à naviguer sur Elementor et adapté à votre identité visuelle.

Pourquoi utiliser Elementor pour créer un menu ?

Elementor est un constructeur de pages sur WordPress. Il permet de créer des mises en page par glisser-déposer. Il offre aussi des centaines de widgets et de modèles préconçus pour créer votre site Internet. Parmi ces widgets, vous pouvez concevoir et personnaliser des menus de navigation. C’est le thème de cet article.

Quels sont les avantages d’utiliser Elementor pour la création de menus

Elementor offre l’avantage d’être simple à utiliser. Lorsque vous créez un menu, vous pouvez le personnaliser en ajustant les couleurs, les polices, les marges ou encore ajouter des animations. Ça permet d’ajuster votre menu à votre identité visuelle sans devoir coder. Autre avantage, le constructeur de pages par glisser-déposé permet d’avoir un aperçu direct de votre travail.

Méga menu

Avec des widgets (modules) complémentaires comme ElementsKit, vous pouvez créer aussi des mégas menus. Dans ceux-ci vous pouvez ajouter des icônes, des images, ou même des vidéos à votre menu. Dernière chose, vous pouvez définir des conditions d’affichage spécifiques selon le type d’utilisateurs. Ce qui permet d’afficher des menus différents selon le visiteur.

Les prérequis pour commencer la personnalisation de vos menus de navigation

Bien sûr, vous devez télécharger Elementor et l’installer sur WordPress. Ensuite, commencez à créer un plan de la structure de votre menu. Ça vous permettra de ne pas passer des heures en réglages inutiles et d’avoir un menu qui soit logique, efficace et agréable. Une fois ces étapes accomplies, nous pouvons passer à la suite.

Installation d’ElementsKit sur WordPress pour les mégas menus

ElementsKit va vous permettre de créer des mégas menus. Si c’est votre objectif, vous pouvez cliquer ici pour le télécharger. Les mégas menus permettent d’ajouter des médias pour rendre la navigation encore plus simplifiée grâce à des éléments visuels.

Les 4 étapes pour créer un menu sur Elementor

Passons à la création de votre menu sur Elementor. En suivant ces 4 étapes simples, vous aurez votre premier menu de navigation disponible pour votre site Internet.

La première chose à faire est de configurer correctement Elementor pour la gestion des menus.

Étape 1 : Configuration initiale

Activation du module de menu dans Elementor

1. ElementsKit : Si vous avez installé ElementsKit pour bénéficier de fonctionnalités avancées de menu, l’onglet ElementsKit permet de se connecter au panneau de contrôle.
2. La section des modules : Cliquez sur « Modules«  et vous verrez une liste complète des modules proposés par l’extension WordPress
3. Activer les modules « Header Footer & Menu » et « Mega Menu » : activez le module « Header Footer & Menu«  et le module « Mega Menu » qui ajoutent les fonctionnalités spécifiques à Elementor pour créer des menus et de mégamenus en permutant le bouton sur « on ».
4. Les paramètres généraux (optionnel) : cliquez sur l’icône de réglages à côté du module « Header Footer & Menu » si vous voulez configurer les options comme l’alignement du menu, les animations d’affichage, ou encore les marges de votre thème.
5. Du côté d’Elementor : vous pouvez créer ou éditer une page ou un template de header sur Elementor pour voir les nouvelles options disponibles pour les menus dans la liste des widgets d’Elementor.

Création du menu de base

Maintenant que tout est prêt pour créer et personnaliser un menu de navigation dans Elementor, commençons la structure et à la création de votre menu de navigation de base. On va définir les éléments principaux de votre menu, tels que les pages, les articles et les liens personnalisés.

Création d’un nouveau menu dans WordPress

1. Accéder à la gestion des menus : dans votre tableau de bord WordPress, allez dans « Apparence » puis « Menus ». Vous pouvez ici créer et de gérer plusieurs menus pour votre site.
2. Créer un nouveau menu : si vous n’avez pas encore de menu, vous verrez une option pour créer un nouveau menu. Donnez un nom descriptif, par exemple « Menu haut », et cliquez sur « Créer le menu« .
3. Ajouter des éléments au menu : une fois votre menu créé, sur la gauche, vous verrez différentes sections où vous pouvez ajouter les pages existantes, les articles de blog, les liens personnalisés, et même des catégories pour les inclure dans votre menu.

Ajout d’éléments de menu (pages, articles, liens personnalisés)

1. Ajouter des pages au menu : dans l’onglet « Pages », sélectionnez les pages que vous souhaitez ajouter à votre menu. Cliquez ensuite sur « Ajouter au menu ».
2. Ajouter des articles de blog : c’est la même procédure que précédemment, mais cette fois-ci vous sélectionnez les articles..
3. Ajouter des liens personnalisés : pour ajouter un lien personnalisé vers une page externe ou une section spécifique de votre site, allez sur l’onglet « Liens personnalisés ». Entrez l’URL du lien et un libellé, puis cliquez sur « Ajouter au menu ».
4. Organiser et structurer votre menu : utilisez la fonction de glisser-déposer pour organiser l’ordre souhaité. Vous pouvez créer des sous-menus en plaçant les éléments légèrement en dessous à droite des éléments principaux.
5. Cliquez sur « Enregistrer le menu » pour terminer les modifications.

Le menu de base pour votre site WordPress est maintenant terminé. On va maintenant pouvoir le personnaliser. Si vous voulez utiliser ce menu pour créer un mégamenu, cochez la case « Enable this menu for Megamenu content » (entouré en bleu sur l’image). Si vous l’activez, vous devrez utiliser le module « header-footer » d’ElementsKit avec le widget elementskit nav-menu pour afficher le méga menu.

Étape 3 : Personnalisation du menu

Pour que votre menu Elementor s’intègre parfaitement à l’identité visuelle de votre site, nous allons voir comment transformer un menu standard pour le rendre plus joli.

Personnalisation des styles et des couleurs

1. Accéder à l’éditeur Elementor : ouvrez la page ou le template où vous souhaitez afficher votre menu en utilisant Elementor. Si vous personnalisez un header, assurez-vous que vous avez activé le module « Header Footer & Menu » comme expliqué précédemment.
2. Ajouter le widget « Menu de navigation » à votre zone de travail. Ce widget vous permet de styliser votre menu dans Elementor.
3. Choisir un style de menu : dans le panneau de réglages du widget, dans l’onglet « Contenu », vous pouvez choisir le menu que vous avez créé dans WordPress. Ensuite, passez à l’onglet « Style » pour personnaliser votre menu.
4. Personnaliser les couleurs : tous les réglages concernant les couleurs sont disponibles dans l’onglet « Style ».
5. Configurer les polices et la typographie : dans la section « Typographie », ajustez les polices, la taille du texte, l’interlignage, et l’espacement des lettres.

Utilisez la prévisualisation en direct d’Elementor pour voir les changements en temps réel et ajuster les styles.

Organisation des éléments de menu (hiérarchie)

1. Configurer la hiérarchie des éléments : Si vous avez des sous-menus ou des éléments de menu imbriqués, vous pouvez organiser cette hiérarchie dans l’onglet « Contenu ».
2. Ajuster l’espacement entre les éléments : dans « Style », l’option « Espacement des éléments » permet d’ajuster la distance entre les différents éléments de menu.
3. Configurer les sous-menus : les sous-menus peuvent être personnalisés de la même manière que les éléments principaux.
4. Créer des éléments de menu distinctifs : si vous avez des éléments de menu particulièrement importants, vous pouvez les mettre en avant en utilisant des styles différents. Par exemple, ajouter une icône à côté.
5. Vérification de la cohérence : Vérifiez que les polices, les couleurs, et les espacements sont identiques sur l’ensemble de votre en-tête pour une meilleure expérience utilisateur.
6. Tester sur différents appareils : Enfin, vérifiez comment votre menu s’affiche pour les ordinateurs, les tablettes et les smartphones sur Elementor en vous servant du mode responsive afin d’ajuster les styles pour chaque type d’écran.

Conseils avancés pour optimiser votre menu

Maintenant que votre menu est terminé, voyons comment on peut l’optimiser pour les moteurs de recherche et votre référencement (SEO).

Utilisation des fonctionnalités avancées d’ElementsKit

1. Créer un méga menu : si votre site contient de nombreuses pages ou catégories, un méga menu avec ElementsKit peut être une très bonne option pour améliorer l’accessibilité.
2. Ajouter des icônes aux éléments de menu : Les icônes rendre votre menu plus attrayant et aide les utilisateurs à identifier rapidement les catégories de votre site.
3. Configurer des menus contextuels : les menus contextuels s’affichent uniquement lorsque l’utilisateur clique ou survole certains éléments. Ca permet d’avoir des menus moins chargés qui n’affichent que les informations utiles pour l’utilisateur.
4. Personnalisation responsive avancée : vous pouvez créer des variations de votre menu pour mobile, ajuster la taille des textes, masquer ou afficher certains éléments en fonction de la taille de l’écran, et même créer un menu mobile distinct si nécessaire dans ElementsKit.

Optimisation SEO du menu pour une meilleure navigation

1. Utilisation de titres de menu clairs et pertinents : Pour optimiser votre SEO, vos titres de menu doivent être clairs et refléter fidèlement le contenu des pages.
2. Ajout de descriptions dans les menus : ElementsKit, permets d’ajouter des descriptions sous les titres de menu. Malgré que celles-ci ne soient pas toujours visibles pour l’utilisateur, elles peuvent être lues par les moteurs de recherche. De ce fait, optimisez vos menus avec des mots-clés dans vos descriptions.
3. Créer une structure de menu logique et hiérarchisée : une bonne structure aide les moteurs de recherche à comprendre la hiérarchie de votre contenu.
4. Des médias adaptés : pensez à créer des illustrations spécifiques pour vos menus. Dimensionnez vos images de menu à la bonne taille pour éviter de surcharger votre site en ressources inutiles.
5. Utilisation des liens internes pour renforcer le SEO : Les liens dans les menus permettent de renforcer votre maillage interne. Ils devraient comporter toutes les pages transactionnelles de votre site.

Essayez et personnalisez votre propre menu sur Elementor

Si vous avez des difficultés à créer vos menus sur WordPress, cette solution est de loin la plus simple même si vous êtes débutant pour créer des menus sublimes pour votre site Internet. N’hésitez pas à tester par vous-même pour voir si ça peut correspondre à vos besoins.