Service Web : Découvrez Elementor : Guide complet des widgets et éléments pour un webdesign efficace

Plongez dans l'univers d'Elementor, le meilleur constructeur de pages pour WordPress. Explorez ses widgets et éléments pour créer des designs remarquables. De la structuration des sections à la mise en forme des textes et images, découvrez comment Elementor facilite le webdesign.

Présentation d'Elementor

Dans l'univers WordPress, autant dire sur la moitié du web, on ne présente plus Elementor. Il s'agit en effet du constructeur de pages leader du marché, disponible en version gratuite et en version pro. Loin devant ses concurrents (l'ignoble Gutenberg, le moyen WP Bakery), Elementor propose une interface claire, accessible aux débutants, capable de créer des maquettes complexes dans un langage graphique somme toute assez simple, sobre et pratique. Par rapport à l'éditeur classique (Classic Editor) de WordPress, l'avantage des constructeurs de pages (page builders) tels qu'Elementor est de donner accès facilement et rapidement à une série d'éléments de webdesign : des sections des colonnes des textes des images des vidéos et toute une série de widgets : carrousels, galeries, et autres éléments plus ou moins sophistiqués Passons maintenant en revue les principaux éléments d'une page web qu'Elementor permet de styler avec classe.

La section

La section est une grande partie d'une page web. On peut la distinguer des autres sections de plusieurs manières : en changeant la couleur de fond en plaçant un séparateur avant et / ou après en changeant la maquette, par ex de 1 colonne à 2 ou 3 colonnes La section intègre d'autres éléments : des sections internes des colonnes

La colonne

Chaque section contient au minimum une colonne. Il est possible d'en utiliser n'importe quel nombre - sans abuser bien sûr car plus il y en a, moins elles sont larges et moins le texte est lisible. Sur ordinateur, les colonnes d'une section ou d'une section interne se disposent dans la largeur, horizontalement, les unes à côté des autres Sur mobile, elles sont responsive, c'est à dire qu'elles se placent automatiquement les unes au-dessous des autres : la deuxième colonne se place au-dessous de la première et ainsi de suite. On peut décider de l'alignement des éléments dans ces colonnes, vertical aussi bien qu'horizontal. On peut donc aligner en haut, en bas, à gauche, à droite, ou tout centrer. Les colonnes peuvent intégrer des éléments multimédia divers : des textes, des images, des vidéos et toutes sortes de widgets.

Les textes

Il existe deux manières d'ajouter du texte dans une colonne sur Elementor. Soit on ajoute un widget Titre, soit on ajoute un widget Editeur de texte. Le widget Titre a des réglages qui permettent de choisir le niveau de titre (H1, H2, H3 etc). Le widget Editeur de texte permet de styler n'importe quel texte, qu'il contienne des titres Hn ou pas. A vrai dire, les deux font double-emploi et seuls les grands débutants trouveront le widget Titre pratique. Perso, je n'utilise que l'éditeur de texte, même si je dois mettre en forme un titre.

Les images (et les widgets d'image)

Les images s'insèrent très simplement grâce à un widget image : il suffit de le faire glisser dans la maquette, puis de cliquer sur l'image par défaut et d'aller choisir ou téléverser son image dans la médiathèque. On choisit ensuite des réglages de style - on peut par exemple définir une couleur en surimpression, une marge, un padding, une bordure, un ombrage CSS, etc. Il y a aussi des widgets qui permettent d'afficher plusieurs images à la fois : sous forme de galerie d'image : une liste, une série d'images, présentées en colonnes ou en mode "masonry" ou sous forme de carrousel, de diaporama : une série d'images présentées l'une après l'autre de manière dynamique.

Les widgets

Elementor est fourni avec une vaste liste de widgets, et celle-ci peut s'allonger encore en installant ce qu'on appelle des add-ons, parfois gratuits, plus souvent payants ou "premium". Parmi les widgets gratuits d'Elementor, j'apprécie notamment l'accordéon et le va-et-vient. Les deux sont des interfaces faites pour afficher du texte de manière compacte : ils présentent des titres qui s'ouvrent et se déplient pour rendre visibles et lisibles des textes plus longs. C'est très utile quand on fait à la fois du webdesign et du référencement SEO : en effet il est bon de placer beaucoup de texte dans une page, mais il est bon aussi d'en cacher une partie pour rendre la mise en page plus digeste, en évitant au maximum les gros pavés de texte. Les widgets va-et-vient et accordéon règlent les deux problèmes d'un coup. La différence entre les deux tient au fait que le premier élément d'un accordéon est déplié par défaut, et donc qu'il prend de la place ; raison pour laquelle je lui préfère la version va-et-vient, où chaque élément est fermé par défaut. Il existe de nombreux autres widgets qui mettent en forme des éléments spécifiques d'une page web : des comparatifs de prix et des grilles tarifaires, des témoignages client, des membres de l'équipe, des jauges, des statistiques, des titres animés, etc etc.

Conclusion

Bref, je vous invite à tester et explorer Elementor par vous-même car il y a vraiment de quoi faire. C'est un outil aussi puissant qu'ergonomique, dont la courbe d'apprentissage conviendra même pour le grand-public amateur ; entre les mains des professionnels, c'est tout simplement un bijou.