11. Lire un site existant : Conteneurs classiques, Sections et Colonnes

Tous les sites que vous toucherez n’auront pas été construits en 2026. Beaucoup de sites reçus en maintenance, hérités d’un ancien prestataire ou d’un neveu doué, reposent sur deux systèmes plus anciens : les Sections et Colonnes, puis le Conteneur classique. Ce chapitre ne sert pas à construire avec eux — le support ne le fera jamais — mais à les reconnaître, à retrouver leurs réglages et à décider, en connaissance de cause, ce que l’on convertit et ce que l’on reconstruit.

11.1 — Trois générations sur une même page

Le chapitre 06 a raconté l’histoire en trois temps : les Sections et Colonnes (de 2016 à 2022), le Conteneur classique (Flexbox Container, 2022) et l’Éditeur atomique (alpha en juillet 2025, stable depuis le 30 mars 2026, actif par défaut sur les nouveaux sites). Ce qu’il faut ajouter ici, c’est que ces trois générations cohabitent sans difficulté sur un même site, et même sur une même page. Un site créé en 2019 et enrichi chaque année peut contenir un en-tête en Sections, une page d’accueil en Conteneurs et une page « Actualités » toute neuve en atomique. Rien de cela n’est une erreur ; c’est la vie normale d’un site.

Pour savoir à quelle génération appartient un bloc, deux indices suffisent. Le premier est le nom dans la Structure (Ctrl+I, Cmd+I sur Mac) : « Section », « Colonne » et « Section interne » signent la première génération ; « Conteneur » la deuxième ; « Flexbox », « Bloc Div » et « Grille » la troisième. Le second est le nombre d’onglets du panneau quand le bloc est sélectionné : trois onglets Mise en page, Style et Avancé pour les deux premières générations ; deux onglets Général et Style, plus Interactions, pour les éléments atomiques (Centre d’aide Elementor, page « What are the differences between the Elementor Editor 3.x and V4 »).

11.2 — Sections et Colonnes : l’ancien monde

Dans le premier système, la page est une pile de Sections, chacune étant une bande horizontale qui occupe toute la largeur. Une Section contient toujours au moins une Colonne, et ce sont les Colonnes qui reçoivent les widgets ; un widget ne peut pas être posé directement dans une Section. Pour mettre des colonnes dans une colonne, il fallait un widget spécial, la Section interne (Inner Section), et l’on ne pouvait pas aller plus loin : deux niveaux, pas trois. Cette contrainte explique bien des bricolages que vous rencontrerez.

Les réglages d’une Section se trouvent dans son onglet Mise en page : Largeur du contenu (Content Width), avec deux valeurs, Boîte (Boxed, le contenu est limité à la largeur du site, 1140 px par défaut) ou Pleine largeur (Full Width) ; Écart entre colonnes (Columns Gap), en paliers nommés plutôt qu’en pixels ; Hauteur, avec le choix Par défaut, Ajuster à l’écran ou Hauteur minimale ; Position verticale (Vertical Align), qui aligne les colonnes en haut, au milieu ou en bas ; puis Débordement et Balise HTML. Une Colonne, elle, expose sa Largeur de la colonne en pourcentage — la somme des colonnes d’une section fait toujours 100 —, son alignement vertical et horizontal, et l’Espace entre widgets (Widgets Space), qui vaut 20 px par défaut et joue le rôle de l’Écart du chapitre 09. La table de correspondance de la section 11.6 traduit chacun de ces réglages.

11.3 — Le Conteneur classique : le pont entre les deux mondes

Le Conteneur de 2022 a remplacé la paire Section + Colonne par une seule boîte, imbricable sans limite, qui applique déjà les règles du Flexbox. Si vous avez lu le chapitre 09, vous en connaissez presque tout. Son onglet Mise en page est simplement organisé autrement : un premier groupe Conteneur avec Largeur du contenu (Boîte ou Pleine largeur), Largeur (1140 px par défaut, reprise des Réglages du site) et Hauteur minimale ; un groupe Éléments avec Direction (ligne, colonne et leurs inverses), Justifier le contenu, Aligner les éléments, Écarts et Retour à la ligne ; enfin un groupe de réglages supplémentaires avec Débordement et Balise HTML. Une variante Grille du Conteneur existe aussi, avec ses colonnes et ses lignes.

La différence utile pour vous est la Largeur du contenu intégrée : un Conteneur classique en mode Boîte limite lui-même son contenu à 1140 px tout en étalant son fond sur toute la largeur, là où le Flexbox atomique demande la paire « section + contenu » de la figure 9.4. C’est plus court à poser, mais c’est aussi ce qui rend le code HTML d’un Conteneur plus lourd qu’un élément atomique — une enveloppe supplémentaire —, et le chapitre 06 a expliqué que les atomes se contentent d’un seul div, sans mise en forme imposée, avec les Classes et les Variables en prime. Le Conteneur classique reste un excellent système : on le lit et on le maintient sans crainte ; on ne s’en sert simplement plus pour du neuf.

