CHAPITRE X

Site responsive : paramétrer l'affichage des pages sur mobile

Le trafic mobile va représenter une grande partie, si ce n’est la majorité de notre trafic. 

Un site responsive mobile bien paramétré pour un affichage sur petit écran va être mieux référencé.

C’est donc essentiel d’avoir un bon affichage responsive mobile de nos pages Elementor sur Tablettes et Mobiles. 

Concernant les pages du template WordPress, elles sont responsive de base (donc s’adapte automatiquement sur mobile), par contre on ne peut absolument pas les paramétrer. 

Elementor va nous permettre d’aller très loin dans le paramétrage responsive de nos pages sur mobile. 

On va pouvoir choisir pour chaque section, colonne ou même élément individuel, comment est ce qu’il doit s’afficher sur mobile. 

On va commencer tout de suite. 

Sommaire chapitre 10 :

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

Responsive : vérifier l'affichage de ses pages Elementor sur mobile :

Pour voir ce que rend une page sur mobile, il suffit de l’ouvrir dans Elementor et de cliquer en bas à gauche sur l’icône Mode Responsive : 

Wordpress Elementor responsive mobile mode

Et on peut choisir d’afficher sa page sur mobile, tablette et ordinateur

Ici on choisit mobile :

Wordpress Elementor responsive mobile rendu

Et donc voila le rendu de notre page sur mobile

On remarque déjà plusieurs problèmes d’affichage

  • Le Logo est énorme
  • Le menu est déroulé et devrait se regrouper en icône hamburger
  • les marges des paragraphes et autour des images ne vont pas. 

Il va donc simplement falloir ajuster la tailles des éléments et des marges uniquement pour le mobile. 

Créer un menu responsive pour un affichage mobile de son site

On va commencer par le menu

Un menu sur mobile aura tendance à se regrouper sous la forme d’une icône dite Hamburger

Par exemple voici le menu du site Fubiz.net lorsqu’il est affiché sur ordinateur

Wordpress Elementor responsive mobile modele fubiz

Et voici le menu qui se groupe dans une seule icône

Wordpress Elementor responsive mobile icone menu hamburger

Et lorsqu’on clique sur l’icône on retrouve bien les éléments du menu : 

Wordpress Elementor responsive mobile menu

Donc c’est ça qu’on veut. 

Dans sa version gratuite Elementor ne nous permet pas de créer des menus. 

On a donc créé un menu manuellement nous-même. 

Mais on voit les limites lorsqu’il s’agit d’afficher son site sur mobile. 

Heureusement pour nous, il existe une multitude de plugin WordPress qui ajoutent des fonctionnalités à Elementor

On va donc en installer un. 

Ajouter un plugin de menu à Elementor

Le plugin NavMenu Addon For Elementor va nous permettre de créer un menu dans Elementor

Les options de design vont être un peu limité donc on va voir comment utiliser ce plugin uniquement sur la version mobile de notre site

Parce qu’il va permettre d’avoir un menu qui se regroupe sous la forme d’une icône Hamburger lorsqu’on passe sur mobile

Donc on va dans Tableau de bord > Extensions > Ajouter et dans la barre de recherche on tape : NavMenu Addon For Elementor :

Wordpress Elementor responsive mobile plugin navmenu

Ensuite on Installe et on Active le plugin et on retourne sur sa page Elementor

Dans la barre des Widgets, on a un nouvel onglet qui s’appelle Header Elements et dans lequel on retrouve des éléments de menu qu’on va pouvoir utiliser sur notre page : 

Wordpress Elementor responsive mobile widgets

Designer son menu Elementor

Pour ajouter son menu on va ajouter une nouvelle section contenant une colonne et on va faire glisser dedans le widget Default Navmenu

Wordpress Elementor responsive mobile ajouter menu

Ensuite pour afficher le menu dans l’onglet de paramètres Navigation, sous Select Menu, on va choisir son menu de site fait dans son tableau de bord : 

Wordpress Elementor responsive mobile selection menu

Et on obtient ceci : 

Wordpress Elementor responsive mobile menu

Les onglets qui apparaissent correspondent au menu qu’on a créé dans WordPress. 

Pour coller exactement à l’exemple, on va devoir : 

  • Enlever le menu déroulant de l’onglet Blog affichant les articles
  • Renommer l’onglet A Propos en About
  • Et Ajouter un onglet Book & Product

