Avalanche Mate

Dans ce tuto, nous allons optimiser nos pages WordPress en créant des pages Elementor Responsive mobile.

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

Le principe du responsive Mobile avec Elementor :

Lorsque l’on créé des pages Elementor Responsive mobile, les éléments qui composent la page (les sections, les colonnes et les widgets), se réorganisent pour un affichage fluide pour nos visiteurs.

Enfin avoir des pages Responsive mobile est un impératif pour Google. Si vous voulez atteindre la première page du moteur de recherche, vous devez impérativement avoir un site responsif. C’est un critère technique déterminant en SEO. 

elementor responsive mobile banner

Alors comment créer des pages Elementor responsive mobile ?

C’est quelque chose d’assez simple car Elementor intègre un éditeur smartphone et tablette permettant de faire des réglages spécifiques sur nos pages.

Cependant il est essentiel de bien comprendre comment optimiser ses pages pour les smartphone afin d’avoir un affichage fluide et parfait.

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

Pour créer des pages Elementor responsive mobile nous allons travailler sur 3 fronts :

  • 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.

Comment créer des pages Elementor responsive mobile ?

Voici les différentes étapes pour rendre nos pages Elementor totalement responsive smartphone et tablette : 

Rendre ses pages Elementor Responsive Mobile :

  1. Passer l’éditeur en responsive mobile
  2. Optimiser les sections
  3. Optimiser les colonnes
  4. Optimiser les widgets
  5. Réglages avancés responsive avec Elementor
  6. Créer un menu Elementor responsive mobile
  7. Tester le score responsive mobile d’une page de son site

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

page elementor à optimiser en responsive mobile

La page est plutôt belle sur Ordintateur et a été faite intégralement avec Elementor.

Vous êtes ici : 
Guides > Optimisez vos pages Elementor pour le responsive mobile

Créer un site internet, SEO, Google Analytics, Emailing...

Accédez aux Guides, pas à pas, pour créer votre site, le booster et l’optimiser. 

Accéder aux Guides

ETAPE 01 :

Passer l’éditeur Elementor en Responsive Mobile.

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

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 Elementor Reponsive mode : mobile tablette ordinateur

Vous pourrez sélectionner la vue Mobile, Tablette ou Ordinateur de l’éditeur.

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

Editeur Elementor en mode responsive mobile

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

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. 

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 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 nous allons voir comment optimiser cette page faite avec le constructeur Elementor pour un affichage parfait sur les écrans de smartphones.

ETAPE 02 :

Optimiser les sections Elementor pour le responsive

Maintenant on va rentrer dans le vif du sujet, avoir des pages Elementor Responsive mobile :

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

Cet ordre permet d’obtenir des resultats 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

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.

ETAPE 03 :

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.

ETAPE 04 :

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. 

ETAPE 05 :

Réglages avancés responsive avec Elementor

Certains cas particuliers, vont nécessiter des réglages plus avancés. 

Dans cette étape du tuto, on va voir plus précisément 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)

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

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

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. 

Inverser l’ordre des colonnes sur mobile ou tablette

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 donner un effet sur ordinateur mais cela devient incohérent sur mobile ou 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. 

Faire des doubles colonnes 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

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.

Travailler en pourcentage 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

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.

ETAPE 07 :

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

On peut ensuite aller faire le test Google Mobile Friendly :

https://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

ETAPE 08 :

Responsive Mobile Elementor Conclusion :

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

Il faut juste suivre quelques recommandations et techniques simples pour pouvoir les optimiser le plus facilement possible.

Le fait de prendre le temps d’optimiser pour mobile vos pages Elementor avant leur mise en ligne va permettre à votre site de mieux se référencer sur les moteurs de recherche, augmenter le temps passé sur vos pages et ainsi augmenter le trafic global de votre site WordPress.

Et maintenant à vous de jouer !

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

Et laissez-moi un commentaire si vous avez des questions ou juste pour donner votre avis !

    A bientôt !

    Thomas

    Partager l'article :

    12 réponses

    5. 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.

      Répondre

      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.

        Répondre

    Laisser un commentaire

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