Qui a appris Elementor il y a quelques années raisonne en sections et colonnes : un bloc sur toute la largeur, des colonnes dedans, et les widgets dans les colonnes. Qui débute aujourd'hui voit à la place des conteneurs. Les deux systèmes coexistent, et cela crée de la confusion. Voici comment s'y retrouver.
La différence en une phrase
L'ancien système avait trois niveaux fixes — section, colonne, widget. Le conteneur est un niveau, imbriquable à volonté, qui fonctionne en interne avec Flexbox, le modèle de mise en page avec lequel se construit aujourd'hui pratiquement tout site moderne.
Ce que cela améliore
Moins d'imbrication, moins de balisage. Un bloc sur une seule colonne exigeait autrefois une section et une colonne, donc deux niveaux pour un bloc de contenu. Avec les conteneurs, c'en est un. Sur une page entière, cela finit par faire sensiblement moins de HTML — ce qui profite au temps de chargement et rend la structure plus lisible.
Un alignement qui fonctionne vraiment. Aligner par le bas trois blocs dont les textes n'ont pas la même hauteur était, avec les colonnes, du bricolage à coups de hauteurs minimales identiques et d'ajustements manuels. Avec Flexbox, ce sont deux clics : direction, alignement, terminé.
Un comportement plutôt que des chiffres devinés. Vous définissez si les éléments se placent sur une ligne ou les uns sous les autres, comment ils se répartissent, s'ils passent à la ligne quand la place manque. La mise en page réagit à l'espace disponible au lieu d'être liée à des pourcentages figés — ce qui fait justement la différence sur tablette.
Un ordre librement modifiable. L'image doit être à gauche sur ordinateur, mais au-dessus du texte sur téléphone ? Avec Flexbox, c'est un réglage, pas une double construction.
Les quatre réglages dont vous avez réellement besoin
Le conteneur a beaucoup d'options. En pratique, vous travaillez presque exclusivement avec quatre :
Direction — côte à côte (ligne) ou les uns sous les autres (colonne). L'interrupteur le plus important de tous.
Alignement — la position des éléments perpendiculairement à la direction. Sur une ligne : en haut, au centre, en bas.
Répartition — la façon dont l'espace est distribué le long de la direction. « Espace entre » est la valeur qu'il vous faut pour un en-tête avec le logo à gauche et le menu à droite.
Écart — la distance entre les éléments. Il remplace les marges intérieures qu'on posait autrefois sur chaque colonne, et de façon plus fiable.
Une fois ces quatre réglages compris, vous construisez quatre-vingt-dix pour cent des mises en page. Le reste est de la finition.
Une structure qui a fait ses preuves
Pour un bloc de contenu ordinaire, je prends un conteneur extérieur, en direction colonne, sur toute la largeur avec un fond. Dedans, un conteneur intérieur, limité en largeur et centré — c'est votre zone de texte. Et dedans, là où c'est nécessaire, un conteneur en direction ligne pour les éléments côte à côte.
Ce schéma — le cadre à l'extérieur, la limitation de largeur à l'intérieur, les contenus dedans — porte très loin et reste compréhensible même après des mois.
Faut-il reconstruire les pages existantes ?
Non. Du moins pas sans raison.
Elementor propose une conversion des sections en conteneurs. Elle fonctionne souvent bien, mais pas toujours sans perte — en particulier sur des pages comportant beaucoup d'espacements individuels, de marges négatives ou de CSS personnalisé. Reconstruire une page qui a bonne allure et qui fonctionne ne vous apportera pas un visiteur de plus et peut coûter une demi-journée de reprise.
Ma façon de faire : le neuf se construit avec des conteneurs, l'existant reste tel quel. Si une ancienne page est de toute façon retravaillée sur le fond, profitez-en pour la reconstruire. Le site migre ainsi progressivement, sans que vous en fassiez un chantier.
Si vous convertissez malgré tout : une sauvegarde avant, et une vérification de chaque page sur téléphone et tablette après. Ce qui peut encore mal tourner par ailleurs se trouve dans Mettre Elementor à jour sans casser la mise en page.
L'effet secondaire que j'apprécie le plus
Moins d'imbrication signifie moins de HTML par page. Ce n'est pas un miracle de performance — le temps de chargement dépend bien davantage des images et des scripts. Mais c'est un pas dans la bonne direction, et il ne coûte rien, puisque vous construisez de toute façon. Les leviers plus importants pour le temps de chargement sont dans Elementor et les Core Web Vitals.
Elementor Pro : les conteneurs existent dans les deux versions. Pro ne devient pertinent que si vous voulez utiliser cette structure aussi pour l'en-tête, le pied de page et les mises en page d'articles. Découvrir Elementor Pro
Si vous débutez
N'apprenez tout simplement pas l'ancien système. Les sections et les colonnes vous croiseront encore longtemps dans d'anciens tutoriels et vidéos — vous pouvez les lire sans les utiliser. Commencez directement avec les conteneurs ; cela vous évitera d'apprendre un modèle pour devoir le désapprendre plus tard.
C'est exactement ainsi que je procède dans ma formation Elementor : Flexbox dès le départ, parce que c'est l'état de l'art sur lequel vous travaillerez ces prochaines années.
Tags