12. Responsive : un site qui tient dans la poche

Vous construisez la page sur un grand écran ; le visiteur la découvre sur un téléphone, dans sa main, souvent debout. Ce chapitre explique comment Elementor adapte une même page à toutes les largeurs — les points de rupture et la cascade descendante —, quels réglages on modifie le plus souvent sur tablette et sur mobile, et comment vérifier le résultat. Il clôt la Partie III : après lui, la mise en page tient sur tous les écrans.

12.1 — Le téléphone d’abord, l’ordinateur en premier

Pour un artisan ou un commerce de proximité, la visite type ne ressemble pas à ce que l’on imagine en construisant le site. Elle commence sur un téléphone, par une recherche du genre « menuisier Murol » ou par un clic depuis la fiche Google de l’entreprise ; elle dure une ou deux minutes ; elle se termine par un appel ou par un formulaire. Sans avancer de chiffre précis, on peut dire que, pour la plupart des sites d’entreprises locales, la majorité des visites se fait sur téléphone — et que le site doit donc y être irréprochable. Le paradoxe, c’est que l’éditeur d’Elementor ne fonctionne pas sur téléphone ni sur tablette (chapitre 04) : on construit sur ordinateur ce que l’on lira sur mobile.

12.2 — Les points de rupture

Un point de rupture (breakpoint) est une largeur d’écran, en pixels, à partir de laquelle la page change de comportement. Elementor en active trois par défaut, qui correspondent à ses trois vues d’édition : Ordinateur (Desktop) au-delà de 1024 px, Tablette (Tablet) de 768 à 1024 px, Mobile jusqu’à 767 px. Ces valeurs se lisent et se modifient dans Réglages du site › Mise en page › Points de rupture (Breakpoints), accessible par Ctrl+K (Cmd+K sur Mac) ; le bouton + de la liste Points de rupture actifs permet d’en ajouter jusqu’à quatre autres.

Mobile et Tablette ne peuvent pas être supprimés (Centre d’aide Elementor, page « Responsive editing »). Pour un site vitrine de cinq pages, restez sur ces trois vues : chaque point de rupture ajouté est une vue de plus à régler et à vérifier sur chaque page. Ajoutez Mobile Paysage seulement si un bloc pose problème sur un téléphone tenu en travers, et ne touchez aux valeurs par défaut que si vous avez une raison précise.

12.3 — La cascade descendante

Voici la règle qui explique tout le reste. L’édition responsive d’Elementor est descendante (top-down) : un réglage fait dans la vue Ordinateur s’applique à toutes les vues plus étroites ; un réglage fait en vue Tablette s’applique à la tablette et au mobile ; un réglage fait en vue Mobile ne s’applique qu’au mobile. Jamais l’inverse : rien de ce que vous réglez sur mobile ne remonte vers l’ordinateur. Une seule exception : la vue Écran large, dont les réglages ne s’appliquent à aucune autre vue, ni au-dessus ni en dessous.

Dans le panneau, une valeur héritée se reconnaît à son aspect : grisée dans les widgets classiques, atténuée et accompagnée d’un point gris dans les éléments atomiques, le point indiquant de quelle vue provient la valeur (Centre d’aide, page « Inherited responsive values »). Dès que vous saisissez une valeur dans la vue courante, elle devient une valeur propre et cesse de suivre la vue supérieure. C’est utile et dangereux à la fois : utile, parce que c’est ainsi que l’on adapte ; dangereux, parce qu’une valeur propre posée par erreur en vue Mobile ne bougera plus, même si vous changez ensuite l’ordinateur en croyant tout régler d’un coup.

12.4 — Le mode responsive dans l’éditeur

Les trois icônes ordinateur, tablette et mobile de la barre supérieure, ou le raccourci Ctrl+Shift+M, basculent la toile dans la largeur de l’appareil choisi. Hors de la vue Ordinateur, des poignées sur les côtés de la toile permettent d’ajuster la largeur de l’aperçu, pour voir comment la page se comporte entre deux points de rupture (Centre d’aide, page « Mobile editing »). Dans l’Éditeur atomique, toutes les options de l’onglet Style sont responsives : il suffit de changer d’appareil dans la barre supérieure, puis de modifier le champ voulu. Dans les widgets classiques, seuls les champs qui portent une petite icône d’appareil se règlent par vue ; cliquer sur cette icône change aussi la vue de la toile.

12.5 — Ce que l’on adapte le plus souvent

Une page bien construite (chapitres 09 et 10) demande peu d’adaptations, toujours les mêmes. Les voici, dans l’ordre où elles reviennent en atelier.

La direction : de la ligne à la colonne

