Optimisez vos pages Elementor pour le Responsive Mobile (2021)

Voici le guide le plus complet et le plus appliqué pour optimiser vos pages Elementor pour le Responsive mobile.

L’objectif est d’afficher nos pages Elementor parfaitement quelle que soit la taille de l’écran de nos visiteurs.  

 

Premièrement je vais vous montrer comment activer le mode responsive d’Elementor.

Ensuite sur quels paramètres exactement il faut jouer pour faire des réglages mobiles de sa page. 

Enfin des techniques plus avancées pour des pages parfaites. 

 

 

C’est parti 

 

Pourquoi vous devez avoir des pages Elementor responsives Mobiles

 

Deux raisons principales :

Lorsque l’on créé des pages Elementor Responsive mobile, tous les éléments qui composent la page se réorganisent. 

Sections, colonnes, widgets. 

Et deux choses importantes : 

1. Le trafic mobile (37,4%) dépasse maintenant le trafic desktop (22,6%).
2. Google va indexer votre page mobile en premier. Pas de responsive = pas de référencement. 

 

Donc.

Si vous voulez que vos visiteurs restent sur vos pages, toutes les informations doivent donc être accessibles et lisibles sur mobile.

Si vous voulez atteindre la première page du moteur de recherche, vos page Elementor doivent être responsive mobile.

C’est simple.

 

 

 

Comment créer des pages Elementor responsive mobile ?

 

C’est quelque chose d’assez simple avec Elementor.

Le constructeur intègre un éditeur smartphone et tablette permettant de faire des réglages spécifiques sur nos pages.

On a 3 choses à paramétrer.

 

Les paramètres Elementor pour créer des pages Responsive mobile :

 

Pour créer des pages Elementor responsive mobile on utilise principalement 3 éléments de la page :

• Les marges internes et externes des sections, colonnes et widgets Elementor.
• Les tailles des typographies et des éléments type Titres, ou boutons.
• L’organisation de la page, en modifiant l’ordre des colonnes ou en affichant des éléments exclusivement sur un appareil et en les masquant sur d’autres.

Pour commencer, nous allons optimiser pour les écrans de smartphones, la page Elementor suivante :  

 

 

Rendu ok sur ordinateur et faite intégralement avec Elementor. 

Mais regardez ce qu’il se passe quand on switch sur mobile. 

 

 

Passer l’éditeur Elementor en Responsive Mobile.

 

Un seul clic sur l’icône responsive.

Sur une page Elementor, par défaut l’affichage est prévu pour l’ordinateur (Desktop).

Votre Editeur Elementor devrait ressembler à ça :

 

 

Choisir le mode responsive de l’éditeur d’Elementor

 

Pour avoir la vue Elementor Responsive Mobile, cliquez en bas à gauche sur l’icône Mode responsive :  

 

 

Puis en haut de l’éditeur Elementor, vous pouvez sélectionner la vue Mobile, Tablette ou Ordinateur de l’éditeur.

En cliquant sur Mobile, on passe l’éditeur d’Elementor en mode smartphone :  

 

 

C’est tout.

Vous pouvez alors naviguer rapidement entre la vue mobile, tablette et smartphone d’Elementor.

Et même régler précisément la taille de l’écran soit en haut dans W et H, soit en cliquant sur les bords de l’écran pour les déplacer.  

Avant de commencer :

 

Définir le point de rupture responsive d’Elementor

 

A quoi ça sert ?

Le point de rupture est le moment ou votre page passe d’un affichage ordinateur à un affichage tablette puis mobile.

Lorsque la largeur de l’écran diminue ou augmente, Elementor affiche automatiquement votre page selon le point de rupture.

Par défaut le point de rupture est bon. 

Mais si vous tenez vraiment à modifier le point de rupture de votre page Elementor il suffit d’aller dans : Icône Hamburger > Réglages du site > Mise en page > Point de rupture   

 

 

Vérifier sur quel appareil (mobile, tablette, ordinateur) sont réalisés les réglages :

 

Le point le plus important du tuto. 

Si vous cliquez sur un élément vous allez voir une icône mobile.

Par exemple ici si je clique sur le titre et dans typographie, on voit bien sur Taille, l’icône mobile :  

 

 

Cela signifie que toutes les modifications que vous effectuerez sur ce paramètre n’affectera que la version mobile.

Donc si là on indique une taille, cette taille ne sera appliquée que sur la version smartphone.

Les Sections, colonnes et Widgets peuvent donc être paramétrés indépendamment sur la version Elementor Desktop et Elementor Responsive mobile.  

Par contre…

 

