06. Deux générations d’éléments : atomiques et widgets classiques

Le panneau montre deux familles d’éléments : une courte liste d’« éléments atomiques » en tête, puis des dizaines de widgets par catégories. Ce chapitre explique d’où viennent ces deux générations, ce qui les distingue, et la règle que suit ce support pour les combiner.

En bref

Public: Toute personne qui hésite entre deux éléments du panneau qui portent presque le même nom.
Enjeu: Choisir la bonne génération à chaque dépôt, et lire sans crainte un site construit avant 2026.
Idée clé: On construit avec les éléments atomiques, on complète avec les widgets classiques.
Prérequis: Chapitres 03 et 05.
Lecture: Environ 12 minutes (+ 25 minutes d’exercices).

6.1 — Dix ans d’Elementor en trois étapes

Elementor est né en 2016. Pendant six ans, une page se construisait avec des Sections, découpées en Colonnes, dans lesquelles on déposait des widgets. Simple mais rigide : une colonne ne pouvait contenir que des widgets, et chaque niveau ajoutait du code invisible. Le chapitre 11 apprend à lire ces sites, encore nombreux.

En 2022, Elementor a introduit le Conteneur (Container), fondé sur une technique du navigateur appelée Flexbox : il peut en contenir d’autres, se dispose en ligne ou en colonne, et remplace à lui seul le couple Section + Colonne. Les widgets n’ont pas changé : ce sont ceux que nous appelons « classiques », à trois onglets.

En juillet 2025, avec la version 3.30, Elementor a proposé en test un nouvel éditeur, dit Éditeur atomique ou V4 ; la version 3.35, en février 2026, l’a déclaré prêt pour la production ; la version 4.0, publiée le 30 mars 2026, l’a rendu stable et activé par défaut sur tous les nouveaux sites. Depuis, deux générations cohabitent dans le même panneau : c’est l’état normal d’Elementor en 2026.

Figure 6.1 — Trois générations en dix ans ; deux servent encore, une seule pour construire.

Définition

Élément atomique — une brique de base de l’Éditeur V4 (conteneur, titre, paragraphe, bouton, image…) conçue pour être la plus petite unité possible, d’où le mot « atome ». Chaque atome partage le même onglet Style, accepte classes et variables (chapitre 18) et produit un code HTML plus sobre. Sa catégorie, Éléments atomiques (Atomic Elements), ouvre le panneau.

6.2 — Ce qui change concrètement

Deux onglets au lieu de trois

Un widget classique présente trois onglets : Contenu (Content) pour ce qu’il affiche, Style pour son apparence et Avancé (Advanced) pour ses marges, sa position, ses effets et son CSS. Chaque widget a son propre onglet Style, différent de celui du voisin.

Un élément atomique n’a que deux onglets, Général (General) et Style, complétés par Interactions. Le premier tient en quelques champs : le texte et la balise pour un Titre, la balise HTML et le lien pour un Flexbox. Le second est le même pour tous les atomes, toujours dans le même ordre : Mise en page (Layout), Espacement (Spacing), Taille (Size), Position, Typographie (Typography), Arrière-plan (Background), Bordure (Border) et Effets (Effects). Appris sur un Titre, il est appris pour tous (Centre d’aide Elementor, page « Style tab: Layout »).

Responsive, partageable, plus léger

Dans un atome, toutes les options de l’onglet Style se règlent par appareil (chapitre 12), là où un widget classique n’en offre que certaines. Les classes et variables du Système de conception — un style nommé, réutilisable sur cent éléments — ne s’appliquent qu’aux atomes (chapitre 18). Un atome produit le plus souvent une seule boîte HTML là où un widget en empile plusieurs (chapitre 33). En contrepartie, le tableau officiel signale deux absences : pas de HTML dans les champs, et pas de bouton « rétablir par défaut ». Enfin, l’onglet Interactions anime un atome à l’entrée (gratuit) ou au défilement, au survol et au clic (Pro, chapitre 20).