C’est l’adaptation reine. Trois cartes en Direction Ligne sur ordinateur deviennent illisibles à 375 px de large. En vue Mobile, on passe le Flexbox parent en Direction Colonne : les cartes s’empilent, et l’Écart, qui suivait l’horizontale, s’applique maintenant à la verticale sans autre réglage. Pour une Grille, on réduit le nombre de colonnes (trois sur ordinateur, deux sur tablette, une sur mobile). Sur tablette, une rangée de trois cartes tient souvent encore, avec un Écart réduit à 24 px ; c’est au cas par cas.

Les titres, les espacements, les largeurs

Un titre de 48 px occupe deux ou trois lignes sur un téléphone ; on le ramène à 32 px en vue Mobile (36 à 40 px en tablette), dans la section Typographie du chapitre 13. Le padding de section passe de 80 px à 40 px en haut et en bas, et l’on vérifie que le padding latéral de 20 à 24 px est bien hérité : c’est lui qui empêche le texte de toucher le bord. Les largeurs en pourcentage réglées au chapitre 09 (50 % pour l’image et le texte de la section « atelier ») repassent à 100 % en Mobile, en même temps que le parent passe en Colonne.

Masquer, réordonner

Pour cacher un élément sur une vue, l’Éditeur atomique utilise la section Style › Mise en page réglée sur Aucun dans la vue voulue ; les widgets classiques ont les cases Avancé › Responsive › Masquer sur. Faites-en un usage rare : un élément masqué est tout de même chargé par le navigateur, et surtout, l’information qu’il porte disparaît pour le visiteur — l’exercice 11.1 a montré un plan et un numéro de téléphone masqués justement sur l’appareil où l’on en a besoin. Masquez une image décorative, jamais un contenu. Pour changer l’ordre — afficher l’image après le texte sur mobile, alors qu’elle est à gauche sur ordinateur —, l’enfant d’un Flexbox ou d’une Grille dispose du réglage Order, qui se règle lui aussi par vue.

Images, boutons, menus

Les images d’arrière-plan gagnent à être recadrées plus haut que large sur mobile (chapitre 14), et un bandeau de 90 vh sur ordinateur se contente souvent de 60 vh sur téléphone. Les boutons passent en pleine largeur pour offrir une cible facile au pouce (chapitre 15), et le lien « Appeler » en tel: devient l’élément le plus important de la page. Le menu, enfin, se replie derrière une icône à partir d’un point de rupture que le widget Menu WordPress permet de choisir (chapitre 24).

1. Terminez la vue Ordinateur. Sur la page « Accueil », vérifiez que la section « Prestations » est complète : trois cartes en Ligne, Écart 32 px, padding 80 px. Enregistrez (Ctrl+S).
2. Passez en Tablette (icône de la barre supérieure). Sélectionnez « Contenu prestations » : ses champs affichent des valeurs atténuées avec un point gris, héritées de l’ordinateur. Réglez seulement l’Écart à 24 px. Sélectionnez la section, padding haut et bas 60 px.
3. Passez en Mobile. Sur « Contenu prestations », Direction Colonne, Aligner les éléments Stretch. Sur la section, padding haut et bas 40 px ; vérifiez que les 24 px latéraux sont bien hérités.
4. Adaptez le titre. Sélectionnez le Titre H1 du bandeau et, toujours en vue Mobile, réglez la taille à 32 px dans Typographie.
5. Repassez en Ordinateur. Rien n’a dû bouger : c’est la preuve que vous avez travaillé en descendant. Enregistrez et ouvrez l’Aperçu.

12.6 — Vérifier sur un vrai téléphone

La vue Mobile de l’éditeur simule une largeur, pas un téléphone : elle ignore la barre d’adresse qui change la hauteur visible, la taille réelle du pouce, la lenteur d’une connexion à la campagne et la manière dont chaque navigateur affiche les polices. Avant de publier une page, ouvrez l’Aperçu, envoyez-vous l’adresse et parcourez la page sur votre propre téléphone, puis, si possible, sur un second appareil d’une autre marque. La liste suivante tient sur une main.

• Aucun défilement horizontal : la page ne « glisse » pas de gauche à droite quand on la touche.
• Tout le texte se lit sans zoomer (corps d’au moins 16 px).
• Les titres tiennent en deux lignes au plus, sans mot coupé bizarrement.
• Chaque bouton et chaque lien se touche facilement du pouce, sans en toucher un autre.
• Les images ne sont ni écrasées ni coupées sur un visage ou un détail important.
• Le lien « Appeler » lance bien un appel ; le formulaire s’ouvre et se remplit sans lutte.
• Le menu s’ouvre, se ferme et mène à chaque page.
• Aucun contenu utile n’est masqué sur mobile.
• La page se charge en quelques secondes sur le réseau mobile, pas seulement en wifi.