Le constructeur de page Elementor connaît cette année des évolutions vraiment notables à rebours de l’an dernier où ça n’avançait pas vraiment. La dernière version nous apporte enfin un méga menu totalement construit dans l’éditeur, bien ou pas bien ?
Jusqu’à présent j’ai construit mes mégas menus avec l’extension Max Mega Menu ou WP Mega Menu. Ces 2 solutions sont gérées dans l’administration WP et travaillent dans la page de gestion des menus WP (pas très simple), rien dans Elementor. Dernièrement plusieurs packs gratuits ou payants ont intégrés un méga menu comme Premium Addons for Elementor ou ElementsKit Elementor addons. Il était temps qu’Elementor propose ça directement dans sa version PRO.
Le méga menu d’Elementor PRO : un widget dédié simple à utiliser
Le fonctionnement se rapproche des autres widgets à contenu multiple comme les Onglets, Accordéon, Va et vient ou Diaporama par exemple. Dans la colonne d’édition on va retrouver la rangée supérieure du menu (on n’utilise pas la fonction de menu WP à ce niveau).
Présent dans les fonctionnalités (en version Alpha), ce méga menu fonctionne seulement avec les 2 expériences Elementor suivantes activées : conteneur Flexbox + éléments imbriqués. En effet il se construit à base de conteneurs et utilise la nouvelle fonction d’imbrication de widgets. On est donc encore dans un domaine expérimental, bien réfléchir à son utilisation sur un site en production. De mon expérience c’est plutôt stable.
Une construction limpide pour un méga menu personnalisé
Le gros intérêt de ce méga menu c’est sa construction dans l’éditeur d’Elementor et la possibilité d’inclure n’importe quel widget, c’est un avantage qui peut tourner au désavantage si on ne fait pas attention à ce que l’on embarque ici. Il est impératif de bien comprendre l’impact d’un méga menu sur la structure HTML d’une page, il peut devenir gourmand en ressources alors que son intérêt rédactionnel est quasi nul, attention à ce que vous faites ici.
Avec les fonction de la FlexBox il est facile de répartir les widgets présents dans une section de sous-menu, de définir leurs comportements sur mobile. Chaque section de sous-menu peut recevoir les attributs classiques d’une section : arrière-plan couleur, dégradé ou image (avec superposition), forme de séparation (haute et basse), effet d’apparition… toute la construction est piloté avec les fonctions d’Elementor, de qui réaliser des mégas menus très spécifiques, avec formulaire par exemple, ou avec des données dynamiques : article mis en avant, produit, extrait de publication, etc.
Une méga menu en devenir qui n’est pas encore stable
SI l’expérience est très intéressante elle reste en version Alpha et ne peut pas être encore envisagée sur des sites en production, mais il est impératif de l’essayer si vous souhaitez, à terme, l’utiliser sur vos projets. La prochaine version d’Elementor PRO devrait voir arriver une version plus stable (RC sans doute) avec de nouvelle options : icônes sur les menus, mise en actif de menu d’ancrage au défilement vertical.
Elementor 3.12 introduit une barre d’édition dans la zone d’édition
Autre nouveauté introduite dans cette version d’Elementor : la barre d’édition. A l’instar de nombreux logiciels d’édition de contenu Elementor fait évoluer son interface de gestion pour améliorer l’expérience utilisateur. En effet, la colonne latérale ne pourra recevoir toutes les futures évolutions de constructeur. Plusieurs éléments ou fonctionnalité masquées sont parfois fastidieuse à atteindre, cette barre compte remédier à cette problématique.
L’image ci-dessus provient en réalité de la future version 3.13 à venir (en test chez moi) et cette barre d’édition est vraiment pratique avec les accès rapides suivants (de gauche à droite) :
- Constructeur de thème, historique, préférence de compte, raccourcis clavier et quitter
- Accès aux widgets
- Réglages du site
- Structure (anciennement Navigateur)
- Liste des dernières pages ou modèles Elementor modifiés
- Réglages du site
- Icônes des points responsifs (modifiables dans les réglages du site)
- Champ de recherche (Finder)
- Aide
- Prévisualisation
- Publication, enregistrer en brouillon ou modèle
Sources : la barre d’édition, Elementor Mega Menu.
