Trois niveaux obligatoires pour poser un simple bouton : une section, une colonne à l’intérieur, puis le widget. Depuis la version 3.6 d’Elementor, sortie en mars 2022, ce schéma n’est plus une fatalité. Le nouveau type d’élément, le conteneur, remplace la paire section-colonne par un seul bloc capable de s’imbriquer à volonté et de gérer lui-même l’alignement de son contenu grâce à flexbox.
Ce choix n’est pas cosmétique. Il répond à des limites concrètes rencontrées par les intégrateurs depuis des années : colonnes qui refusent de s’étirer verticalement les unes par rapport aux autres, marges négatives bricolées pour aligner des éléments, impossibilité de centrer un widget unique sans lui coller une colonne entière. Comprendre pourquoi Elementor a changé de modèle aide à savoir quand migrer un ancien projet et quand laisser les Sections tranquilles.
Les limites du modèle Section / Colonne
Dans l’ancien système, une Section ne pouvait contenir que des Colonne, et une Colonne ne pouvait contenir que des widgets. Impossible d’imbriquer une section dans une colonne sans passer par l’extension expérimentale « Nested Sections », elle-même remplacée depuis par les conteneurs. Cette rigidité obligeait à empiler des sections entières pour obtenir une mise en page à deux niveaux, ce qui alourdissait le DOM et compliquait la maintenance : localiser le bon niveau dans l’arborescence Elementor devenait un jeu de devinettes sur les projets de plus de cinquante sections.
L’alignement posait un problème du même ordre. Les colonnes reposaient sur des largeurs en pourcentage calculées au moment de la sauvegarde, ce qui produisait des écarts d’un ou deux pixels visibles au zoom, et rendait le comportement responsive imprévisible dès qu’on changeait l’ordre des colonnes sur mobile.
Ce que le modèle flexbox apporte concrètement
Le conteneur s’appuie directement sur les propriétés CSS display: flex, justify-content et align-items. Concrètement, un conteneur peut :
- s’imbriquer dans un autre conteneur sans limite de profondeur ni extension à activer ;
- accueillir un widget directement, sans colonne intermédiaire ;
- basculer d’une direction horizontale à verticale par point de rupture, ce qui simplifie les mises en page responsive complexes ;
- répartir l’espace disponible avec les propriétés
flex-growetflex-shrinkexposées dans le panneau, plutôt qu’un pourcentage figé.
Ce changement réduit aussi la profondeur moyenne du DOM généré. Sur un gabarit d’accueil migré chez un de nos clients, le nombre de balises div imbriquées est passé de neuf à cinq niveaux pour un rendu visuel identique, ce qui a un effet mesurable sur le temps de calcul du style par le navigateur sur les pages les plus chargées.
Un modèle mental différent pour l’intégrateur
Construire avec des conteneurs demande de penser en boîtes imbriquées plutôt qu’en grille de colonnes fixes. Il faut décider, à chaque niveau, si le conteneur empile ses enfants en ligne ou en colonne, puis répartir l’espace avec les contrôles de flexbox plutôt qu’en tirant une poignée de redimensionnement. Ce changement d’habitude prend en général une à deux journées à un intégrateur habitué aux Sections, le temps de désapprendre le réflexe de la colonne à 50 % / 50 %.
Sur un projet neuf, démarrer directement avec des conteneurs évite une migration ultérieure. Sur un projet existant construit en Sections, il vaut mieux migrer section par section plutôt que d’un bloc, pour vérifier chaque rendu au fil de l’eau.
Coexistence avec les anciennes Sections
Elementor n’a jamais imposé de conversion automatique. Les Sections et Colonnes restent disponibles dans l’éditeur et un même projet peut légitimement mélanger les deux systèmes le temps d’une migration progressive. Le point de vigilance concerne les styles globaux : une classe personnalisée pensée pour une Colonne ne se comporte pas forcément de la même façon appliquée à un conteneur, notamment sur les propriétés de marge qui se calculent différemment selon le modèle de boîte utilisé.
Un projet qui doit rester compatible avec un addon tiers ancien, non mis à jour pour reconnaître les conteneurs, peut aussi justifier de conserver temporairement le modèle Section / Colonne sur les gabarits concernés.
En résumé
Le passage aux conteneurs n’est pas un simple habillage visuel : il change le modèle de boîte sous-jacent, aligne Elementor sur les standards CSS modernes et simplifie des mises en page qui exigeaient des contournements pénibles avec les Sections. Pour un projet qui démarre aujourd’hui, il n’y a plus vraiment de raison de repartir sur l’ancien modèle, sauf contrainte de compatibilité précise avec un addon existant.
