Les Containers Flexbox : l’architecture moderne d’Elementor Pro
Depuis la version 3.6, Elementor a remplacé les anciennes Sections et Colonnes par les Containers Flexbox. Ce changement d’architecture n’est pas qu’esthétique : les Containers génèrent un HTML plus léger, des performances meilleures, et offrent une flexibilité de mise en page impossible avec le système hérité. Pour tout nouveau projet Elementor Pro, les Containers sont la seule architecture à utiliser.
Flexbox vs l’ancien système Sections/Colonnes
L’ancien système Sections/Colonnes utilisait une mise en page en grille fixe : vous choisissez 1, 2, 3 ou 4 colonnes et les éléments s’y calent. Les Containers Flexbox sont radicalement différents : direction Row (horizontal), Column (vertical), et même CSS Grid pour les layouts asymétriques. Les éléments peuvent se réordonner, s’aligner, et se répartir sur plusieurs lignes (wrap) avec une liberté totale, sans un seul pixel de CSS custom.
Direction Row vs Direction Column
Dans un Container en direction Row, les éléments enfants sont placés côte à côte horizontalement. C’est l’équivalent d’une ancienne Section + Colonnes. Dans un Container en direction Column, les éléments sont empilés verticalement. C’est le mode par défaut et le plus flexible pour composer des empilements avec espacement précis, alignement, et répartition automatique.
CSS Grid dans les Containers Elementor
En plus du mode Flexbox, les Containers supportent le CSS Grid. Dans les paramètres du Container, changez « Layout » de « Flexbox » à « Grid ». Vous pouvez alors définir le nombre de colonnes (fr, px, %), le nombre de rangées, les gaps (column-gap, row-gap), et même des zones de grid nommées (grid-template-areas). Le CSS Grid est particulièrement puissant pour les mises en page asymétriques où certains éléments occupent plusieurs colonnes ou rangées.
Le Balisage optimisé et les performances
L’option « Balisage optimisé » dans Elementor → Expériences réduit encore le nombre de divs générés par Elementor. Sans cette option, Elementor encapsule chaque widget dans 2-3 divs supplémentaires. Avec le balisage optimisé + Containers Flexbox, le HTML généré est nettement plus propre, plus léger, et meilleur pour le LCP et le score PageSpeed mobile.
Migrer de l’ancien système vers les Containers
Elementor propose un outil de conversion automatique (Elementor → Outils → Convertir en Containers) qui transforme vos anciennes Sections et Colonnes en Containers Flexbox. La conversion est automatique mais peut introduire des différences visuelles mineures selon la complexité du design original. Je recommande de toujours tester la conversion sur un environnement de staging avant de l’appliquer en production, et de vérifier le rendu sur mobile, tablette, et desktop.
→ Retour au guide complet Elementor Pro
FAQ — Containers Flexbox Elementor Pro
Les Containers Flexbox remplacent-ils définitivement les Sections et Colonnes ?
Oui. Elementor a confirmé que les Containers Flexbox sont l’architecture de mise en page de référence pour tous les nouveaux projets. Les Sections et Colonnes (legacy) restent disponibles pour la rétrocompatibilité des sites existants, mais ne reçoivent plus de nouvelles fonctionnalités. Pour tout nouveau projet, n’utilisez que les Containers.
Peut-on convertir automatiquement les anciennes Sections en Containers ?
Elementor propose un outil de conversion automatique (Elementor → Outils → Convertir en Containers). Le résultat visuel peut légèrement différer selon la complexité du design. Je recommande de tester sur un environnement de staging d’abord, de vérifier sur tous les breakpoints, et de valider avant de convertir en production.
Quelle est la différence entre direction ‘Row’ et ‘Column’ dans un Container ?
En direction ‘Row’, les éléments enfants sont placés côte à côte horizontalement (gauche à droite). En direction ‘Column’, ils sont empilés verticalement (haut en bas). ‘Row’ équivaut à une ancienne Section + Colonnes. ‘Column’ permet d’empiler des éléments verticalement avec tous les avantages Flexbox : alignement précis, espacement automatique, et wrapping configurable.
Comment créer un layout en CSS Grid avec les Containers Elementor ?
Dans les paramètres du Container, changez ‘Layout’ de ‘Flexbox’ à ‘Grid’. Vous pouvez ensuite définir le nombre de colonnes et de rangées, les gaps (espacement), et des zones de grid nommées. Le CSS Grid est particulièrement utile pour les mises en page asymétriques (une grande image à gauche occupant 2 rangées, du texte à droite en 2 éléments superposés) qui seraient impossibles en Flexbox pur.
Les Containers Flexbox améliorent-ils les performances du site ?
Oui, positivement et de façon mesurable. Les Containers Flexbox génèrent un HTML plus léger que l’ancienne architecture Section/Colonne (qui utilisait des divs imbriqués avec des classes CSS nombreuses). En combinant les Containers avec le Balisage optimisé (Elementor → Expériences), on observe un gain de 5-15 Ko de HTML et une réduction de 10-20 éléments DOM — avec un impact mesurable sur le LCP et le score PageSpeed mobile.