Donc puisqu’il s’agit du menu tel qu’on l’a défini dans WordPress, on va retourner sur le Tableau de bord pour le paramétrer. 

Donc on retourne dans Tableau de bord puis dans Apparence > Menu : 

Wordpress Elementor responsive mobile menu

Ici on retrouve notre menu WordPress qui est repris par le plugin NavMenu dans Elementor. 

On va donc modifier directement ce menu pour qu’il s’affiche exactement comme on le souhaite :

Premièrement on va supprimer les articles du blog pour ne plus avoir de menu déroulant sous Blog. 

Donc on clique sur l’article, ici Bolivie, les marchés de La Paz, et on clique sur Retirer. 

Wordpress Elementor responsive mobile retirer menu

L’article est enlevé du menu et on réitère l’opération pour l’ensemble des 3 articles présents dans le menu. 

Wordpress Elementor responsive mobile menu

Maintenant on veut renommer l’onglet A propos en About. 

Donc on clique sur la flèche pour déplier l’onglet et on le renomme About :

Wordpress Elementor responsive mobile renommer label

Enfin on veut ajouter un onglet Book & Products comme sur la page de Nathan. 

Un onglet est une page que l’on va lier à un menu. 

Donc on va simplement créer une page qui s’appellera Book & Product, on va la laisser vide (l’idée n’est pas de recréer l’ensemble du site de Nathan mais bien de refaire une HomePage propre), et on va la lier au menu. 

On enregistre notre menu. 

Puis dans Pages > Ajouter on met en titre Book & Product puis Publier :

Wordpress Elementor responsive mobile page

Enfin on retourne dans Apparence > Menus et dans la colonne de gauche on cherche dans Afficher Tout > Page Book & Products : 

Wordpress Elementor responsive mobile ajout page menu

On sélectionne la page puis on clique sur Ajouter au menu et on la fait glisser en troisième position comme sur la page de Nathan : 

Wordpress Elementor responsive mobile menu

Et on revient sur la page de Nathan dans Elementor et on a bien tous nos onglets dans le bon ordre : 

Wordpress Elementor responsive mobile ordre

Maintenant dans les paramètres du menu on va mettre l’écriture en noire sur un fond blanc et essayer de coller au plus au design de Nathan avec les paramètres à disposition dans NavMenu.

Wordpress Elementor responsive mobile fond menu

On obtient un menu très simple et si on paramètre également l’icone dans l’onglet Style > Mobile Toggle : 

Wordpress Elementor responsive mobile design menu

Et qu’on retourne sur le mode Responsive > Mobile, on voit bien qu’on a maintenant pour ce menu une icône hamburger : 

Wordpress Elementor responsive mobile hamburger icone

On va aligner maintenant un logo, les icônes de réseaux sociaux et le menu afin d’avoir toute l’en-tête du site sur la même ligne : 

On duplique la colonne contenant le menu deux fois et on supprime le menu dans dans les deux premières colonnes : 

Wordpress Elementor responsive mobile menu

On duplique le logo Nathan et on l’ajoute dans la première colonne. 

Et on duplique les icônes de réseaux sociaux et on les ajoute dans la deuxième colonne.

Wordpress Elementor responsive mobile menu

On va passer ensuite en mode Mobile, ça va être plus simple pour terminer le design du menu. 

Donc Mode Responsive > Mobile, et ici on voit bien que nos colonnes s’aligent en ligne. 

Wordpress Elementor responsive mobile menu

On veut pouvoir garder les 3 éléments, logo, icônes de réseaux sociaux et icône du menu, sur la même ligne. 

Donc pour faire ça, on va simplement définir une largeur en pourcentage pour chaque colonnes. 

Comme on est en mode Responsive Mobile, tous les paramètres appliqués ici vont l’être uniquement pour le mobile. 

Donc par exemple on clique sur la première colonne, celle qui contient le logo Nathan Barry, et dans le premier onglet, sous Mise en page > Largeur de la colonne (%), on va mettre 54% (par exemple).

Ce qui nous donne : 

Wordpress Elementor responsive mobile menu

On peut le voir dans la colonne de paramétrage Elementor, il y a maintenant 3 icônes qui sont apparues. 

Elle correspondent à Ordinateur, Tablette et Mobile et nous indique pour quel appareil est ce qu’on est en train de travailler. 

Ici l’icône bleu nous montre que toutes nos modifications ne sont faites que pour le mobile. 

(Si on veut les faire pour tout, il faut repasser dans Responsive Mode dans Ordinateur).