11.4 — L’onglet Avancé : où se cachent les réglages des deux premières générations

Dans les Sections, les Colonnes, les Conteneurs et tous les widgets classiques, ce que l’Éditeur atomique range sous l’onglet Style se trouve dans l’onglet Avancé (Advanced). C’est là qu’il faut aller chercher les valeurs qui « expliquent » l’aspect d’un bloc hérité. Parcourez-le dans l’ordre :

• Mise en page : Marge et Padding sur quatre côtés (le modèle de boîte du chapitre 10), Largeur d’élément pour un widget (pleine largeur, à son contenu, ou personnalisée), Position (par défaut, absolue, fixe), Z-index, puis l’ID CSS et les classes CSS.
• Effets de mouvement (Motion Effects) : l’animation d’entrée, gratuite, et, en Pro, les effets de défilement, les effets de souris et l’option Sticky qui rend un en-tête collant — l’équivalent de la position Collante du chapitre 10.
• Transformer, Fond, Bordure, Masque : l’habillage, que le chapitre 17 traite pour les atomes.
• Responsive : les cases Masquer sur ordinateur, tablette ou mobile (Hide On), ainsi que l’inversion de l’ordre des colonnes sur tablette et mobile. C’est l’endroit où l’on découvre pourquoi un bloc « manque » sur téléphone.
• Attributs et CSS personnalisé, réservés à Elementor Pro (le CSS personnalisé aux plans Advanced et supérieurs).

11.5 — Convertir ou reconstruire ?

Quand la fonctionnalité Conteneur Flexbox est active, une Section sélectionnée propose, dans son onglet Mise en page, un bouton pour la convertir en Conteneur (Convert). Elementor crée alors une copie de la Section sous forme de Conteneurs — un Conteneur pour la Section, un Conteneur enfant par Colonne — et la place sous l’originale, qui reste en place tant que vous ne la supprimez pas. C’est commode pour comparer les deux et revenir en arrière ; c’est aussi la raison pour laquelle une page « convertie » à la hâte peut afficher chaque bloc deux fois.

1. Sauvegardez d’abord. Une révision suffit pour une page (Ctrl+S crée un point de retour dans l’Historique) ; pour un site entier, une sauvegarde complète avant toute campagne de conversion (chapitre 36).
2. Sélectionnez la Section par sa poignée ou dans la Structure, puis ouvrez l’onglet Mise en page et repérez le bouton de conversion, quand votre version le propose.
3. Comparez la copie et l’originale sur la toile, en vue ordinateur puis en vue mobile (Ctrl+Shift+M). Corrigez les largeurs (les pourcentages des colonnes ne tiennent pas toujours compte des écarts) et les marges héritées de l’onglet Avancé.
4. Supprimez l’originale une fois la copie validée, renommez les Conteneurs obtenus dans la Structure, enregistrez.

Faut-il tout convertir ? Non, et pour trois raisons. D’abord, la conversion produit des Conteneurs classiques, pas des éléments atomiques : elle ne vous fait franchir qu’une génération, et il n’existe pas, à notre connaissance, de bouton pour transformer un Conteneur en Flexbox atomique. Ensuite, une page ancienne qui s’affiche bien, se charge vite et tient sur mobile n’a aucun besoin d’être touchée : le visiteur ne voit pas la génération du code. Enfin, quand une page mérite vraiment d’être refaite — parce qu’elle est lente, cassée sur mobile ou impossible à modifier —, le plus rapide est presque toujours de la reconstruire en atomique à côté, en copiant les textes et les images, plutôt que de convertir puis de corriger. La règle du support tient en une phrase : on ne construit jamais de neuf en Sections ni en Conteneurs classiques ; on reconstruit en atomique ce qui doit changer ; on laisse tranquille ce qui fonctionne.

Les fonctionnalités à ne pas toucher

Dans Elementor › Éditeur › Réglages › Fonctionnalités (Features, anciennement Experiments), vous verrez les interrupteurs Conteneur Flexbox (Flexbox Container), Conteneur Grille et Éléments imbriqués (Nested Elements, qui permet aux widgets Onglets et Accordéon de contenir d’autres éléments). Activer l’Éditeur atomique, depuis l’onglet Éditeur Atomic du même écran, active aussi Conteneur Flexbox, Éléments imbriqués et la Barre supérieure (Centre d’aide, page « Elementor experiments »). Ne désactivez jamais Conteneur Flexbox sur un site qui contient des Conteneurs : les pages qui en dépendent cessent de s’afficher correctement, et l’éditeur recommence à créer des Sections à chaque dépôt. C’est l’une des pannes les plus fréquentes du chapitre 36.

11.6 — Table de correspondance : d’une génération à l’autre

Ce tableau traduit chaque notion des anciens systèmes dans le vocabulaire des chapitres 09 et 10. Gardez-le sous la main : c’est lui qui permet de « lire » un site ancien avec des réflexes modernes, et de reconstruire sans rien oublier.