La majorité de vos visiteurs arrive depuis un téléphone. Pourtant, la construction se fait presque toujours sur un grand écran — et l'affichage réduit n'est vérifié, si tant est qu'il le soit, qu'à la toute fin. C'est précisément de là que naissent les problèmes que je répare le plus souvent en formation.
Le seul changement d'habitude qui compte
Construisez la page, puis vérifiez chaque section immédiatement en version mobile, avant de passer à la suivante. Pas tout d'un coup à la fin.
La différence est considérable : si vous corrigez ensuite vingt sections en même temps, vous perdez la vue d'ensemble de la modification qui a agi où. Section par section, il s'agit à chaque fois d'une broutille.
Vous changez d'affichage dans l'éditeur en bas à gauche, via l'icône des appareils.
Comment les affichages par appareil s'articulent
Le principe sur lequel la plupart butent au début : Elementor hérite du grand vers le petit.
Ce que vous réglez dans l'affichage bureau vaut automatiquement aussi pour la tablette et le téléphone — tant que vous n'y définissez rien de différent. Dès que vous saisissez une valeur propre dans l'affichage mobile, cette valeur est figée pour le téléphone et ne suit plus le bureau.
Deux règles pratiques en découlent :
Modifiez toujours les contenus dans l'affichage bureau. Si vous éditez un texte dans l'affichage mobile, il change certes partout — mais vous perdez facilement la vue d'ensemble des réglages accrochés à tel ou tel endroit.
Ne définissez des valeurs mobiles que là où c'est nécessaire. Chaque valeur écrasée est un endroit de plus à entretenir lors de futures modifications.
Les cinq erreurs les plus fréquentes
Largeurs fixes en pixels. Un conteneur de 1200 pixels de large ne tient sur aucun écran de téléphone et provoque un défilement horizontal. Utilisez des valeurs en pourcentage ou une largeur maximale plutôt qu'une largeur fixe.
Des espacements pensés uniquement pour le bureau. 120 pixels de marge intérieure en haut et en bas paraissent généreux sur un grand écran. Sur téléphone, ils signifient que le visiteur fait défiler des surfaces vides. Définissez sur mobile des valeurs nettement plus faibles — le plus souvent la moitié ou moins.
Des tailles de police sans adaptation mobile. Un titre de 64 pixels s'étale sur cinq lignes au téléphone. Pour les titres, une valeur propre plus petite se justifie presque toujours.
Des zones cliquables trop petites. Les boutons et les entrées de menu ont besoin d'une taille minimale pour être atteints de manière fiable avec le pouce — environ 44 sur 44 pixels. Deux liens l'un sous l'autre avec peu d'espace sont une épreuve sur téléphone.
Mauvais ordre. Sur le bureau, l'image est à gauche et le texte à droite. Sur téléphone, ils s'empilent — et soudain l'image passe avant le titre. Avec les conteneurs Flexbox, vous changez l'ordre sous Avancé pour chaque affichage, sans dupliquer la structure. Pourquoi les conteneurs sont supérieurs ici est expliqué dans Conteneurs plutôt que sections.
Masquer des éléments sur mobile — avec discernement
Sous Avancé → Responsive, vous pouvez masquer des éléments par appareil. C'est utile pour les graphiques décoratifs qui ne font que prendre de la place sur téléphone.
Deux limites : les éléments masqués sont tout de même chargés — vous gagnez de la place, pas du temps de chargement. Et ne masquez jamais des contenus nécessaires à la compréhension. Une version mobile à laquelle manquent des informations essentielles n'est pas une optimisation.
Points de rupture personnalisés
Par défaut, Elementor travaille avec bureau, tablette et téléphone. Sous Réglages du site → Responsive, des seuils supplémentaires peuvent être activés, par exemple pour les grands écrans ou les petits téléphones.
Mon conseil : restez-en aux trois affichages standard tant que vous n'avez pas de problème concret. Chaque point de rupture supplémentaire signifie un affichage de plus à vérifier à chaque modification — et cette précision supplémentaire, personne ne la remarque en pratique.
Vérifier : pas seulement dans l'éditeur
L'affichage mobile de l'éditeur est une simulation. Il montre correctement la largeur, mais pas tout : le comportement tactile, le rendu réel des polices, le comportement au chargement sur une connexion médiocre.
Regardez la page au moins une fois sur un appareil réel avant sa mise en ligne. Et vérifiez surtout deux choses : la page peut-elle être déplacée horizontalement ? Il y a alors quelque part un élément trop large. Et le menu fonctionne-t-il — s'ouvre-t-il, peut-on le refermer ?
Ce qui concerne le temps de chargement
Sur mobile, la connexion est souvent moins bonne et l'appareil plus lent. C'est précisément là que sont aussi mesurés les Core Web Vitals, qui entrent dans l'évaluation par les moteurs de recherche. Si vous voulez gagner du temps de chargement à un endroit, que ce soit sur mobile : Elementor et les Core Web Vitals.
Elementor Pro : les réglages responsive existent dans les deux versions. Pro les étend à l'en-tête, au pied de page et aux popups — c'est justement pour le menu sur téléphone que la différence se fait sentir. Découvrir Elementor Pro
Si vous voulez parcourir une fois votre site ensemble en version mobile, plutôt que de soigner des symptômes isolés, cela fait typiquement partie de ma formation Elementor.
Tags