Wordpress Elementor responsive mobile

Et pour les colonnes 2 et 3 on va mettre :

  • Colonne icônes réseaux sociaux : Largeur = 26%
  • Colonne icône menu : Largeur = 20%

Et on obtient bien tout sur la même ligne : 

Wordpress Elementor responsive mobile marges

On termine le design pour avoir quelque chose de propre : 

Pour toutes les colonnes on va mettre un alignement vertical au milieu : 

Wordpress Elementor responsive mobile alignement

Et ensuite on a plus qu’à régler les marges de chaque éléments pour avoir quelque chose de propre. 

Pour exemple : 

Logo : on enlève toutes les marges de l’image et on ajoute une marge à la colonne : 

  • Marge à droite : 14
Wordpress Elementor responsive mobile marge

Les icônes de réseaux sociaux : 

  • Marge en haut de la colonne : 17
Wordpress Elementor responsive mobile marge

Et enfin l’icône du menu : 

  • Marge en haut de la colonne : 3
  • Marge à gauche de la colonne : 8
Wordpress Elementor responsive mobile marge

Ainsi on obtient notre menu sur mobile : 

Wordpress Elementor responsive mobile marge

Un des avantages d’Elementor est qu’on va pouvoir choisir quel éléments est ce qu’on souhaite afficher uniquement sur ordinateur ou uniquement sur mobile. 

Pour l’instant nous avons deux menus sur notre page, nous allons donc garder le menu mobile uniquement sur mobile, et le menu ordinateur, uniquement sur ordinateur et tablettes. 

Afficher un élément de la page, uniquement sur Mobile, Tablette ou Ordinateur

Par exemple le premier menu qu’on a fait convient très bien sur ordinateur et tablette mais on souhaite l’enlever sur mobile. 

On va donc selectionner la section contenant le premier menu qui s’affiche mal sur mobile. 

Dans l’onglet Avancé > Responsive, on va avoir toutes les options pour afficher ou masquer un élément sur tel ou tel appareil.

Ici on choisit donc Masquer sur mobile.

Wordpress Elementor responsive mobile

Et si maintenant on réduit la flèche de la barre latérale Elementor pour avoir un rendu sur mobile, on voit bien qu’il ne reste que le menu mobile qui s’affiche parfaitement : 

Wordpress Elementor responsive mobile marge

Et inversement si on repasse sur ordinateur (Responsive mode > Ordinateur), on va masquer le menu mobile. 

Donc on clique sur la section contenant le menu mobile > Onglet Avancé > Responsive > Masquer sur tablette et masquer sur ordinateur :

Wordpress Elementor responsive mobile masquer

Donc on a obtenu notre menu responsive, qui s’affiche parfaitement sur n’importe quel appareil. 

Et on a vu également comment faire des modifications uniquement sur Ordinateur, tablette ou mobile en passant par le menu Responsive Mode. 

On a vu enfin comment masquer un élément, une colonne ou une section pour certains appareils et les laisser visible sur d’autres. 

On va donc passer a l’étape suivante pour terminer ce cours, c’est d’utiliser les marges pour avoir un site qui s’affiche parfaitement sur mobile. 

Régler l'affichage responsive mobile de chaque élément de sa page

On va repasser en Responsive mode > Mobile et on va aller voir les différents problèmes d’affichages. 

En fait la très grande majorité des problèmes d’affichages sur mobile vont être des problèmes de marges, de taille de type, d’alignement du contenu (gauche, centré ou droite) et d’espace.

On peut le voir sur notre page, on a des espaces énormes, des typos trop petites pour le mobile, aucune marge à gauche parfois : 

Wordpress Elementor responsive mobile sections

Donc on va très simplement et uniquement pour mobile, réaligner le texte, remettre la bonne typo et gérer les espaces entre les éléments. 

On reste en Responsive mode > Mobile. 

On va retourner sur le site de Nathan et si on a installé Google Chrome comme navigateur, (sinon on le fait tout de suite), on va pouvoir faire Clic droit sur la page de Nathan > Inspecter : 

Wordpress Elementor responsive mobile inspecter page

Puis en haut à droite on clique sur la petite icône représentant une tablette et un mobile : 

Wordpress Elementor responsive mobile inspecter

Et le site va s’afficher sur mobile. 

On va pouvoir sélectionner également en haut l’appareil mobile qu’on souhaite utiliser pour afficher le site : 

Wordpress Elementor responsive mobile inspecter

