Le menu Module et le responsive avec Elementor Pro

Le menu Module (intégré à la version Pro d’Elementor) est essentiel dans votre site. Depuis qu’Elementor a quitté le monde de la construction de pages pour devenir un constructeur de thèmes, le menu Module est au centre de toutes les attentions. 

Elementor propose donc énormément d’options de design et de configuration (peut-être parfois même un peu trop).

Dans la vidéo ci-dessus, on fait le point sur ce qui est utile et on regarde comment on peut optimiser l’affichage sur mobile.

Optimiser le rendu de son menu sur mobile

L’image ci-dessus illustre le comportement par défaut du menu Module sur mobile lorsque notre design est composé d’un logo à gauche, et du menu à droite.

Avouez que cela nécessite un peu d’optimisation sur mobile, non ?

Rassurez-vous : c’est très simple !

Pour arriver au résultat de droite, il suffit de sélectionner la colonne et de modifier sa largeur.

En mobile, l’écran étant petit, n’hésitez pas à passer la largeur de vos colonnes à 100 %.

Attention : Ne pas utiliser cette technique trop souvent, car même si le contenu ne s’affiche pas sur le mobile ou la tablette, il est quand même chargé sur votre page. À force de trop faire ces manipulations pour beaucoup de contenu, on risque d’aboutir à des pages au chargement trop long. La connexion sur mobile ne suit pas toujours… mais c’est un autre problème !

responsive*avec-elementor

Utiliser judicieusement les bons types de menus

Comme je l’explique dans la vidéo, il existe trois types de menus avec Elementor.

Voici en bref les configurations que je conseille. 

Allons, si vous le voulez bien, du moins intéressant au plus indispensable :

Le menu déroulant :

Utile uniquement si vous souhaitez que votre menu soit toujours replié sur lui-même.
Je ne le conseille pas, sauf si vous avez un menu très long à afficher en mobile.

Pourquoi ?     
Tout simplement parce que cela oblige vos visiteurs à faire un clic de plus pour afficher un menu. Or, la règle d’or dans l’ergonomie web est : faire le moins de clics possible !

Le menu vertical

Très utile en colonne de droite (ou de gauche) sur votre site.
Le menu vertical est un très bon compagnon du menu principal.

On dit alors (assez logiquement) qu’il s’agit d’un menu secondaire. Un menu d’espace membres ou de sous-section par exemple.

Au niveau de la configuration, je vous déconseille d’activer l’option « bouton de bascule ».
En effet, seul votre menu principal devrait avoir cette option activée : d’une part, car c’est devenu la « norme » sur internet, d’autre part pour éviter de cliquer trop souvent. (Souvenez-vous de la règle d’or de l’ergonomie sur internet : le moins de clics possible.)

Le menu vertical

Ce menu s’adapte bien à toutes les tailles d’écran (à condition de le configurer un minimum).

J’en parle largement dans la vidéo, car c’est, souvent, le type de menu le plus adapté pour un site.

Je vous conseille de l’utiliser dès que vous avez un site avec 4 ou 5 pages.

À noter : il vous faudra certainement modifier un peu la mise en page en mode mobile pour laisser toute la place au menu (cf. première capture d’écran de ce billet).

Pour finir, quelques règles ergonomiques

Attention : tout cela est bien subjectif ! Il s’agit de ma vision.

Évitez d’utiliser trop d’effets dans votre menu, au risque de perdre vos visiteurs.

Typiquement : des séparateurs, des animations trop complexes ou des bordures pour chaque bouton…

Évitez les sous-menus.

Bien qu’Elementor les gère, il vaut mieux limiter l’usage des sous-menus. En effet, ce n’est pas toujours simple pour un visiteur de cliquer sur un item d’une sous section.

 

À la place d’un sous-menu, pourquoi ne pas utiliser menu secondaire (avec un beau menu de type vertical, bien sûr) ? Par exemple, sur un site d’hôtel en ligne : un boson « chambres » mène directement vers une page de type « chambres » avec, à gauche, une colonne qui liste vos types de chambres dans un menu vertical et, à droite, le contenu de votre page.

Une image vaut mieux qu’un long discours :

À vous de jouer !
Facebook
Google+
Twitter
LinkedIn

A propos de l'auteur

Vincent MARY

Vincent MARY

Webmaster et webdesigner depuis 2009 je réalise des formations orientées sur WordPpess et webmarketing sur WPmarket Youtube et tuto.com.

Pour commenter cet article, veuillez vous connecter avec votre compte WPmarket

Ce sujet a 0 réponse, 1 participant et a été mis à jour par  Vincent de WPmarket, il y a 4 mois.

Vous devez être connecté pour répondre à ce sujet.