Le responsive design consiste à adapter l’affichage de ton site sur les différents supports : ordinateur, tablette et mobile. C’est aujourd’hui indispensable de rendre ton site web responsive et facilement lisible sur mobile, puisque le trafic mobile a dépassé le trafic desktop (ordinateur). Dans les faits, 1 visiteur sur 2 de ton site le consulte sur mobile…
Grâce à Elementor, tu peux rendre ton site web responsive en quelques clics.
Rends-toi dans l’éditeur Elementor d’une page de ton site.
En bas à gauche de ton écran, tu vois ici l’icône « Mode responsive ». Si tu cliques dessus, tu accèderas à 3 types de vues : Ordinateur, Tablette, Mobile.
· La vue Ordinateur est la vue par défaut
· La vue Tablette te permet de voir comment se comporte ta mise en page sur tablette
· La vue Mobile donne un aperçu de ton site en version smartphone
Tu peux également modifier les dimensions du device, car tous les smartphones n’ont pas les mêmes tailles d’écran, de même que les tablettes ou les ordinateurs.
Chaque section, colonne et widget que tu crées comportent une option Responsive dans l’onglet Avancé : tu pourras décider de les faire apparaître, ou non, sur les différents devices ; de gérer les marges internes et externes, l’affichage des colonnes…
L’option « Inverser les colonnes » peut être utile si tu as des sections successives qui comportent plusieurs colonnes avec une image et/ou un texte. Elle te permet de changer l’ordre des colonnes, pour afficher par exemple la colonne contenant une image au-dessus d’une colonne contenant un bloc de texte.
Les résolutions d’écrans d’un site web responsive
Voici un résumé des résolutions les plus courantes :
- Mobile : 360 x 640
- Mobile: 375 x 667
- Mobile : 360 x 720
- iPhone X : 375 x 812
- Pixel 2 : 411 x 731
- Tablette : 768 x 1024
- Ordinateur portable : 1366 x 768
- Ordinateur portable ou de bureau haute résolution : 1920 x 1080
Astuce : lorsque tu fais une modification pour un autre device, vérifie bien la présence de l’icône du device correspondant à côté, pour être certain.e de faire la modification uniquement sur ce device-là.
