16. Les widgets classiques indispensables

Les éléments atomiques construisent la page et portent le texte, les images et les boutons. Pour tout le reste — une boîte à icône, une galerie, un accordéon de questions, un compteur, une carte — Elementor gratuit fournit une trentaine de widgets « classiques » qui n’ont pas encore d’équivalent atomique. Ce chapitre les passe en revue un par un, dit lesquels servent vraiment à un site vitrine, et montre comment les régler et les loger dans une mise en page atomique.

16.1 — Pourquoi les widgets classiques restent utiles

Le chapitre 06 a posé la règle du support : la mise en page, le texte, les images et les boutons se font avec les éléments atomiques ; pour le reste, on pioche dans les widgets classiques. Ce « reste » n’est pas négligeable. Une page « À propos » a besoin de trois valeurs illustrées d’une icône, de chiffres clés, d’avis clients et d’une foire aux questions ; une page « Contact » a besoin d’un plan ; une page « Réalisations » d’une galerie. Aucun de ces blocs n’existe encore en version atomique dans Elementor 4.2, et tous existent depuis des années en version classique. Les widgets classiques ne sont donc pas un héritage à éviter : ce sont des outils finis, entretenus, que l’on utilise en connaissance de cause.

Reconnaître un widget classique

Dans le panneau, les éléments atomiques occupent la première catégorie, en tête de liste. En dessous viennent les widgets classiques, rangés par catégories (Basique, Général, puis les catégories Pro quand la licence est active). Le champ de recherche du panneau accepte les noms français et anglais : compteur ou counter donnent le même résultat. Une fois le widget déposé sur la toile, le second indice ne trompe pas : le panneau affiche trois onglets au lieu de deux. La Structure (Ctrl+I, Cmd sur Mac) les montre avec leur icône propre, sous le conteneur qui les héberge.

Les trois onglets

L’onglet Contenu dit quoi afficher : les textes, l’image, l’icône, les liens, la liste des éléments d’un accordéon ou d’une galerie. L’onglet Style dit comment : couleurs, tailles et typographie de chaque partie du widget, souvent avec deux sous-onglets Normal et Au survol. L’onglet Avancé est le même pour tous les widgets et correspond à l’onglet Style d’un atome : marge externe et marge interne, largeur de l’élément, position et z-index, un champ ID CSS et un champ Classes CSS, puis les sections Effets de mouvement, Arrière-plan (parfois traduit « Fond »), Bordure, Masque et Responsive, où l’on peut masquer le widget sur ordinateur, tablette ou mobile. Les sections Attributs et CSS personnalisé demandent Elementor Pro.

Placer un widget dans une mise en page atomique

Un widget classique se dépose dans un Flexbox, un Bloc Div ou une Grille exactement comme un Titre ou un Bouton atomique : on le glisse depuis le panneau jusqu’à la ligne bleue qui indique sa place. C’est ensuite le conteneur parent qui décide de sa position (Justifier le contenu, Aligner les éléments, Écart) ; le widget lui-même ne règle que sa propre largeur, dans Avancé › Mise en page › Largeur, où « Pleine largeur » lui fait occuper toute la place disponible et « En ligne » la seule largeur de son contenu. Deux choses ne passent pas la frontière entre les générations. Les Classes et les Variables de l’Éditeur atomique (chapitre 18) sont réservées aux atomes : un widget classique prend ses couleurs par défaut dans les Couleurs et Polices globales des Réglages du site (chapitre 19), et le reste se règle à la main. Les Interactions atomiques n’existent pas non plus : l’animation d’un widget se règle dans Avancé › Effets de mouvement (chapitre 20). En revanche, le clic droit offre Coller le style (Ctrl+Shift+V) et Réinitialiser le style, deux commandes précieuses pour harmoniser trois widgets voisins.

16.2 — Icônes, images et vidéo

Ces huit widgets couvrent tout ce qui « illustre » un site vitrine au-delà de la simple Image atomique : les pictogrammes, les blocs image-plus-texte, les galeries et les vidéos hébergées ailleurs.