Ce qui va nous permettre de voir l’affichage de la page de Nathan pour aller, comme sur ordinateur, paramétrer sa page Elementor pour avoir le même type d’affichage mobile. 

Paramétrer les marges sur mobile

Quand on regarde la page de Nathan sur Mobile, on voit déjà que les marges sont plus grandes que sur notre version mobile : 

Wordpress Elementor responsive mobile version

On va donc commencer par ça. 

Il faut augmenter dans cette première section :

  • Ajouter du blanc autour de la section (sur mobile uniquement)
  • Augmenter les marges interne haut, gauche et droite

Donc on reste dans le Responsive Mode > Mobile.

Etape 1 ajouter le cadre blanc autour de la section. 

On va simplement ajouter une bordure blanche à gauche et à droite de notre section, sur mobile uniquement. 

Donc on selectionne la section > Style > Bordure :

  • Type de bordure : Continue
  • Largeur (en mode mobile) : délier les valeurs et mettre 12, à gauche et à droite
  • Couleur : Blanc 

Ce qui nous donne bien l’effet recherché : 

Wordpress Elementor responsive mobile

Etape 2, on paramètre les marges.

Sur la page de Nathan tous les éléments sont alignés à gauche et à droite et tous les éléments prennent la largeur de l’écran dans ces limites : 

Wordpress Elementor responsive mobile grille

On va donc aligner de la même manière tout nos éléments. 

Déjà tout en haut, on va écarter un peu plus le titre du bord supérieur de la colonne. 

Donc on va simplement ajouter une marge interne plus grande sur mobile que sur ordinateur. On sélectionne notre première colonne, on clique sur Avancé > Marge et on augmente la marge du Haut à 12 : 

Wordpress Elementor responsive mobile marge

Comme on est en mode responsive mobile, toutes le modifications ne se font que sur mobile. 

Ensuite on veut que sur mobile le bouton prenne toute la largeur de l’écran comme sur la page de Nathan. 

Donc on clique sur le bouton et dans le premier onglet > Contenu > Alignement > Justifié. 

De cette façon le bouton se justifie sur toute la largeur de la colonne : 

Wordpress Elementor responsive mobile marge

Ensuite en dessous on a notre image qui déborde vers le bas : 

Wordpress Elementor responsive mobile marge

On veut l’aligner également pour qu’elle déborde toujours vers le bas mais qu’elle ait la même largeur que le bouton. 

Sur ordinateur on avait fixé à notre image des marges interne à 20 à gauche et à droite : 

Wordpress Elementor responsive mobile marge

Donc on va repasser sur mobile, sélectionner notre image et dans Avancé > Marge interne, on va les enlever (uniquement pour le mobile) en mettant 0 partout.

On a ainsi l’image qui va prendre toute la largeur, alignée avec les autres éléments : 

Wordpress Elementor responsive mobile marge

Si on continue en dessous, on voit que le texte est éloigné de la photo (l’espace est plus large).

Le titre est proprement aligné au centre de la colonne.

Le texte est réparti bien au milieu de la colonne. 

Wordpress Elementor responsive mobile marge

Donc on sélectionne l’espaceur, et sur mobile on le passe à 100.

C’est suffisant pour écarter le titre de l’image : 

Wordpress Elementor responsive mobile marge

Ensuite en ce qui concerne le texte, on commence toujours par regarder les marges mises sur ordinateur. 

Ici dans la colonne contenant le titre, on a mis une marge à droite à 40 : 

Wordpress Elementor responsive mobile marge

Donc on mettre toutes les marges internes à 0.

Donc Responsive mode > Mobile

Puis colonne > Avancé > Marge interne > 0 :

Wordpress Elementor responsive mobile marge interne

Et aligner notre titre au centre. 

Titre > Onglet Style > Alignement > Centré : 

Wordpress Elementor responsive mobile marge interne

En dessous on regarde les deux paragraphes suivants. 

Ils ont un grand espace au dessus et en dessous. 

On va donc commencer par réduire l’espace. 

Comme précédemment, on se met en mode mobile, on clique sur l’espaceur et sur mobile on fait nos réglages. 

Ici pour l’exemple tous les espaceurs sont à 0 px sur mobile : 

Wordpress Elementor responsive mobile espaceur

Ensuite pour d’avantage coller au design de la page de Nathan, on va réduire les marges et augmenter la taille du texte sur mobile. 

Sur ordinateur pour les deux colonnes on a des marges internes à 50 : 

