Table des matières
L’éditeur visuel d’Elementor permet de créer et styler une page pour tous les types d’appareils et de formats d’écran : ordinateur, tablette ou mobile – c’est ce qu’on appelle le responsive design, le design qui s’adapte à la taille de l’écran.
Tour d’horizon du mode responsive d’Elementor.
La responsivité dans Elementor : une gestion polyvalente
La responsivité d’un site web est essentielle, et dans Elementor, elle se gère à plusieurs endroits :
- grâce au mode responsive
- et aussi par les réglages responsive de chaque élément et de chaque widget
Le mode responsive d’Elementor
L’interface pour gérer la responsivité d’une page
Pour passer en mode responsive dans Elementor, commencez par ouvrir une page, un article ou un autre type de contenu dans l’éditeur visuel d’Elementor.
Dans la barre de menu en gris foncé en bas de la colonne de gauche, vous verrez 5 icônes.
La quatrième icône vous permet de basculer en mode responsive. Cliquez dessus pour explorer les possibilités offertes par ce mode !
Une fois que vous avez cliqué sur cette icône, l’interface dans la colonne de droite, la zone de prévisualisation, se modifie légèrement : une barre apparait en haut, sur un fond gris foncé.
Au milieu de cette nouvelle barre, vous verrez 3 icônes :
- ordinateur (desktop)
- tablette
- téléphone mobile / smartphone
Ces icônes vous permettent de prévisualiser la page en fonction du type de taille d’écran choisi. Cliquez dessus et voyez comment votre page s’adaptera aux différents écrans. C’est un outil précieux pour designer votre page en prenant directement compte de ce que vos réglages donneront en termes de responsivité.
Petite démo en vidéo
Voici une petite démo du mode responsive en vidéo. J’effectue les actions suivantes :
- je me mets en mode responsive
- je règle les marges d’un élément texte différemment sur les 3 formats d’écran
- je modifie la taille de l’écran mobile
- je paramètre un élément texte pour ne pas s’afficher sur ordinateur
- je change le nombre de colonnes d’un texte en fonction du format d’écran
Les éléments de la page s’adaptent à la taille de l’écran
En mode responsive, les réglages des éléments et des widgets s’adaptent. Si vous changez des réglages, ils seront enregistrés pour le type d’écran actuellement sélectionné, mais pas pour les autres !
Pour vérifier cela, cliquez sur un élément de votre page – que ce soit une section, une colonne, ou un widget.
Par exemple, passez en mode téléphone, cliquez sur une section et allez dans l’onglet avancé : vous constaterez que juste après le nom de certains réglages, il y a une petite icône qui montre un téléphone. Cela indique que vos réglages s’appliqueront uniquement à ce format. Vous pouvez cliquer sur cette icône pour choisir un autre format responsive.
Important : en fait, les réglages par défaut qui sont ceux pour ordinateur, s’appliquent aux réglages sur tablette, qui s’appliquent aux réglages sur mobile.
Donc si on met un padding de 2rem à un élément sur ordinateur, puis qu’on modifie ce réglage sur tablette en définissant un padding de 1rem, le padding qui s’appliquera sur mobile sera de 1rem.
Zoomer dans la maquette
Revenons à la barre responsive d’Elementor : après les 3 petites icônes, vous trouverez les signes – et +, ainsi qu’un chiffre suivi d’un %. Il s’agit du niveau de zoom. Vous pouvez zoomer ou dézoomer dans l’image pour mieux voir. Cela n’aura aucun effet sur le rendu final de la page, c’est juste une fonction utile pendant l’édition.
L’icône de flèche circulaire vous permet de réinitialiser le niveau de zoom à 100%.
Régler la largeur et la hauteur de l’écran
A la droite de cette barre responsive, vous avez les lettres W et H, suivies d’un champ avec un chiffre :
- W correspond à Width, la largeur,
- H correspond à Height, la hauteur.
Cela vous permet de définir manuellement la taille de l’écran, si vous travaillez pour une taille d’écran spécifique, comme par exemple un iPhone.
Voilà donc une excellente manière de créer un design en mode responsive avec Elementor.
D’ordinaire, une bonne méthode consiste à
- commencer le design sous un format donné, par exemple l’ordinateur,
- puis une fois que ce format vous semble abouti, passez en mode tablette, adaptez tout ce qui doit l’être,
- puis passez en mode téléphone, faites les adaptations nécessaires,
- et voilà, votre design responsive est prêt.
Sortir du mode responsive
Pour sortir du mode responsive, cliquez simplement sur la croix en haut à droite.
Cela vous ramènera au mode normal où vos réglages s’appliqueront, par défaut, à la version ordinateur / desktop.
Les réglages responsive
Gérer la responsivité des widgets
Même en dehors du mode responsive, vous pouvez toujours gérer la responsivité dans Elementor.
Il suffit d’aller dans n’importe quel réglage d’élément ou de widget.
Par exemple, si vous cliquez sur le widget texte que vous êtes en train d’écrire, vous pourrez accéder, dans la colonne de gauche, à l’onglet « Avancé ».
Ici, vous trouverez les réglages disponibles : notez que juste après les réglages de marge, de marge interne, de largeur et d’index-z, on trouve une petite icône qui représente un téléphone.
Il vous suffit de cliquer sur cette icône pour ouvrir un mini menu déroulant avec les 3 icônes des types d’écran. Cliquez sur l’un d’eux, et ensuite, les réglages s’appliqueront à ce type de format d’écran et non aux autres.
Cachez des éléments sur ordinateur, tablette ou mobile
Masquer des éléments
Le design responsive dans Elementor ne se limite pas à l’adaptation des éléments d’une page à l’espace disponible.
Il peut arriver que vous souhaitiez aller plus loin, en cachant certains éléments sur certains formats d’écran, par exemple parce qu’ils seraient trop lourds à charger sur mobile.
Imaginez, par exemple, que vous ayez une section avec deux colonnes de texte et une colonne contenant une image. En mode mobile, vous souhaiteriez que l’image n’apparaisse pas.
Dans ce cas, faites ceci :
- cliquez sur l’image,
- allez dans l’onglet Avancé dans la colonne de gauche de l’éditeur visuel,
- rendez-vous dans la partie Responsive,
- et là, cliquez sur « Masquer sur mobile« .
Et voilà, l’image n’apparaîtra plus que sur la tablette et sur l’ordinateur.
Affichez des designs différents sur ordinateur et mobile
Dans un autre cas de figure, vous pourriez vouloir faire des mises en forme très différentes d’une section de votre design en fonction du format d’écran.
Par exemple, vous avez une très belle section avec en arrière-plan une grande et magnifique photo… qui pèse 800ko. Sur ordinateur, ça passe, mais sur mobile, cette image va ralentir le chargement de la page tout en prenant une taille ridicule. Mieux vaut alors la supprimer sur mobile !
Dans ce cas, dupliquez votre section, travaillez ses versions à votre guise, puis allez dans Avancé > Responsive, et masquez l’une sur mobile et / ou tablette, masquez l’autre sur ordinateur et / ou tablette, et voilà : une version de la section s’affichera sur mobile, une autre sur ordinateur.
Bonjour. J’ai une grande image et je voudrais qu’elle ne s’affiche pas sur mobile. Comment faire ça ?
C’est simple :
– Ouvrez votre page dans Elementor
– Allez dans le 3è onglet, Avancé
– Allez dans la partie Responsive
– Et cliquez « ne pas afficher sur mobile »
Et voilà, le tour est joué.
Salut. Ya 3 format responsive mais vu les différences des écrans d’aujourd’hui, faudrait plutôt 5-6 formats. Y’a moyen de gérer ça ?
Eh bien on peut ajouter des « breakpoints ».
Il faut ouvrir sa page dans Elementor, puis aller dans les Réglages de site d’Elementor.
Puis, dans Mise en page et dans Points de rupture, et là on peut en ajouter. Il y en a 4 types différents (on ne fait pas tout à fait ce qu’on veut.)
A propos de la responsivité j’aimerais comprendre une chose. Est-ce que chaque version reçoit le code HTML des autres ? Je veux dire, est-ce que la version mobile reçoit aussi la version ordinateur et inversement ?
Par défaut, il n’y a qu’une seule version servie à tous les types d’appareil. C’est essentiellement les styles CSS qui changent et assurent la responsivité. Certains plugins et systèmes de cache, par exemple LitesSpeed Cache, permettent de servir des versions différentes pour ordi et mobile. L’utilisation est d’un niveau plutôt avancé.