1.5Responsive : mobile & tablette
L'essentiel en 30 secondes
- Responsive = la page s'adapte à la taille de l'écran (ordinateur, tablette, mobile).
- Elementor a un aperçu par appareil : on règle par point de rupture (desktop / tablette / mobile) sans casser les autres.
- On peut masquer/afficher un élément selon l'appareil et ajuster tailles, espacements, ordre.
Mini-cas filé — Nadia teste sur téléphone
Sur ordinateur, l'accueil du menuisier est parfait. Sur le téléphone de Nadia, la bannière déborde et les 3 réalisations se tassent. Elle découvre l'aperçu mobile : elle réduit les titres, empile les cartes, et masque un élément décoratif inutile sur petit écran. Le site devient lisible partout.
Dernière étape du niveau 1 — un site qui ne marche pas sur mobile ne marche pas.
1. Aperçu et points de rupture
Elementor propose un aperçu responsive : une barre pour basculer entre ordinateur, tablette et mobile. Les réglages faits dans un mode s'appliquent à ce point de rupture (et aux plus petits) sans casser les autres : on peut réduire une taille de titre seulement sur mobile.
Nadia bascule en mode mobile et ajuste : la bannière passe en colonne (grâce au wrap vu en 1.1), les titres rapetissent, les paddings se resserrent. L'aperçu lui montre le rendu réel.
2. Masquer, réordonner, tester
Dans l'onglet Avancé → Responsive, on peut masquer/afficher un élément selon l'appareil (ex. cacher une grande image décorative sur mobile) et parfois changer l'ordre des éléments. On ajuste aussi tailles et espacements par appareil.
Règle d'or : tester réellement sur un téléphone, pas seulement dans l'aperçu. Un site non responsive perd la majorité des visiteurs, qui viennent souvent du mobile.
🔎 Exemple concret — Rendre l'accueil lisible sur mobile (cas Nadia)
Mode mobile (aperçu) :
- bannière : passe en colonne (wrap), bouton pleine largeur
- titres : taille réduite
- 3 réalisations : empilées (une colonne)
- image décorative : masquée sur mobile
→ Tester ensuite sur un vrai téléphone.Résultat : un site lisible sur tous les écrans.
Leçon : régler par appareil + tester en vrai.
Vocabulaire de la section
- Responsive
- La capacité d'une page à s'adapter à la taille de l'écran.
Exemple simple : la bannière passe en colonne sur mobile.
Ce que ce n'est pas : une page figée qui déborde sur petit écran.
Réflexe : penser mobile dès la conception.
- Point de rupture (breakpoint)
- Le seuil d'écran (desktop, tablette, mobile) auquel on applique des réglages spécifiques.
Exemple simple : réduire la taille des titres seulement sur mobile.
Ce que ce n'est pas : croire qu'un réglage mobile change aussi le desktop.
Réflexe : régler dans le mode = régler ce point de rupture (et plus petits).
- Aperçu par appareil
- La bascule ordinateur/tablette/mobile pour voir et régler le rendu par écran.
Exemple simple : Nadia bascule en mobile pour ajuster la bannière.
Ce que ce n'est pas : ne juger que sur l'écran d'ordinateur.
Réflexe : toujours vérifier les 3 aperçus.
- Masquer / réordonner
- Afficher ou cacher un élément selon l'appareil, et parfois changer son ordre.
Exemple simple : masquer une grande image décorative sur mobile.
Ce que ce n'est pas : garder sur mobile des éléments lourds et inutiles.
Réflexe : sur mobile, garder l'essentiel.
- Test réel
- Vérifier le rendu sur un vrai téléphone, pas seulement dans l'aperçu.
Exemple simple : Nadia ouvre le site sur son téléphone avant de livrer.
Ce que ce n'est pas : livrer sans jamais tester sur mobile.
Réflexe : avant de livrer, ouvrir sur un vrai mobile.
En pratique — Adapter une page au mobile
- Basculez l'aperçu en mode mobile.
- Réduisez la taille des titres et resserrez les paddings pour le mobile.
- Vérifiez que les blocs s'empilent (wrap) et masquez l'inutile sur petit écran.
- Testez la page sur un vrai téléphone avant de valider.
Script prêt à dire — rassurer le client sur le mobile (20 s)
« La plupart de vos clients vous trouveront depuis leur téléphone. J'ai donc adapté le site pour mobile : textes lisibles, bouton d'appel bien visible, images allégées. Je l'ai testé sur un vrai téléphone, pas seulement sur l'ordinateur, pour être sûr que tout est net. »
Mettre en avant le mobile comme priorité commerciale.
Modèle copier-coller — check responsive
APERÇU MOBILE : titres réduits ? paddings resserrés ?
BLOCS : s'empilent correctement (wrap) ?
ÉLÉMENTS MASQUÉS SUR MOBILE (inutiles) : _______________
BOUTONS : assez grands, lisibles au pouce ?
TEST SUR UN VRAI TÉLÉPHONE : fait / à faire
TABLETTE VÉRIFIÉE : oui / nonMobile-first
Concevoir d'abord pour mobile, puis élargir : évite les mauvaises surprises.
Bouton d'appel
Sur mobile, bouton « tel: » bien visible : contact en un clic.
Images
Alléger et éventuellement masquer les images décoratives sur mobile (performance).
Tablette
Ne pas oublier la tablette : souvent entre les deux, à vérifier aussi.
✓ Bonnes pratiques
- Régler par point de rupture (mobile sans casser le desktop).
- Masquer l'inutile sur petit écran.
- Tester sur un vrai téléphone avant de livrer.
✗ Pièges fréquents
- Juger uniquement sur l'écran d'ordinateur.
- Laisser la bannière déborder sur mobile.
- Garder des images lourdes/inutiles sur mobile.
Points clés à retenir
- Responsive = la page s'adapte à l'écran.
- Régler par point de rupture (desktop/tablette/mobile).
- Masquer/réordonner selon l'appareil.
- Tester réellement sur un téléphone.
Défi 48h — appliquez demain
Prenez une page, passez en aperçu mobile, réduisez les titres, vérifiez que les blocs s'empilent, masquez un élément inutile, puis ouvrez la page sur votre téléphone. Notez un défaut corrigé. 20 minutes.
- Je règle l'affichage par point de rupture.
- Je masque l'inutile sur mobile.
- Je teste sur un vrai téléphone avant de livrer.
Questions fréquentes
Un réglage mobile change-t-il aussi l'ordinateur ?
Non : un réglage fait en mode mobile s'applique au mobile (et aux écrans plus petits) sans modifier le desktop. C'est tout l'intérêt des points de rupture.
Puis-je masquer un élément sur mobile ?
Oui : dans Avancé → Responsive, on peut masquer/afficher un élément selon l'appareil. Pratique pour alléger le mobile (images décoratives, blocs secondaires).
L'aperçu suffit-il pour valider le mobile ?
Il aide, mais il faut toujours tester sur un vrai téléphone : tailles de police, boutons cliquables au pouce, vitesse de chargement réelle.
L'accueil est parfait sur ordinateur mais la bannière déborde sur mobile. Quel est le bon réflexe ?