Elementor – Le mode responsive (mobile, tablette, ordinateur)

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é.

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.

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, soit la largeur, et H à Height, soit 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, 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.