Point de comparaison	Widget classique (V3)	Élément atomique (V4)
Onglets du panneau	Contenu · Style · Avancé	Général · Style (+ Interactions)
Onglet Style	Propre à chaque widget	Identique pour tous, huit sections
Réglages responsives	Certains champs seulement	Toutes les options de Style
Classes et variables	Non (Couleurs et Polices globales)	Oui, avec le Gestionnaire de classe
Position collante (sticky)	En haut ou en bas	Sur les quatre côtés
Code HTML produit	Plusieurs boîtes imbriquées	Le plus souvent une seule
HTML dans les champs, « rétablir par défaut »	Oui	Non

6.3 — Inventaire des éléments atomiques (septembre 2026)

Liste au 6 septembre 2026 (Elementor 4.2.4, Pro 4.2.x) ; elle s’allonge à chaque version, votre panneau fait foi. Les trois premiers sont des conteneurs.

Bloc Div Gratuit Atomique

Le conteneur générique, le plus léger : il empile ses enfants sans disposition particulière. Idéal pour une carte. Balise HTML au choix (Div, Section, Header, Footer…).

Flexbox Gratuit Atomique

Le conteneur de mise en page : il range ses enfants en ligne ou en colonne, les centre, les espace (Écart), les fait passer à la ligne. La brique de toute section.

Grille Gratuit Atomique

Le conteneur en lignes et colonnes (version 4.2) : unités CSS dont fr, « Schéma de la grille », placement d’un enfant sur plusieurs cases. Chapitre 09.

Titre Gratuit Atomique

Un titre H1 à H6, lien et identifiant facultatifs, modifiable directement sur la toile. Un seul H1 par page (chapitre 13).

Paragraphe Gratuit Atomique

Un bloc de texte courant, avec liens, gras et italique. Pas de listes ni de tableaux : pour cela, le widget Éditeur de texte classique.

Bouton Gratuit Atomique

Texte, lien, identifiant, édition sur la toile. Tout son habillage (fond, bordure, rayon, typographie) passe par l’onglet Style commun. Chapitre 15.

Image Gratuit Atomique

Une image de la Médiathèque ou une adresse externe, résolution, lien facultatif. Hauteur, ajustement et coins arrondis dans Style. Chapitre 14.

SVG Gratuit Atomique

Un dessin vectoriel (logo, pictogramme) net à toute taille. Exporté en noir sans couleur fixée, il se recolore depuis Typographie.

Vidéo Gratuit Atomique

Une vidéo hébergée sur votre site : début et fin, lecture automatique, muet, boucle, image de couverture.

YouTube Gratuit Atomique

L’équivalent pour une vidéo YouTube, à partir de son adresse, avec début et fin. Pour Vimeo ou Dailymotion : widget Vidéo classique.

Onglets Gratuit Atomique

Des onglets dont chaque volet est un conteneur libre : éléments de menu, volet par défaut, disposition en ligne ou en colonne.

Séparateur Gratuit Atomique

Une ligne horizontale de séparation. Cet atome est récent : s’il n’apparaît pas dans votre panneau, le widget Séparateur classique fait le même travail.

Formulaire atomique Pro Atomique

Depuis Pro 4.0 : un conteneur Formulaire et ses champs (Libellé, Champ, Zone de texte, Case à cocher, Bouton radio, Sélecteurs de date et d’heure, Sélection, Téléversement, Soumettre). Actions Email, Email 2, Collecter les envois, Webhook. Chapitre 28.

Composants Pro Atomique

Un bloc construit une fois, inséré partout, mis à jour partout d’un coup. Atomes uniquement ; propriétés exposées (texte, image) modifiables par instance. Chapitre 22.

Boucle atomique Pro Atomique

Depuis Pro 4.2 : éléments Boucle, Disposition de boucle et Élément de boucle, soit « pour chaque article, applique ce gabarit ». Source, nombre, tri, pagination. Chapitre 27.

