Comprendre les conteneurs Elementor (Flexbox)
Créer un conteneur, choisir sa direction, aligner son contenu et imbriquer sans alourdir la page.
Les menus sont cités tels qu’ils apparaissent dans Elementor en français. Selon votre version et vos réglages de langue, certains libellés restent en anglais (Single Post, Loop Item…).
Dans Elementor, toute page se construit avec des conteneurs. Ils remplacent depuis Elementor 3.6 l’ancien système de sections, colonnes et sections internes, avec un code plus léger et un meilleur contrôle de l’affichage sur mobile. Bien les comprendre, c’est la base d’un site propre.
Un conteneur, c’est quoi ?
Un conteneur est une boîte qui regroupe des éléments et décide de leur disposition. Il repose sur Flexbox, le système de mise en page moderne du web : les éléments s’alignent en ligne ou en colonne, se répartissent l’espace et s’adaptent à la largeur de l’écran. Vous pouvez placer des widgets directement dans un conteneur, et des conteneurs dans d’autres conteneurs.
Créer un conteneur
Trois façons de faire :
- Depuis la page : cliquez sur le + au milieu de la zone d’édition, choisissez Flexbox, puis une disposition (un bloc simple, deux colonnes, trois colonnes…).
- Par glisser-déposer : faites glisser l’élément Conteneur depuis le panneau vers la page.
- Au-dessus d’un conteneur existant : survolez-le, puis cliquez sur le + de l’onglet qui apparaît au-dessus.
Il existe aussi un conteneur Grille, plus adapté aux mises en page symétriques (galerie, cartes alignées).
Les réglages essentiels
- Largeur du contenu : « Boxed » (centré sur une largeur maximale) ou pleine largeur.
- Direction : en ligne (côte à côte) ou en colonne (les uns sous les autres).
- Justify Content : répartition des éléments dans le sens de la direction (début, centre, fin, espacés…).
- Align Items : alignement dans l’autre sens (par exemple, centrer verticalement des éléments placés en ligne).
- Espacement entre éléments et marges intérieures, dans l’onglet Avancé.
Astuce mobile : la plupart de ces réglages peuvent être différents sur tablette et mobile. Un classique : direction « en ligne » sur ordinateur, « en colonne » sur mobile. Voir rendre un site responsive.
Imbriquer sans alourdir
Imbriquer des conteneurs est utile pour regrouper des éléments (une image et son texte, une carte de tarif…). Mais Elementor le rappelle lui-même : la meilleure approche est de construire avec le moins de conteneurs possible. Chaque niveau ajoute du code et complique la mise en page mobile. Avant d’ajouter un conteneur, demandez-vous si un réglage d’alignement ou d’espacement ne suffit pas.
