Accueil » Blog » Tutoriels WordPress » Elementor » Créer un menu sur Elementor : le guide complet et détaillé

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.

femme qui mange

Vous n’avez pas le temps de lire ?

Créer un menu avec Elementor se résume en quelques étapes simples :

  • Installer le page builder Elementor et activer les modules nécessaires (Header Footer & Menu).
  • Créer un nouveau menu en ajoutant des pages, articles, et liens personnalisés.
  • Ajouter le widget « Menu de navigation » dans Elementor.
  • Sélectionner le menu de navigation souhaité.
  • Configurer la hiérarchie et l’organisation des sous-menus.
  • Utiliser des titres de menu clairs avec des mots-clés pertinents.
  • Ajouter des descriptions et optimiser l’attribut ALT des images.
  • Vérifier la vitesse de chargement pour créer votre menu.

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 pour Eementor

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

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.
création d'un menu de navigation sur WordPress

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.

intégrer un menu à une page sur Elementor

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.
Sélectionner un menu pour Elementor

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.
réglages des sous-menus dans Elementor

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.

Article similaire :

Laisser un commentaire

Nous utilisons des cookies pour personnaliser le contenu et les publicités, pour fournir des fonctions de médias sociaux et pour analyser notre trafic. Nous partageons également des informations sur votre utilisation de notre site avec nos partenaires de médias sociaux, de publicité et d'analyse. View more
Cookies settings
Accepter
Politique des cookies & vie privée
Privacy & Cookies policy
Cookie name Active

Qui sommes-nous ?

L’adresse de notre site Web est : https://wphibou.com/.

Utilisation des données personnelles collectées

Commentaires

Quand vous laissez un commentaire sur notre site web, les données inscrites dans le formulaire de commentaire, mais aussi votre adresse IP et l’agent utilisateur de votre navigateur sont collectés pour nous aider à la détection des commentaires indésirables.

Une chaîne anonymisée créée à partir de votre adresse de messagerie (également appelée hash) peut être envoyée au service Gravatar pour vérifier si vous utilisez ce dernier.

Les clauses de confidentialité du service Gravatar sont disponibles ici : https://automattic.com/privacy/. Après validation de votre commentaire, votre photo de profil sera visible publiquement à coté de votre commentaire.

Médias

Si vous êtes un utilisateur ou une utilisatrice enregistré·e et que vous téléversez des images sur le site web, nous vous conseillons d’éviter de téléverser des images contenant des données EXIF de coordonnées GPS. Les visiteurs de votre site web peuvent télécharger et extraire des données de localisation depuis ces images.

Formulaires de contact

Le formulaire de contact est accessible ici.

Cookies

Si vous déposez un commentaire sur notre site, il vous sera proposé d’enregistrer votre nom, adresse de messagerie et site web dans des cookies.

C’est uniquement pour votre confort afin de ne pas avoir à saisir ces informations si vous déposez un autre commentaire plus tard.

Ces cookies expirent au bout d’un an.

Si vous avez un compte et que vous vous connectez sur ce site, un cookie temporaire sera créé afin de déterminer si votre navigateur accepte les cookies. Il ne contient pas de données personnelles et sera supprimé automatiquement à la fermeture de votre navigateur.

Lorsque vous vous connecterez, nous mettrons en place un certain nombre de cookies pour enregistrer vos informations de connexion et vos préférences d’écran. La durée de vie d’un cookie de connexion est de deux jours, celle d’un cookie d’option d’écran est d’un an. Si vous cochez « Se souvenir de moi », votre cookie de connexion sera conservé pendant deux semaines. Si vous vous déconnectez de votre compte, le cookie de connexion sera effacé.

En modifiant ou en publiant une publication, un cookie supplémentaire sera enregistré dans votre navigateur. Ce cookie ne comprend aucune donnée personnelle. Il indique simplement l’ID de la publication que vous venez de modifier. Il expire au bout d’un jour.

Contenu embarqué depuis d’autres sites

Les articles de ce site peuvent inclure des contenus intégrés (par exemple des vidéos, images, articles…). Le contenu intégré depuis d’autres sites se comporte de la même manière que si le visiteur se rendait sur cet autre site.

Ces sites web pourraient collecter des données sur vous, utiliser des cookies, embarquer des outils de suivis tiers, suivre vos interactions avec ces contenus embarqués si vous disposez d’un compte connecté sur leur site web.

Statistiques et mesures d’audience