Interactions avancées Pro Atomique

Depuis Pro 4.0, sur tout atome : déclencheurs Défilement à l’écran, Pendant le défilement, Au survol, Au clic, effet personnalisé, réglage par point de rupture. Chapitre 20.

Elementor Pro

Sur les atomes, Pro ajoute aussi les Conditions d’affichage (montrer un élément selon la date, la page ou le rôle du visiteur) et le CSS personnalisé par élément, réservé aux plans Advanced et supérieurs — comme l’action Collecter les envois du Formulaire atomique (chapitre 02).

6.4 — Les widgets classiques : ce qu’on continue d’utiliser

Les atomes couvrent la mise en page, le texte, les boutons, les images et la vidéo : l’essentiel d’une page vitrine, mais pas tout. Une galerie, un carrousel, une Boîte d’icône, un Témoignage, un Compteur, un Accordéon, une carte Google Maps, un Menu WordPress (Pro) ou une grille d’articles (Publications, Loop Grid, Pro) passent encore par les widgets classiques. Le chapitre 16 les passe en revue.

Un widget classique se dépose dans un conteneur atomique comme un atome. Glissez une Boîte d’icône dans un Flexbox : elle s’aligne, s’espace et passe à la ligne selon ses règles. Ses réglages restent dans ses trois onglets, son emplacement est régi par le conteneur. C’est ce mélange contrôlé que le support recommande.

Méthode

La règle du support tient en deux phrases. Un. Toute mise en page — sections, colonnes, cartes, bandeaux — et tout texte, bouton ou image se fait avec des éléments atomiques. Deux. Quand une fonction n’existe pas en atomique, on dépose le widget classique à l’intérieur d’un conteneur atomique, jamais l’inverse. La structure reste légère, responsive et pilotable par classes ; les widgets sont des invités.

À éviter

Mélanger sans règle : un Conteneur classique ici, un Flexbox là, un widget Titre à côté d’un Titre atomique, selon ce que le panneau propose. Résultat : deux façons de régler l’espacement et le mobile, des classes qui ne touchent que la moitié des titres.

À faire

Mélanger avec méthode : tous les conteneurs, titres, paragraphes et boutons sont atomiques ; les widgets classiques sont réservés aux fonctions sans équivalent et toujours posés dans un Flexbox ou un Bloc Div. Un changement de police tient alors en une variable.

Piège classique

Si, en déposant votre premier élément sur une page vide, une Section ou un Conteneur à trois onglets apparaît, l’Éditeur atomique n’est pas actif. Ne continuez pas : activez-le d’abord (section 6.5).

6.5 — Reconnaître un atome et activer l’Éditeur atomique

Trois indices qui ne trompent pas

Dans le panneau, les atomes occupent la première catégorie, avec une icône distincte. Sélectionné, l’élément n’affiche que deux onglets, Général et Style. Enfin, en haut de l’onglet Style, un champ Classes montre une classe locale en rose : ce champ n’existe sur aucun widget classique. Dans la Structure, « Flexbox », « Bloc Div » et « Grille » sont des atomes ; « Conteneur », « Section » et « Colonne » n’en sont pas.

Activer ou désactiver l’Éditeur atomique

Sur un site créé avec Elementor 4.x, l’Éditeur atomique est actif d’office. Sur un site plus ancien mis à jour, il ne l’est pas : Elementor affiche seulement une notice dans le panneau des éléments. Le réglage se trouve dans l’administration WordPress.