Paramètres et réglages Elementor non responsive

 

Attention, certains paramètres n’ont pas l’icône responsive mobile.

Si vous modifiez le paramètre cela va affecter la version mobile mais aussi tablette et ordinateur de votre page Elementor.

C’est le cas pour les paramètres Graisse, transformation ou style dans Typographie par exemple, qui ne sont pas responsifs.

Cela signifie qu’ils sont identiques sur Ordinateur, Tablette et Smartphone.  

 

 

Donc faites toujours attention à ça quand vous touchez un paramètre Elementor : 

Quel version de la page suis-je en train de modifier ?

Très important donc.

 

Donc voila comment passer l’éditeur pour avoir une vue Elementor responsive mobile.

Et voilà également comment s’assurer que l’on paramètre nos éléments uniquement pour les écrans de smartphones (sans modifier la version Ordinateur de notre page Elementor).

 

Maintenant on rentre dans le vif su sujet : 

Comment optimiser cette page faite avec le constructeur Elementor pour l’afficher parfaitement sur les écrans de smartphones.  

 

 

 

Optimiser les sections Elementor pour le responsive

 

Le principe est simple :

Dans l’ordre de priorité, on commence par l’élément le plus grand et on va au plus petit.

Donc dans cet ordre, on va optimiser pour les smartphones et les tablettes :

Les Sections Elementor, puis les Colonnes puis les Widgets.  

 

 

Pourquoi ?

Cet ordre permet d’obtenir des résultats en responsive mobile les plus fluides et rapides sur nos pages Elementor.

La technique est très simple.

On prend chaque section de notre page et on l’optimise dans l’ordre suivant :

1. Les marges de la section
2. Les marges de la colonne
3. Les marges et paramètres des widgets

 

Concrètement, voilà ce que vous devez faire :

 

Optimiser les marges de la section :

 

Au niveau de la section on va généralement simplement jouer sur les marges.

Donc on clique sur une section et dans l’onglet Avancé > Marge, on délie les valeurs : (l’icône de la chaine doit être blanche comme sur l’image ci-dessous) :  

 

 

Cela va nous permettre d’obtenir deux choses :

1. Automatiquement supprimer les marges du haut et du bas de nos sections (dans la majorité des cas cela suffit pour avoir un bel affichage sur mobile).
2. Pouvoir régler indépendamment les unes des autres les marges du haut ou du bas et donc faire des réglages plus fins sur petits écrans.

 

Optimiser les marges interne des sections Elementor

 

On fait la même chose pour les marges interne des sections Elementor.

On délie les marges.

Généralement sur mobile on va mettre au moins 15 pixels en marge interne à Gauche et à Droite.

C’est une sécurité pour éviter d’avoir un élément qui colle le bord de l’écran :  

 

 

Maintenant la section est optimisée.

On voit qu’on a des problèmes avec le titre qui déborde à droite à cause de nos marges.

On va l’optimiser au moment de régler le responsive mobile des Widgets.

Passons d’abord aux colonnes.    

 

 

Optimiser les colonnes Elementor pour le responsive

 

Pour les colonnes on va faire la même chose, on va gérer les marges.

On va délier les valeurs des marges internes et externes :  

 

 

Ensuite généralement on ramène toutes les marges à zéro et on effectue les réglages sur les marges internes uniquement.

On va ainsi pouvoir régler très précisément l’affichage pour la vue smartphone :  

 

 

En ne travaillant que sur les marges internes, on va réellement simplifier les réglages de nos pages Elementor.

Si on doit améliorer le responsive mobile de nos pages, on saura exactement quels réglages effectuer.

Maintenant que les colonnes sont optimisées, passons aux Widgets.    

 

 

Optimiser les widgets Elementor pour le responsive

 

Au niveau du Widget, on va devoir généralement régler les marges et la taille.  

 

Vérifier les marges Mobile des widgets Elementor

 

Exactement comme précédemment, on délie les marges et on les met à zéro.

En effet, les marges sont réglées au niveau des sections et des colonnes, donc on ne multiplie pas les réglages.

Si après avoir supprimé les marges des widgets le rendu responsive mobile n’est pas bien, il suffit de régler à nouveau les marges interne de la colonne Elementor :  

 

 

 

Régler la taille Responsive Mobile des Widgets

 

Ensuite on va régler la taille des widgets pour le mobile.

Par exemple si je souhaite le titre sur une seule ligne comme pour l’ordinateur, on peut régler la taille de la police pour le la réduire sur les petits écrans :  

 

 

Ici c’est un Titre mais on fait la même chose pour la taille d’une image par exemple.

Et voilà.

