Créer un menu Elementor personnalisé : gratuit Tuto 2020

Les Meilleures Extensions WordPress > Créer un menu Elementor personnalisé : Elementor Addons gratuits

Les addons pour Elementor sont des extensions qui, une fois installés sur notre site WordPress, vont ajouter des nouveaux Widgets à Elementor.

Nous allons les utiliser pour créer un menu Elementor entièrement personnalisé avec la version Gratuite du constructeur WordPress.

Créer un menu avec la version gratuite d'Elementor

Dans sa version gratuite, Elementor offre des widgets de base et des limitations.

Pour faire un menu Elementor avec la version gratuite, ce n’est juste pas possible.

On peut ajouter par exemple plusieurs colonnes et reconstituer un menu mais dès qu’il évolue, ça va être un travail monstre pour modifier son menu sur toutes ses pages Elementor.

Utiliser les addons Elementor gratuits pour créer son menu

Heureusement il existe une multitude d’addons qui vont nous permettre de débloquer des Widgets et de créer notamment un menu personnalisé avec la version gratuite d’Elementor.

Voyons tout de suite 2 addons Elementor de base que tous les utilisateurs d’Elementor Free devraient avoir :

Donc si vous voulez débloquer les fonctionnalités d’Elementor et ajouter un menu à vos pages, suivez le guide :

Comment installer des addons Elementor et Ajouter un menu Elementor Gratuit

Voici ce que nous allons voir.

Si vous êtes pressé, voila les liens rapide pour aller voir ce qui vous intéresse.

Comment installer des addons et ajouter un menu Elementor :

Télécharger et installer Elements Kit Lite
Utiliser le widget Nav Menu pour créer un menu Elementor
Installer Essential Addons for Elementor
Liste complète des Addons recommandés par Elementor

Ça vous parait bien ? Alors c’est parti :

ETAPE 01 :

Installer Elements Kit Lite, addon pour Elementor WordPress

Elements Kit Lite est un des deux meilleurs Addons pour Elementor qui existe.

Rien que dans sa version gratuite il offre déjà 40 Widgets.

C’est un des rares à proposer également un Widget Nav Menu qui nous permet d’ajouter un menu Elementor version gratuite.

Et tous les Widgets d’Elements Kit sont de très grande qualité.

Ajouter l’extension ElementsKit Lite à son WordPress

Les addons Elementor sont des extensions WordPress.

Donc on va chercher Elements Kit Lite dans la bibliothèque d’extensions WordPress.

Ça se passe dans Tableau de bord > Extensions > Ajouter

On cherche Elements Kit Lite > Installer > Activer :

Et une fois l’extension activée, il ne reste plus qu’à ouvrir une page Elementor.

Accéder aux Widgets de l'addon Elements Kit Lite

Lorsqu’on installe un Addon à Elementor, il va installer ses nouveaux Widgets directement dans le panneaux des Widgets d’Elementor.

Donc sur une page Elementor, dans la liste des Widgets, on a un nouveau menu ELEMENTSKIT contenant près de 40 Widgets accessibles :

On les reconnait parce qu’ils portent un petit label EKIT (pour Elements Kit).

Ces Widgets sont immédiatement utilisable sur vos pages Elementor.

Utiliser les Widgets d'Elements Kit Lite Elementor

Sans grande surprise, ils s’utilisent exactement comme pour les Widgets Elementor.

Si on souhaite les utiliser pour construire sa page Elementor, on les fait glisser où on veut sur sa page :

Et ils se paramètrent exactement comme les widgets Elementor classiques : Dans le panneau de gauche avec les onglets Contenu, Style et Avancé.

Maintenant qu’on sait comment installer un Addon pour Elementor, il est temps de voir comment créer un menu sur nos pages Elementor (version gratuite).

Ajouter un menu Elementor avec le Widget Nav Menu

Nav Menu est un Widget d’Elements Kit Lite.

C’est précisément ce Widget qui nous permet d’ajouter un menu à nos pages Elementor.

Le gros avantages d’utiliser ce Widget pour le faire, c’est que le menu se responsive mobile.

Voyons comment créer un menu Elementor.

Donc pour ajouter un menu a la version gratuite d’Elementor, on va utiliser le Widget NavMenu d’ElementsKit Lite

Dans Elementor on cherche Nav Menu :

A droite il s’agit du Widget de menu Elementor bloqué et réservé à la version Pro d’Elementor.

A gauche sous la mention EKIT, on retrouve le même widget Nav Menu utilisable pour créer un menu avec la version gratuite d’Elementor.

On le fait glisser à l’endroit de la page où on souhaite faire apparaître son menu :

Et maintenant qu’il est sur notre page, on va voir les paramètres.

Paramétrer son menu Elementor avec Nav Menu

Dans l’onget Contenu, on va sélectionner le menu que l’on souhaite faire apparaitre sur notre page Elementor.

Sélectionner le menu WordPress a faire apparaitre sur la page Elementor :

On va donc avoir ici la liste de nos menus WordPress.

Si votre liste est vide c’est que vous n’avez pas encore créé de menu WordPress.

Pour en créer un c’est très simple : suivez le guide ici puis revenez sur cet article pour terminer votre menu Elementor.

Donc on sélectionne le menu à faire apparaitre sur notre page Elementor :

Et il s’agit des menus qu’on a créé dans Apparence > Menu.