Ouvrez les réglages d’Elementor. Dans l’administration WordPress, allez dans Elementor › Éditeur › Réglages.
Choisissez l’onglet Éditeur Atomic. À côté de Général, Intégrations, Avancé, Performance et Fonctionnalités, un onglet Éditeur Atomic (Atomic Editor) lui est consacré.
Activez la nouvelle expérience. Cliquez sur le bouton d’activation (Activate the new experience). Cela active aussi Flexbox Container, Éléments imbriqués (Nested Elements) et la barre supérieure, dont l’Éditeur atomique dépend.
Vérifiez dans l’éditeur. Ouvrez une page : la catégorie Éléments atomiques doit apparaître en tête du panneau. Sinon, rechargez la page.
Pour revenir en arrière. Le même onglet permet de le désactiver ; sur un site qui contient déjà des atomes, jamais sans sauvegarde préalable.

Attention

Sur un site existant construit en Sections ou en Conteneurs classiques, activer l’Éditeur atomique ne transforme rien : les pages restent telles quelles. Vous gagnez seulement les atomes pour les nouvelles pages et sections. Le chapitre 11 explique quand reconstruire.

Exercice 6.1 — Atomique ou classique ? 10 min

Objectif : reconnaître la génération d’un élément aux seuls indices du panneau et de la Structure.

Un conteneur « Section » dans la Structure, contenant deux « Colonne ».
Un titre à trois onglets : Contenu, Style, Avancé.
Un titre dont l’onglet Style commence par un champ Classes à étiquette rose.
Un conteneur « Flexbox », avec une liste Balise HTML dans Général.
Une Boîte d’icône de la catégorie Général du panneau.
Un bouton dont on modifie le texte sur la toile, avec deux onglets.
Un « Conteneur » aux onglets Mise en page, Style, Avancé.
Une Galerie basique déposée dans un Flexbox.

Résultat attendu : pour chaque cas, « atomique » ou « classique », et conforme ou non à la règle. Réponses : 1 classique, obsolète ; 2 classique ; 3 atomique ; 4 atomique ; 5 classique, acceptable dans un atome ; 6 atomique ; 7 classique, à ne plus créer ; 8 classique dans un atome, conforme.

Exercice 6.2 — Reconstruire un bandeau en atomique 15 min

Objectif : refaire en atomique un bandeau d’appel au devis décrit en ancienne génération, et constater la différence dans la Structure.

Le bandeau d’origine se lit ainsi dans la Structure : Section (fond vert sauge) › Colonne › widget Titre « Un projet ? Parlons-en. » › widget Bouton « Demander un devis ».
Sur la page « Bac à sable », déposez un Flexbox. Général : Balise HTML Section. Style › Mise en page : Direction Colonne, Aligner les éléments Center, Écart 16. Espacement : marge interne 48 px sur les quatre côtés. Arrière-plan : #7A9E7E.
Déposez dedans un Titre : texte « Un projet ? Parlons-en. », balise H2, couleur #FAF7F2, centré.
Déposez sous le titre un Bouton : texte « Demander un devis », arrière-plan #A8663C, texte #FAF7F2.
Ouvrez la Structure (Ctrl+I, Cmd+I sur Mac), renommez le Flexbox « Appel au devis », enregistrez en brouillon.

Résultat attendu : un bandeau vert sauge, titre clair et bouton bois centrés, dont la Structure tient en trois lignes au lieu de quatre niveaux ; vous savez expliquer pourquoi la Colonne a disparu.

À retenir

Trois générations : Sections et Colonnes (2016), Conteneur Flexbox (2022), Éditeur atomique (stable depuis le 30 mars 2026, par défaut sur les nouveaux sites).
Un atome se reconnaît à sa catégorie Éléments atomiques, à ses deux onglets Général et Style, et au champ Classes.
L’onglet Style des atomes est identique pour tous et entièrement responsive ; classes et variables ne s’appliquent qu’aux atomes.
Règle du support : mise en page, texte, boutons et images en atomique ; widgets classiques seulement pour ce qui n’existe pas en atome, toujours dans un conteneur atomique.
L’Éditeur atomique s’active dans Elementor › Éditeur › Réglages › Éditeur Atomic ; un site ancien n’est pas converti, il gagne de nouveaux outils.