Formation
à Elementor

Vous souhaitez apprendre Elementor ?

Je vous forme par téléphone
+ partage d’écran.

Créez votre site
avec Elementor Pro

Vous faites un site professionnel ?

Elementor Pro est le meilleur constructeur de page WordPress.

Créez votre site
avec Elementor Cloud

Vous voulez créer votre site avec Elementor ?

Hébergez-le sur Elementor Cloud.

Elementor mode responsive

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

0
(0)

L’éditeur visuel d’Elementor permet de créer et styler une page pour tous les types d’appareils et de formats d’écran – 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é se gère à plusieurs endroits dans Elementor :

  • par le mode responsive
  • mais aussi par les réglages responsive de chaque élément et de chaque widget

Le mode responsive d’Elementor

Ouvrez une page, un article ou un autre type de contenu dans l’éditeur visuel d’Elementor.

Dans la barre en gris foncé en bas de la colonne de gauche, vous avez 5 icônes.

La 4è vous fait passer en mode responsive. Cliquez dessus pour voir !

Elementor barre du bas
La barre du bas de l’éditeur visuel d’Elementor

Vous constatez que l’interface dans la colonne de droite, la zone de prévisualisation, se modifie légèrement : une barre apparait tout en haut, sur fond gris foncé.

Elementor en Mode responsive
Elementor en Mode responsive

Au milieu de cette barre, vous avez d’abord 3 icônes :

  • ordinateur (desktop)
  • tablette
  • téléphone mobile / smartphone

Cliquez dessus, et la prévisualisation de la page va alors s’adapter au type de taille d’écran choisi.

Vous pourrez alors designer votre page en vous rendant directement compte de ce que vos réglages donneront.

Quand vous êtes 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 !

Cliquez sur un élément de votre page – section, colonne, ou widget – pour vérifier ça par vous-même.

Par exemple, cliquez pour vous mettre en mode téléphone, puis cliquez sur une section et allez dans l’onglet avancé : vous constatez 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 ne s’appliqueront qu’à ce format. Vous pouvez cliquer sur cette icône pour choisir un autre format responsive.

Revenons à la barre responsive : vous avez, après les 3 petites icônes, les signes – et +, et un chiffre avec un %. C’est le 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’icone de flèche circulaire remet le niveau de zoom à 100%.

A droite de cette barre responsive, vous avez les lettres W et H, suivies d’une case avec un chiffre. W veut dire width = largeur, H veut dire Height = hauteur. Cela vous permet de définir manuellement la taille de l’écran, si vous travaillez pour une taille d’écran donnée, par exemple un iPhone.

Voilà donc une excellente manière de créer un design en mode responsive.

D’ordinaire, une bonne méthode consiste à faire le design d’abord sous un format donné, mettons l’ordinateur, puis quand celui-ci vous semble abouti, alors vous passez en mode tablette, vous adaptez tout ce qui doit l’être, puis vous passez en mode téléphone, vous adaptez encore, et voilà, le design responsive est fini.

Pour sortir du mode responsive, cliquez simplement sur la croix en haut à droite. Cela vous ramène au mode normal où vos réglages s’appliquent, par défaut, à la version ordinateur / desktop.

Les réglages responsive

Même en-dehors du mode responsive vous pouvez toujours gérer la responsivité.

Il suffit d’aller dans n’importe quel réglage d’élément ou de widget.

Par exemple, j’ai cliqué sur le widget texte que je suis en train d’écrire, dans la colonne de gauche j’ai cliqué dans le 3è onglet, Avancé, et voici les réglages disponibles : on voit que juste après les réglages marge, marge interne, largeur et index-z, on a une petite icône qui montre un téléphone.

Il suffit de cliquer dessus, cela ouvre un mini menu déroulant avec les 3 icônes des types d’écran, on en clique un et ensuite, les réglages s’appliqueront à ce type de format d’écran et pas aux autres.

Reglages responsive de la mise en page
Réglages responsive de la mise en page

Cachez des éléments sur ordinateur, tablette ou mobile

Le design responsive consiste à faire en sorte que les éléments d’une page s’ajustent à l’espace disponible.

Mais il arrive qu’on veuille aller plus loin, jusqu’à cacher certains éléments sur certains formats d’écran, par exemple parce qu’ils seraient trop lourds à charger sur mobile.

Imaginons par exemple que vous ayez une section avec deux colonnes de texte et une colonne contenant une image. En mode mobile, vous souhaitez 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, allez dans la partie Responsive, et là, cliquez sur Masquer sur mobile. Et voilà, l’image n’apparaitra plus que sur tablette et sur ordi.

Dans un autre cas de figure, vous pourriez vouloir faire des mises en forme très différentes d’une section de votre design selon le 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 plomber 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.

Elementor Responsive masquer sur mobile
Masquer un élément sur mobile

Qu'avez-vous pensé de cet article ?

Cliquez sur une étoile pour donner votre avis

Avis moyen 0 / 5. Nombre d'avis donnés 0

Soyez le premier à donner votre avis

Ouvrir les commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Besoin d’un hébergeur ?

Convivial, sympa, fiable, et pas cher,
O2Switch me semble être la meilleure offre actuellement sur le marché français.
C’est pourquoi j’y héberge tous mes sites.

Panier
Retour haut de page