On se retrouve avec notre première section Elementor entièrement optimisée pour le responsive mobile.

Il suffit de répéter l’opération en commençant toujours par les Sections puis les Colonnes et après seulement les Widgets.

On optimise ainsi l’ensemble de notre page Elementor en responsive mobile.  

 

 

Voyons maintenant les cas particuliers à travers les réglages avancés.  

 

 

 

Réglages avancés responsive avec Elementor

 

Dans certains cas particuliers, vous allez devoir faire des réglages responsive plus avancés sur vos pages Elementor.

Et ces techniques vont précisément vous y aider. 

Nous allons voir en 4 points ultra-utiles, comment :

1. Masquer un élément de notre page Elementor sur un appareil en particulier (Ordinateur, Tablette ou Mobile)
2. Inverser l’ordre des colonnes sur smartphone ou Tablette
3. Faire des colonnes multiples (double ou triple) sur mobile
4. Travailler en pourcentages plutôt qu’en pixels pour un responsive parfait

 

Masquer un élément Elementor sur un appareil (ordinateur, tablette, mobile)

 

Ok, parfois il y a des éléments de notre page qui ne servent à rien sur mobile. 

Et qu’on veut juste masquer.

Comment ?

Elementor nous offre la possibilité de masquer n’importe quel élément (Section, Colonne ou Widget) sur un appareil en particulier.

Par exemple nous avons cet espaceur qui prend toute la place sur l’écran (vue téléphone) :  

 

 

Voyons comment le masquer.

Première option c’est de régler la taille pour le mobile (on a l’icône mobile donc on peut le faire).

Mais la seconde option, c’est simplement de ne pas l’afficher sur Mobile.

Pour ça on va dans l’onglet Avancé > Responsive et là on va pouvoir sélectionner pour quel appareil est-ce qu’on souhaite afficher l’élément :  

 

 

L’élément est grisé pour indiquer qu’il est masqué sur la vue actuelle, ici le mobile.

Et si on regarde le rendu, on a bien l’élément qui n’apparaît plus sur l’écran du smartphone :  

 

 

Voila.

Et on peut faire ça avec n’importe quel widget mais également avec des sections entières, des colonnes, etc.

Donc cela va nous permettre d’avoir des éléments de notre pages Elementor exclusivement créés pour les téléphones portables, les tablettes ou les ordinateurs.  

Maintenant passons à la technique numéro 2.

 

Inverser l’ordre des colonnes sur mobile ou tablette

 

C’est quelque chose d’ultra utile.

Par exemple on a, sur ordinateur, 3 colonnes :  

 

 

On a donc deux photos et un titre.

Le fait de mettre le titre à droite peut bien rendre sur ordinateur.

Mais cela devient incohérent sur mobile où il apparaît en dessous des deux photos.  

 

 

Elementor va nous proposer d’inverser l’ordre des colonnes sur mobile.

Pour ça il suffit de cliquer sur la section contenant nos colonnes et dans Avancé > Responsive > Inverser l’ordre des colonnes (Mobile) :  

 

 

Voilà donc comment on inverse l’ordre de colonnes lorsque leur affichage smartphone devient incohérent.  

Passons à la troisième technique. 

 

Faire des doubles colonnes sur mobile :

 

Cette technique est celle qui vous permettra d’avoir des pages Elementor vraiment belles sur mobile.

Sur ordinateur on peut aligner des colonnes les unes à côté des autres :  

 

 

Mais sur la vue smartphone, les colonnes vont automatiquement se mettre les unes en dessous des autres :  

 

 

Alors comment faire pour garder deux colonnes aussi sur mobile ?

Pour garder deux colonnes sur mobile, il suffit de cliquer sur la première colonne > Onglet Mise en page > Largeur de la colonne > Mettre 50% :  

 

 

Et de faire la même chose sur la seconde colonne et automatiquement, les colonnes Elementor vont s’aligner l’une à côté de l’autre sur la vue mobile :  

 

 

Le rendu responsive mobile est beaucoup plus beau avec la double colonne.  

La page Elementor mobile est beaucoup plus belle maintenant.

Enfin dernière technique pour gagner beaucoup de temps. 

 

Travailler en pourcentages plutôt qu’en pixels :

 

Nous avons par exemple une section sur ordinateur avec des marges externes et internes en pixels :  

 

 

Le rendu est parfait sur ordinateur mais lorsqu’on passe sur smartphone, cela ne va pas, les marges en pixels vont venir déformer le rendu de la section et écraser le contenu.  

 

 

Comme on l’a vu précédemment, on pourrait simplement sélectionner la colonne et régler les marges internes uniquement pour le mobile.  

 

 

