Rendre un site Elementor responsive (mobile et tablette)
Prévisualiser chaque écran, adapter les réglages par appareil et comprendre les points de rupture.
Les menus sont cités tels qu’ils apparaissent dans Elementor en français. Selon votre version et vos réglages de langue, certains libellés restent en anglais (Single Post, Loop Item…).
La majorité des visites se font aujourd’hui sur téléphone. Elementor permet d’adapter votre mise en page à chaque type d’écran, sans dupliquer vos contenus. Encore faut-il savoir comment il raisonne.
Les points de rupture
Par défaut, Elementor distingue trois appareils selon la largeur de l’écran :
- ordinateur : plus de 1024 px ;
- tablette : entre 767 et 1024 px ;
- mobile : moins de 767 px.
Ces seuils s’appellent des points de rupture (breakpoints). Vous pouvez les modifier et en ajouter jusqu’à six au total (mobile, mobile extra, tablette, tablette extra, laptop et grand écran) dans Site Settings › Layout › Breakpoints.
Prévisualiser chaque écran
Dans la barre du haut de l’éditeur, cliquez sur l’icône de l’appareil à afficher (ordinateur, tablette, mobile). Hors mode ordinateur, des poignées sur les bords de l’aperçu permettent de faire varier la largeur pour tester les cas intermédiaires.
Adapter un réglage à un appareil
Les réglages adaptables sont marqués d’une icône d’appareil. Pour modifier, par exemple, la taille d’un titre sur mobile :
- passez en mode mobile dans la barre du haut ;
- sélectionnez le titre, onglet Style, puis Typographie ;
- réduisez la taille : la valeur ne s’applique qu’au mobile.
À retenir : l’édition responsive va du plus large au plus étroit. Une modification faite en mode ordinateur s’applique aussi à la tablette et au mobile, sauf si vous y avez défini une valeur spécifique. Commencez donc toujours par l’ordinateur, puis ajustez les petits écrans.
Les réglages qui font la différence
- Direction des conteneurs : en ligne sur ordinateur, en colonne sur mobile (voir les conteneurs).
- Tailles de police : les grands titres doivent tenir sur deux ou trois lignes au maximum sur téléphone.
- Marges et espacements : réduisez-les sur mobile, l’espace y est précieux.
- Menu : le widget Menu bascule en menu « burger » sur les petits écrans, selon un point de rupture réglable dans ses options.
Enfin, vérifiez toujours sur un vrai téléphone : l’aperçu de l’éditeur est fidèle, mais rien ne remplace un test réel (sachant que l’édition elle-même se fait sur ordinateur).
Masquer un élément sur un appareil
Certains éléments n’ont de sens que sur un type d’écran : un long tableau sur ordinateur, un bouton « Appeler » sur mobile. Sélectionnez l’élément, onglet Avancé, section Responsive, et activez Masquer sur ordinateur, tablette ou mobile.
Un élément masqué reste présent dans le code de la page : il est seulement caché à l’affichage. Dupliquer toute une section pour en montrer une version « mobile » et une version « ordinateur » alourdit donc la page et double le travail de mise à jour. Réservez le masquage aux petits éléments, et adaptez les réglages pour le reste.
Les pièges les plus courants
- Largeurs fixes en pixels : un conteneur de 1200 px ou une image de 800 px de large débordent sur un téléphone. Préférez les pourcentages, ou une largeur maximale.
- Défilement horizontal : si la page « bouge » latéralement sur mobile, un élément dépasse de l’écran. Passez en aperçu mobile et cherchez le bloc trop large, souvent une marge négative ou un élément positionné en absolu.
- Textes posés sur une image : lisibles sur grand écran, ils peuvent recouvrir le sujet de la photo sur mobile. Vérifiez le cadrage (position de l’image de fond) pour chaque appareil.