Ainsi une fois le menu paramétré et dupliqué sur toutes nos pages, il va évoluer automatiquement dès qu’on modifie le menu via Apparence > Menu.

Sélectionner l'icône de la page d'accueil sur le menu mobile Elementor

Element important, pour la version mobile de notre menu, on choisit une icône.

Attention ce n’est pas l’icône type hamburger (l’icône du menu en version mobile).

Quand on clique sur le menu mobile Elementor, on a une icône en haut à gauche qui généralement redirige au clic vers la page d’accueil.

C’est cette icône là que l’on paramètre.

On choisit également la page vers laquelle elle redirige au clic.

Modifier les couleurs du menu Elementor :

Pour modifier les couleurs des éléments du menu il suffit de se rendre dans l’onglet Style :

On va pouvoir changer l’apparence des onglets, la typographie, la taille et la couleur des boutons :

Normal
Au survol
Actif

Modifier la couleur de l'icône hamburger du menu mobile Elementor

On rentre dans quelque chose d’un peu plus compliqué.

Si vous n'utilisez pas Hello Theme (thème Elementor) :

On rentre dans quelque chose d’un peu plus compliqué.

Si vous utilisez un thème différent du thème Elementor : Hello Theme d’Elementor, alors votre icône hamburger du menu mobile va prendre l’apparence de votre thème.

Donc normalement vous n’aurez rien à changer.

Si vous utilisez Hello Theme d'Elementor :

Par contre si vous utilisez Hello Thème qui est le theme d’Elementor, il faut impérativement paramétrer les couleurs du thème.

Parce que Hello Theme est un thème nu, et si on veut que l’icône de menu mobile prenne une couleur spécifique, cela se passe au niveau du thème.

Donc enregistrez votre page Elementor.

Ensuite dans le menu d’Elementor on clique sur le menu > Style du thème :

Et dans Boutons, on va paramétrer le style de nos boutons par défaut.

Donc chaque fois que vous ajouterez un bouton dans Elementor, par défaut il aura le style tel que défini ici.

Attention, cela peut modifier le design de certains boutons sur votre site.

Donc une fois les modifications effectuées, vérifiez bien que rien n’a changé sur les boutons de vos pages Elementor !

On se retrouve ainsi avec la version Desktop de notre menu Elementor :

Et la version mobile du menu Elementor :

Donc voila comment créer et paramétrer un menu sur ses pages Elementor, même lorsqu’on utilise la version gratuite.

Il ne reste plus qu’à faire clic droit sur le menu> Enregistrer comme modèle.

Puis d’aller l’ajouter à chacune de nos pages Elementor.

ETAPE 03 :

Bonus : Installer Essential Addons pour Elementor WordPress

Essential Addons for Elementor est un autre addon absolument indispensable.

Parmi les 40 Widgets gratuits qu’il va ajouter à Elementor, on retrouve :

Le Contact Form 7 : très intéressant pour intégrer n’importe où des formulaires de souscription à la newsletter ou de contact.
Facebook Feed va vous permettre de faire remonter sur une page vos publications Facebook.
Un autre Widget intéressant est également Dual color Headline. Il permet d’avoir deux couleurs dans un même titre. Ce qui est très intéressant quand un titre chevauche un fond blanc et une image noire par exemple.

Ajouter l’extension Essential Addons à WordPress

C’est une extension donc on va dans Tableau de bord > Extensions > Ajouter

On cherche Essential Addons for Elementor > Installer > Activer :

Une fois actif, on se rend dans Elementor :

Accéder aux Widgets Essential Addons dans Elementor

Et dans la liste des Widgets, un nouvel onglet ESSENTIAL ADDONS est apparu avec toute un liste de nouveaux Widgets prêt à être utilisés :

Ils s’utilisent exactement comme pour les Widgets Elementor.

Pour construire sa page en les utilisant, on le fait glisser sur sa page.

Et on le paramètre dans le menu latéral gauche :

Voila donc comment installer des addons avec Elementor.

Il ne nous reste plus qu’à voir la liste des addons conseillés par Elementor.

ETAPE 04 :

Bonus 2 : Les addons recommandés par Elementor

Les Addons vont ajouter de nombreux Widgets à Elementor et nous permettre de réellement augmenter les fonctionnalités de nos pages.

Elementor a mis une liste des Addons recommandés sur son site internet.

Les addons Elementor recommandés

Il ne s’agit pas d’une liste exhaustive mais simplement de quelques addons qu’Elementor recommande.

La liste est disponible directement sur le site à cette adresse :

elementor.com/addons

Alors faites vous plaisir !

Installez-les, testez et gardez ceux dont les Widgets vous intéressent le plus.

ETAPE 05 :

Créer un menu Elementor avec les addons gratuits : Conclusion

Grace aux Addons, on va pouvoir augmenter les fonctionnalités de nos pages Elementor même avec la version gratuite de l’outil.

On sait maintenant comment installer des addons, comment créer un menu Elementor responsive mobile et ou trouver de nouveaux addons pour Elementor.

Cet article vous a été utile ? Partagez-le et si vous avez des questions ou des remarques, laissez un commentaire.

En tout cas merci de suivre Avalanche Mate, des guides sont publiés régulièrement.

Donc abonnez vous pour les recevoir dans votre boîte mail.

A bientôt !

Thomas

Partager l'article :

Laisser un commentaire Annuler la réponse