Cependant il existe une technique plus simple pour créer des pages Elementor responsive mobile et tablette sans réglages supplémentaire : Travailler nos marges en Pourcentage plutôt qu’en pixels, en cliquant sur % :  

 

 

Donc on retourne sur la vue Responsive Ordinateur et dans les marges on clique sur l’icône % et on règle nos marges en pourcentage :  

 

 

Et lorsque l’on repasse sur mobile, les marges étant en pourcentage vont s’adapter automatiquement à la taille de l’écran.

Ainsi 99% du temps, le rendu va être parfait en responsive sur tablette et smartphone sans aucun réglages supplémentaires :  

 

 

Pas mal.

Donc travailler nos pages Elementor avec des marges en pourcentage va nous faire gagner énormément de temps et nous assurer que nos pages ont un rendu parfait directement quel que soit la taille de l’écran.  

 

 

 

Créer un menu Elementor responsive mobile

 

Le menu mobile est un des points crucial de vos pages Elementor. 

Si vous avez un thème responsive, il se règle au niveau du thème. 

Si vous l’avez créé directement avec Elementor, il se gère dans les réglages mobile Elementor.

On va voir les deux.

 

Modifier le menu avec un thème WordPress responsive mobile

 

Si vous utilisez un thème responsive comme OceanWP par exemple, l’intérieur de vos pages sera géré par Elementor tandis que le menu et le footer seront gérés par le thème.

On va pouvoir régler le menu en responsive mobile directement depuis le Tableau de bord WordPress. 

Dans ce cas si le thème est bien Responsive mobile, il suffit d’aller dans Tableau de bord > Apparence > Personnaliser.  

 

Modifier la taille du logo du site sur mobile :

Ensuite sous En-tête, on va pouvoir modifier le logo pour le rétrécir sur mobile (Logo max width)  

 

 

Modifier le menu sur mobile

Et toujours dans En-tête > Modifier le menu On peut en bas sélectionner le type d’affichage : Ordinateur, Tablette et Smartphone pour effectuer les réglages de notre menu :  

 

 

Voila donc pour les templates WordPress responsive mobile.

Voyons maintenant pour Elementor.

Si par exemple on se retrouve avec une page entièrement générée sous Elementor et qui ne contient pas de header et footer provenant d’un thème.  

 

Créer et modifier un menu responsive mobile avec Elementor

 

Dans sa version gratuite, Elementor ne permet pas de créer de menus, c’est un widget réservé à la version pro d’Elementor.

On va utiliser l’addon Elementor Elements Kit :  

 

 

Qui contient gratuitement le widget Nav Menu :  

 

 

Ce widget va automatiquement géré le responsive mobile.

Il permet de créer un menu responsif qui s’affiche sous la forme d’une icône hamburger sur mobile :  

 

 

Pour aller plus loin, voici un tuto pour savoir comment créer un menu responsive mobile avec la version gratuite d’Elementor de A à Z.    

Maintenant vous savez tout sur le responsive mobile Elementor.

Il ne reste plus qu’à tester le scrore responsive mobile de votre page.

 

Tester le score responsive mobile d’une page de son site :

 

Une fois nos pages Elementor totalement optimisées sur les smartphones, on refait exactement les mêmes choses sur tablettes (généralement beaucoup moins compliqué) et on obtient un site internet entièrement responsive mobile.  

 

 

Google porte tellement d’importance au mobile qu’il a mis en place un test Mobile Friendly.

Allez faire le test Google Mobile Friendly : search.google.com/test/mobile-friendly

Et entrer l’url de la page que l’on vient d’optimiser pour la tester :  

 

 

Et voilà ce que vous devez avoir. 

Sinon optimisez ce qui ne va pas et recommencez.

 

 

 

Responsive Mobile Elementor, conclusion

 

Elementor nous offre tous les outils pour optimiser nos pages en responsive mobile et tablettes.

Une chose à retenir : 

Si vous passez un peut de temps à optimiser vos pages Elementor pour le responsive mobile, vous allez :

1. Augmenter le temps passé sur vos pages 
2. Les faire se référencer sur Google 
3. Augmenter votre trafic 
4. Et donc augmenter votre conversion

 

Un dernier Pro tips :

Consultez le Hub Elementor qui regroupe touts les guides sur l’utilisation d’Elementor pour créer votre site internet.    

 

Et maintenant à vous de jouer !

 

Si ce guide vous a été utile, partagez-le !

Et laissez-moi un commentaire si vous avez des questions, pour dire bonjour, ou donner votre avis.

 

A bientôt,

Thomas.