0.4Structure : conteneurs & widgets
L'essentiel en 30 secondes
- Conteneur = la « boîte » qui structure la page et contient les éléments ; widget = l'élément de contenu (titre, texte, image…) placé dedans.
- Les conteneurs peuvent être imbriqués (une boîte dans une boîte) pour des mises en page riches.
- Les conteneurs Flexbox (récents, souples, légers) remplacent l'ancien système sections/colonnes.
Mini-cas filé — Nadia structure l'accueil
Nadia veut une page d'accueil claire : une bannière, puis une rangée de 3 réalisations côte à côte, puis un appel à l'action. Si elle pose tout « en vrac », rien ne s'aligne. Cette section lui apprend à penser en boîtes (conteneurs) qui rangent les éléments (widgets) — le socle de toute mise en page.
Suite du cas 0.3 — Nadia passe de « où est quoi » à « comment organiser ».
1. Conteneurs et widgets
Elementor distingue deux natures d'éléments. Les conteneurs (containers) sont des boîtes qui structurent et organisent la page ; ils ne « montrent » rien par eux-mêmes, ils rangent. Les widgets sont les éléments de contenu concrets — titre, texte, image, bouton, icône — placés dans un conteneur. Règle simple : les conteneurs structurent, les widgets affichent.
Les conteneurs peuvent être imbriqués : un conteneur « rangée » (horizontal) peut contenir trois conteneurs « colonne » (verticaux), chacun avec ses widgets. C'est ainsi que Nadia obtient ses 3 réalisations alignées côte à côte, chacune avec image + titre + bouton.
2. Flexbox vs sections/colonnes
Historiquement, Elementor organisait les pages en sections contenant des colonnes. Le modèle moderne, les conteneurs Flexbox, remplace ce système : plus souple (direction, alignement, espacement réglables finement) et plus léger (code plus propre, meilleur pour la performance).
Pour un nouveau site comme celui du menuisier, Nadia part directement sur les conteneurs. Elle ne touchera aux sections/colonnes que si elle reprend un ancien site qui en contient encore.
🔎 Exemple concret — Trois réalisations alignées (cas Nadia)
Conteneur « rangée » (direction horizontale)
├─ Conteneur « colonne » → image + titre + bouton (Cuisine)
├─ Conteneur « colonne » → image + titre + bouton (Dressing)
└─ Conteneur « colonne » → image + titre + bouton (Escalier)
→ Résultat : 3 cartes alignées, faciles à rendre responsive.Résultat : une structure claire et réutilisable.
Leçon : penser en boîtes avant de penser en contenu.
Vocabulaire de la section
- Conteneur (Container)
- Une boîte qui structure la page et contient d'autres éléments (widgets ou conteneurs).
Exemple simple : Nadia crée un conteneur « rangée » pour aligner 3 réalisations.
Ce que ce n'est pas : y voir un élément de contenu visible comme un titre.
Réflexe : le conteneur range ; il ne « montre » pas de contenu propre.
- Widget
- Un élément de contenu concret placé dans un conteneur : titre, texte, image, bouton, icône.
Exemple simple : dans chaque colonne, Nadia place image + titre + bouton.
Ce que ce n'est pas : confondre le widget avec la boîte qui le contient.
Réflexe : si ça affiche du contenu, c'est un widget.
- Imbrication
- Placer un conteneur dans un conteneur pour des mises en page complexes.
Exemple simple : une rangée qui contient trois colonnes, chacune avec ses widgets.
Ce que ce n'est pas : empiler des conteneurs inutiles sans raison.
Réflexe : imbriquer seulement quand la mise en page l'exige.
- Conteneurs (Flexbox)
- Le modèle moderne, souple et léger, de structuration des pages Elementor.
Exemple simple : Nadia règle direction, alignement et espacement d'un conteneur.
Ce que ce n'est pas : recréer manuellement ce que Flexbox gère tout seul.
Réflexe : nouveau site → conteneurs Flexbox par défaut.
- Sections / colonnes (ancien)
- L'ancien système (sections contenant des colonnes), remplacé par les conteneurs.
Exemple simple : Nadia ne les rencontre que sur d'anciens sites repris.
Ce que ce n'est pas : démarrer un nouveau site en sections/colonnes.
Réflexe : ancien site → sections/colonnes possibles ; nouveau → conteneurs.
En pratique — Structurer une page en conteneurs
- Dessinez sur papier la page en « boîtes » : bannière, rangée de 3, appel à l'action.
- Dans Elementor, créez un conteneur « rangée » et réglez sa direction horizontale.
- Ajoutez 3 conteneurs « colonne » à l'intérieur (imbrication).
- Déposez dans chaque colonne les widgets voulus (image, titre, bouton).
Script prêt à dire — expliquer la structure au client (30 s)
« Je construis votre page comme des boîtes bien rangées : une boîte pour la bannière, une boîte qui aligne vos trois réalisations, une boîte pour le bouton de contact. Dans chaque boîte, je place le contenu — image, texte, bouton. C'est ce rangement qui rend la page nette et adaptable au mobile. »
L'image des « boîtes » parle à tout le monde, même non technique.
Modèle copier-coller — plan de structure d'une page
PAGE : _______________
BOÎTE 1 (conteneur) : _______________ → widgets : _______________
BOÎTE 2 (conteneur) : _______________ → widgets : _______________
└─ imbriquée ? colonnes : _______________
BOÎTE 3 (conteneur) : _______________ → widgets : _______________
MODÈLE : conteneurs (Flexbox), pas sections/colonnes (nouveau site)Nouveau site
Tout en conteneurs Flexbox : souplesse et code léger d'emblée.
Ancien site repris
Sections/colonnes encore présentes : les laisser ou migrer progressivement vers des conteneurs.
Mise en page simple
Un conteneur vertical qui empile les widgets suffit : ne pas sur-imbriquer.
Mise en page riche
Rangées contenant des colonnes : imbriquer juste ce qu'il faut pour aligner.
✓ Bonnes pratiques
- Penser « conteneurs (structure) » avant « widgets (contenu) ».
- Imbriquer seulement quand la mise en page l'exige.
- Partir sur des conteneurs Flexbox pour tout nouveau site.
✗ Pièges fréquents
- Confondre conteneur (boîte) et widget (contenu).
- Sur-imbriquer des conteneurs inutiles.
- Démarrer un nouveau site en sections/colonnes.
Points clés à retenir
- Conteneur = boîte qui structure ; widget = contenu affiché.
- Les conteneurs s'imbriquent (rangée → colonnes → widgets).
- Les conteneurs Flexbox remplacent sections/colonnes.
- Structure d'abord, contenu ensuite.
Défi 48h — appliquez demain
Reproduisez une rangée de 3 cartes (image + titre + bouton) avec un conteneur « rangée » contenant 3 conteneurs « colonne ». Vérifiez que tout s'aligne. 20 minutes.
- Je distingue conteneur (structure) et widget (contenu).
- Je sais imbriquer une rangée et des colonnes.
- Je pars sur des conteneurs Flexbox pour un nouveau site.
Questions fréquentes
Dois-je utiliser les sections/colonnes ou les conteneurs ?
Pour tout nouveau site, les conteneurs (Flexbox) : plus souples et plus légers. Les sections/colonnes ne se rencontrent que sur d'anciens sites.
Combien de conteneurs imbriqués est-il raisonnable ?
Le moins possible pour obtenir la mise en page voulue. Trop d'imbrication (boîtes dans des boîtes sans raison) complique la maintenance et le responsive (voir 5.2).
Un widget peut-il contenir un autre widget ?
Non : les widgets contiennent du contenu, pas d'autres éléments. Pour regrouper des éléments, on utilise un conteneur.
Nadia veut 3 réalisations côte à côte, chacune avec image + titre + bouton. Quelle structure choisir ?