Adaptez votre site aux mobiles et tablettes avec le mode responsive d’Elementor

Souvent, les internautes qui surfent sur mobile et encore plus sur tablette (iPad etc) ont la désagréable surprise de constater que le webdesign a été négligé pour ce format d’écran. 

Ainsi, divers éléments ne sont pas à la bonne taille – trop gros ou trop petits -, des marges internes ou externes conçues pour écran d’ordinateur apparaissent disproportionnées, etc.

Heureusement pour mieux gérer ces aspects, les créateurs de sites web qui utilisent Elementor disposent d’outils efficaces pour assurer un affichage correct sur tous les types d’écrans.

En route pour découvrir comment tout cela fonctionne !

Elementor, constructeur de pages pour WordPress

On ne présente plus Elementor, leader des « constructeurs de pages » (en anglais, page builders) pour le CMS WordPress, qui est le système de publication de contenus le plus utilisé au monde, avec environ 45% de part de marché.

Mais si vous viviez jusqu’ici dans une caverne, voici quelques infos pour poser le thème.

Elementor est un plugin, gratuit à la base, qui vient remplacer l’éditeur classique de WordPress, qui lui ne permet de faire que de l’édition d’une manière très linéaire : on ajoute un texte, qu’on formate en tant que titre ou paragraphe, on peut aussi ajouter une image, une galerie d’images, une vidéo, mais ça ne va guère plus loin.

Elementor, et encore plus sa version premium Elementor Pro, étend énormément les possibilités graphiques de WordPress, raison pour laquelle il est utilisé sur des millions de sites Internet professionnels, de médias en ligne, d’entreprises etc.

Ainsi, Elementor offre de nombres éléments graphiques – d’où son nom ! – comme des colonnes, des titres fantaisie, des icônes, des accordéons, etc etc.

Le problème de la responsivité

Le problème de la responsivité est un casse-tête connu depuis les origines du web. En effet, dès les années 1990 les premiers sites du web nouveau-né étaient déjà destinés à s’afficher sur des écrans de tailles différentes, posant donc le problème de la « bonne taille » de chaque élément : combien de pixels doivent faire les titres, les paragraphes, comment doit-on dimensionner les images, pour que tout s’affiche de manière satisfaisante, sans apparaitre illisible ni tronqué ?

Avec l’arrivée des mobiles dans les années 2000, puis des tablettes, et leur généralisation dans les années 2010, le problème de la responsivité, c’est-à-dire de l’adaptation des contenus d’une page à la taille de l’écran (et à son format, horizontal ou vertical) s’est encore aggravé.

CSS et media queries

Mais en parallèle, les solutions se sont elles aussi multipliées : le langage CSS a développé les « media queries », qui conditionnent les propriétés des éléments à la taille de l’écran. On peut par exemple déclarer : si l’écran est moins large que 920 pixels, alors le titre H1 doit s’écrire en une police de caractères de 18 pixels, mais s’il mesure plus de 920 px, alors ce titre doit s’écrire en 24 px. Et ainsi de suite.

C’est ce qu’on appelle le responsive design, ou design responsif.

Gérer la responsivité sous Elementor

Un souci du CSS et de ses fonctionnalités responsive, c’est qu’il semble compliqué à apprendre pour de nombreux webdesigners amateurs.

Là, Elementor révèle sa pleine utilité, en proposant l’équivalent du CSS, mais en mode totalement WYSIWYG, c’est-à-dire intuitif et sans code apparent.

Créer une maquette responsive

Pour créer une maquette Elementor responsive, créez une page web, et ouvrez-la sous Elementor.

Ajoutez-y des éléments – des titres, des textes, des images, des vidéos, des widgets divers et variés.

Maintenant, regardez : vous pouvez cliquer sur n’importe quel élément pour le sélectionner puis aller dans les réglages de l’éditeur visuel, dans l’onglet Avancé. Là, vous trouverez une section responsive.

Elle vous permettra notamment de décider si tel ou tel élément doit s’afficher sur tel et tel format d’écran. Vous pouvez par exemple décider d’afficher une section fort complexe sur ordinateur et tablette, et une version simplifiée vouée à ne s’afficher que si le terminal est un écran de smartphone.

Vous pouvez aussi adapter chaque réglage de style ou d’affichage à chaque type d’écran. Remarquez que pour chaque réglage possible, vous avez une petite icône représentant un écran, d’ordinateur, de tablette ou de mobile. Cliquez dessus et cela ouvre un menu déroulant montrant les deux autres types d’écran possible. Cliquez sur l’un d’eux et cela vous permet de définir la valeur de ce réglage sur ce terminal.

Par exemple, vous pouvez sélectionner un élément texte, en mode ordinateur, et définir sa marge à 1rem. Puis, sélectionnez le mode tablette, et définissez la marge à .5rem. Puis, sélectionnez le mode mobile et définissez la marge à 0rem. Voilà, dorénavant le même élément apparaitra avec 3 réglages de marge différents en fonction de la taille de l’écran de l’internaute qui consulte la page.

Cette adaptation responsive va pouvoir s’opérer sur tous types de réglages graphiques d’Elementor : les couleurs, les typos, le padding, la largeur et la hauteur des images, etc etc.

Autre exemple d’un réglage responsive bien pratique : si vous avez un gros bloc de texte, vous aimeriez bien qu’il se dispose automatiquement en 2 ou 3 colonnes quand on le lit sur un écran large ou très large, mais en une seule colonne sur un petit écran de mobile. Dans ce cas, il vous suffira de cliquer sur cet élément texte pour le sélectionner, puis d’aller dans ses propriétés et de trouver le réglage « nombre de colonnes » : sur mobile, mettez 1, sur tablette, mettez 2, et sur ordinateur, mettez 3. 

Voilà, vous avez maintenant une meilleure idée de comment gérer la responsivité sous Elementor. Allez tester cela vous même et comparer vos pages sur divers appareils, car rien ne vaut l’expérience personnelle. Bon courage dans vos créations !

Pour en savoir plus, consultez cette page : https://boutique-wordpress.fr/elementor-responsive/