Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur reddit

Optimisez vos pages Elementor pour le Responsive Mobile (2021)

Rendez vos pages et votre menu Elementor entièrement responsive mobile et tablette.

Accédez à l’éditeur Elementor
en mode responsive mobile
Optimisez votre page pour le responsive
Et testez votre site
Créez un menu mobile
et des réglages avancés

Auteur : 

Thomas

 | 

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. 

 

Elementor Responsive Mobile Guide complet

Téléchargez-le pour optimiser vos pages Elementor pour le Responsive mobile et tablettes.

Entrez votre email et recevez-le au format PDF.

Nous n'avons pas pu confirmer votre inscription.
Votre inscription est confirmée.

 

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.

 

elementor responsive mobile banner

 

 

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 :  

 

page elementor à optimiser en responsive mobile

 

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 :

 

elementor mode ordinateur page  

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 :  

 

Icone responsive mobile elementor interface

 

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 :  

 

Elementor interface mode responsive mobile

 

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   

 

Point de rupture Elementor  

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 :  

 

icone mobile élément Titre Elementor

 

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.  

 

Elementor paramètres non responsive mobile

 

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.  

 

Elementor Responsive Mobile Guide complet

Téléchargez-le pour optimiser vos pages Elementor pour le Responsive mobile et tablettes.

Entrez votre email et recevez-le au format PDF.

Nous n'avons pas pu confirmer votre inscription.
Votre inscription est confirmée.

 

 

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.  

 

ordre optimisation responsive mobile elementor

 

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) :  

 

Délier les valeurs marges Section Elementor  

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 :  

 

marge interne section elementor sur mobile

 

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 :  

 

optimiser les marges colonnes elementor mobile

 

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 :  

 

optimiser les marges colonnes elementor mobile

 

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 les marges resposive mobile des widget 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 :  

 

régler la taille des widgets elementor mobile

 

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.  

 

Page Elementor optimisée en responsive Mobile

 

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

 

Elementor Responsive Mobile Guide complet

Téléchargez-le pour optimiser vos pages Elementor pour le Responsive mobile et tablettes.

Entrez votre email et recevez-le au format PDF.

Nous n'avons pas pu confirmer votre inscription.
Votre inscription est confirmée.

 

 

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) :  

 

Espaceur Elementor sur mobile  

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 :  

 

masquer un element sur mobile ou tablette elementor

 

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 :  

 

masquer un element sur mobile ou tablette elementor

 

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 :  

 

3 colonnes Elementor ordinateur  

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.  

 

alignement 3 colonnes Elementor sur Mobile

 

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) :  

 

inverser l'ordre des colonnes Elementor 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 :  

 

Colonnes multiples ordinateur Elementor  

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

 

alignement colonne responsive mobile Elementor 

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% :  

 

largeur colonne mobile 50% elementor  

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 :  

 

alignement colonne mobile elementor 

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 :  

 

sections elementor ordinateur marge 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.  

 

marge en pixel sur mobile Elementor

 

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.  

 

réglage marge en pixels sur 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 % :  

 

marge en pourcentage Elementor

 

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 :  

 

réglage marge responsive mobile Elementor 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 :  

 

marge responsive mobile en pourcentage

 

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.  

 

Elementor Responsive Mobile Guide complet

Téléchargez-le pour optimiser vos pages Elementor pour le Responsive mobile et tablettes.

Entrez votre email et recevez-le au format PDF.

Nous n'avons pas pu confirmer votre inscription.
Votre inscription est confirmée.

 

 

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)  

 

menu responsive mobile wordpress  

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 :  

 

menu responsive mobile wordpress

 

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 :  

 

addon elementor kit wordpress plugin  

Qui contient gratuitement le widget Nav Menu :  

 

widget nav menu gratuit elementor kit

 

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 :  

 

icone hamburger elementor mobile responsive

 

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.  

 

elementor responsive mobile banner

 

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 :  

 

Google Responsive mobile test

 

Et voilà ce que vous devez avoir. 

Sinon optimisez ce qui ne va pas et recommencez.

 

Elementor Responsive Mobile Guide complet

Téléchargez-le pour optimiser vos pages Elementor pour le Responsive mobile et tablettes.

Entrez votre email et recevez-le au format PDF.

Nous n'avons pas pu confirmer votre inscription.
Votre inscription est confirmée.

 

 

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.

18 réponses

  1. Bravo! et Merci! des heures d’ essais et des recherches économisés. Je vais de ce pas voir si sous oceanwp je peux modifier mon affichage de la page.

    1. Merci beaucoup Harch ! Effectivement Elementor permet vraiment de créer des design personnalisés et de s’affranchir des templates WordPress un peu trop rigides.

  2. Bonjour Thomas,

    Merci beaucoup pour ce tutoriel archi complet! j’ai une question sur le thème utilisé, tu utilises OCEANWP et il y a l’air de n’avoir aucun déréglage de la typographie lorsque tu l’utilises, en gros les réglages du thème et du page builder sont identiques. J’utilise KADENCE comme thème et je n’arrive pas du tout à améliorer la responsivité tablette et mobile. Mes réglages ELEMENTOR sont bons et propres mais dès que je visualise via le thème KADENCE, tout est de travers et je n’arrive pas à régler l’ensemble correctement. Peux-tu m’aider ? merci grandement pour ça!;-)
    Maxime

    1. Bonjour Maxime, merci pour ton commentaire 🙂
      Je ne connaissais pas Kadence alors j’ai essayé sur un site test et le responsive Elementor fonctionne parfaitement sur les sections que j’ai créé.
      Si tu veux tu peux m’envoyer ton site avec plus d’explications via le formulaire de contact.

    1. Merci Alexis !
      Une autre méthode c’est d’utiliser les blocs de la bibliothèque Elementor lorsque l’on créé ses pages.
      Ils sont déjà optimisés mobile et tablette

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Elementor Responsive Mobile Guide complet

Elementor Responsive Mobile, le guide complet dans votre boîte mail.

Récupérez le guide en PDF et gardez-le à portée de main, pour optimiser vos pages.