Wordpress Elementor responsive mobile marge interne

Donc sur mobile, on clique sur la colonne > Avancé > Marge interne et on va les réduire à 30 px : 

Wordpress Elementor responsive mobile marge

Et enfin augmenter la taille de la typographie sur mobile. 

On clique sur le texte > Onglet Style > Typographie > Taille > 20 :

Wordpress Elementor responsive mobile typographie

Et on obtient bien quelque chose de propre : 

Wordpress Elementor responsive mobile design

On pourrait terminer donc de la même manière d’optimiser pour mobile toute sa page. 

La suite ne va pas apporter de choses vraiment nouvelle. 

On va donc maintenant s’attarder uniquement sur des fonctionnalités mobile intéressante qui vont nous permettre d’optimiser nos pages.

Inverser l'ordre des colonnes sur mobile

Par exemple sur la section du dessous on voit que sur ordinateur le texte est à gauche de l’image : 

Wordpress Elementor responsive mobile section

Si on passe sur mobile, on voit qu’Elementor va mettre la première colonne au dessus de la seconde. 

Donc avec le texte au dessus de l’image : 

Wordpress Elementor responsive mobile inversion colonnes

Si maintenant on souhaite avoir l’image au dessus du texte, il existe une option sur Elementor qui va nous permettre d’inverser automatiquement l’ordre des colonnes sur mobile ou sur tablette. 

On clique sur la section contenant les colonnes à inverser > Onglet Avancé > Responsive > Inverser l’ordre des colonnes sur mobile. 

Et on voit ici que l’image se retrouve bien en premier sur mobile : 

Wordpress Elementor responsive mobile inversion colonnes

C’est donc une façon très rapide de gérer sur mobile l’ordre des colonnes à l’intérieur d’une section. 

Aligner les colonnes les unes à côté des autres sur mobile

Une autre fonction très utile est de pouvoir aligner les colonnes les unes à côté des autres sur mobile. 

Par exemple dans le pied de page, on voit que les deux colonnes de catégories sont affichées l’une au dessus de l’autre : 

Wordpress Elementor responsive mobile aligner colonnes

Pour les avoir l’une à côté de l’autre, il suffit de cliquer sur la première colonne > Mise en page > Largeur de la colonne (%) > et ici on met 50%. 

Ensuite on clique sur la seconde et on fait la même chose. 

On obtient ainsi les deux colonnes l’une à côté de l’autre :

Wordpress Elementor responsive mobile aligner colonnes

Masquer des éléments sur mobile uniquement

On l’a déjà vu pour le menu, mais il est possible de masquer des élément sur mobile, sur ordinateur ou sur tablette. 

Par exemple on veut masquer dans le pied de page le logo et les mentions légales pour éviter de surcharger la page sur mobile :

Wordpress Elementor responsive mobile masquer

Pour les masquer sur mobile, il suffit de les sélectionner > Avancé > Responsive > Masquer sur mobile : 

Wordpress Elementor responsive mobile marsquer sur mobile

Et lorsqu’on regarde la preview de la page (en cliquant sur la flèche pour fermer la colonne de menu Elementor), on voit bien que le logo et les mentions légales sont bien masqués sur notre page mobile : 

Wordpress Elementor responsive mobile footer

Et on termine ainsi avec la présentation de l’optimisation mobile de notre page. 

On a maintenant tous les outils pour aller optimiser les marges, les espaces, l’ordre et l’alignement des colonnes, des boutons et des typographies. 

Conclusion

On a ainsi vu dans ce chapitre, comment optimiser l’affichage de ses pages sur mobile. 

On va être ainsi capable d’avoir des pages au design spécifiquement conçu pour les téléphones. On va pouvoir masquer des éléments ou en afficher d’autres en fonction de l’appareil utilisé par le visiteur. 

Un site responsive est un signal fort pour les moteurs de recherche qui va mieux référencer nos pages. 

C’est ensuite un gage de bonne expérience utilisateur pour faire rester le visiteur et le faire aller là ou on le souhaite dans son site en lui évitant toute frustration liée au mauvais affichage de nos pages. 

On est maintenant capable de créer n’importe quelle page sur Elementor et de l’optimiser totalement sur mobile. 

Donc si on a bien suivi jusque là, on est capable de créer entièrement un site internet et de l’optimiser sur ordinateur, mobile et tablette. 

Et c’est ainsi que ce cloture donc ce dernier chapitre sur la création d’un site internet.