16.3 — Preuves et chiffres

Un site vitrine convainc par des preuves : ce que disent les clients, depuis quand l’entreprise existe, combien de chantiers elle a livrés. Ces quatre widgets les mettent en scène — à condition que les chiffres soient vrais.

16.4 — Organiser le texte

Quand une page contient beaucoup de texte, ces widgets le rangent : en onglets, en accordéon, en message d’alerte. La règle est la même pour tous : ce qui est caché derrière un clic est moins lu. On y met le complément, jamais l’essentiel.

16.5 — Structure et repères

Quatre widgets ne montrent presque rien mais organisent la page : un trait, un espace, un point d’ancrage, une zone de widgets WordPress. Deux d’entre eux méritent qu’on s’en méfie.

16.6 — Contenus extérieurs et code

Ces six widgets font entrer dans la page quelque chose qui vient d’ailleurs : une carte Google, un lecteur audio, un code fourni par un tiers, ou un effet de texte. Ils appellent une vigilance particulière, expliquée après les cartes.

16.7 — Tableau de synthèse : quel widget pour quelle page

Le tableau ci-dessous reprend les widgets qui trouvent réellement leur place sur un site vitrine d’artisan et indique la page de la Menuiserie Roche où chacun sert. Les autres restent disponibles pour des besoins particuliers.

16.8 — Styler un widget classique : la Boîte d’icône pas à pas

Tous les widgets se stylent de la même façon, et la Boîte d’icône est le meilleur terrain d’entraînement parce qu’elle a trois parties (icône, titre, description) réglables séparément. Le principe : le conteneur parent porte le fond, la bordure et l’ombre de la carte ; le widget ne porte que son contenu et ses couleurs. Cette répartition prépare le chapitre 18, où le conteneur recevra une classe « carte » partagée par toute la page.

1. Préparez le conteneur. Sur la page À propos, déposez une Grille atomique de trois colonnes (chapitre 09), écart 32 px, et dans sa première cellule un Bloc Div. Nommez-les « Valeurs » et « Valeur 1 » dans la Structure.
2. Déposez la Boîte d’icône dans le Bloc Div. Onglet Contenu : choisissez l’icône dans la bibliothèque (une feuille d’arbre, par exemple) ou téléversez un SVG ; titre « Bois local » ; description en deux lignes ; position de l’icône Haut ; balise du titre H3.
3. Réglez l’icône. Onglet Style, section Icône : couleur principale bois chaud #A8663C, taille 40 px, espacement de 16 px entre l’icône et le titre. Essayez la vue « encadrée » avec la forme cercle, puis revenez à la vue par défaut si le résultat charge le bloc.
4. Réglez le texte. Toujours dans Style, section Contenu : alignement centré ; espacement du titre 8 px ; couleur du titre anthracite #2B2B2B avec la police de titres du site ; description en gris moyen, 17 px, interligne 1,5. Si les couleurs proposées par défaut vous conviennent, c’est qu’elles viennent des Couleurs globales (chapitre 19).
5. Réglez l’espace. Onglet Avancé : marge interne 24 px sur les quatre côtés (icône de liaison activée), marge externe 0. Laissez vides les sections Arrière-plan et Bordure du widget : c’est le Bloc Div parent qui recevra fond blanc, coins arrondis et ombre (chapitre 17).
6. Dupliquez et harmonisez. Dupliquez le Bloc Div (Ctrl+D) deux fois, changez icône, titre et description des copies (« Sur mesure », « Pose soignée »). Si vous aviez déjà créé les trois boîtes séparément, un clic droit sur la première › Copier, puis sur chacune des autres › Coller le style aligne tout en deux gestes.
7. Vérifiez sur mobile. Ctrl+Shift+M : la Grille passe à une colonne (chapitre 12), les trois boîtes s’empilent, l’icône reste à 40 px. Si l’une d’elles doit disparaître sur téléphone, Avancé › Responsive › Masquer sur mobile s’en charge.

Le widget apporte la fonction ; le conteneur apporte la place et l’habillage. Quand chacun reste à son rôle, la page se tient.