« Ce site utilise Google Analytics, un service d’analyse de site internet fourni par Google Inc. ( » Google « ). Google Analytics utilise des cookies, qui sont des fichiers texte placés sur votre ordinateur, pour aider le site internet à analyser l’utilisation du site par ses utilisateurs. Les données générées par les cookies concernant votre utilisation du site (y compris votre adresse IP) seront transmises et stockées par Google sur des serveurs situés aux Etats-Unis. Google utilisera cette information dans le but d’évaluer votre utilisation du site, de compiler des rapports sur l’activité du site à destination de son éditeur et de fournir d’autres services relatifs à l’activité du site et à l’utilisation d’Internet. Google est susceptible de communiquer ces données à des tiers en cas d’obligation légale ou lorsque ces tiers traitent ces données pour le compte de Google, y compris notamment l’éditeur de ce site. Google ne recoupera pas votre adresse IP avec toute autre donnée détenue par Google. Vous pouvez désactiver l’utilisation de cookies en sélectionnant les paramètres appropriés de votre navigateur. Cependant, une telle désactivation pourrait empêcher l’utilisation de certaines fonctionnalités de ce site. En utilisant ce site internet, vous consentez expressément au traitement de vos données nominatives par Google dans les conditions et pour les finalités décrites ci-dessus. »

WPHibou utilise le pixel Facebook. Cette technologie permet à Facebook d’identifier, parmi les visiteurs de WPHibou, ceux qui possèdent un compte Facebook. Cette stratégie est utilisée à des fins marketing, afin de proposer, éventuellement,  des publicités ciblées sur les pages Facebook des utilisateurs.

Utilisation et transmission de vos données personnelles

Durées de stockage de vos données

Si vous laissez un commentaire, le commentaire et ses métadonnées sont conservés indéfiniment. Cela permet de reconnaître et approuver automatiquement les commentaires suivants au lieu de les laisser dans la file de modération.

Pour les utilisateurs et utilisatrices qui s’enregistrent sur notre site (si cela est possible), nous stockons également les données personnelles indiquées dans leur profil. Tous les utilisateurs et utilisatrices peuvent voir, modifier ou supprimer leurs informations personnelles à tout moment (à l’exception de leur nom d’utilisateur·ice). Les gestionnaires du site peuvent aussi voir et modifier ces informations.

Les droits que vous avez sur vos données

Si vous avez un compte ou si vous avez laissé des commentaires sur le site, vous pouvez demander à recevoir un fichier contenant toutes les données personnelles que nous possédons à votre sujet, incluant celles que vous nous avez fournies. Vous pouvez également demander la suppression des données personnelles vous concernant. Cela ne prend pas en compte les données stockées à des fins administratives, légales ou pour des raisons de sécurité.

Transmission de vos données personnelles

Les commentaires des visiteurs peuvent être vérifiés à l’aide d’un service automatisé de détection des commentaires indésirables.

Informations de contact

Vous pouvez faire votre demande en envoyant un message à l’aide du formulaire de contact du site.

Informations supplémentaires

Comment nous protégeons vos données

Les données recueillies sont stockées par le sous-traitant GETresponses, dont la politique de confidentialité est disponible ici en  version traduite en Française et ici en version originale.

wphibou.com utilise le pixel Facebook. Les données recueillies sont stockées par Facebook dont la politique de confidentialité est accessible ici.

Paiement sécurisé: WPHibou utilise les services de Paypal et/ou  de Stripe pour sécuriser les paiements. Ces deux sociétés sont parmi les leaders mondiaux en la matière, et présentent toutes les garanties de protection des consommateurs.

Vos données personnelles sont conservées de manière confidentielles et ne sont ni cédées ni vendues à des tiers.

Opérations de marketing automatisé et/ou de profilage réalisées à l’aide des données personnelles

Votre e-mail est collecté pour vous faire parvenir nos nouveaux articles, nouvelles vidéos et nos offres commerciales, dans le strict respect de la réglementation européenne sur la collecte des données.

Vos données ne seront jamais revendues à des tiers.

Vos données peuvent être classées selon vos clics réalisés dans les mails afin d’apporter un contenu adapté dans les mails suivants.

Dans tous les mails vous retrouverez un lien de désabonnement, vos données seront alors supprimées.

Cela ne prend pas en compte les données stockées à des fins administratives, légales ou pour des raisons de sécurité.

Save settings
Cookies settings