09. Bloc Div, Flexbox et Grille : le jeu des boîtes
Une page Elementor n'est rien d'autre qu'un emboîtement de boîtes. Ce chapitre présente les trois conteneurs atomiques — Bloc Div, Flexbox et Grille — et les quelques réglages qui décident comment leurs enfants se rangent : en ligne, en colonne, centrés, espacés. C'est le socle de la Partie III ; les chapitres 10 à 12 ne feront qu'affiner ce que l'on pose ici.
Une page Elementor n’est rien d’autre qu’un emboîtement de boîtes. Ce chapitre présente les trois conteneurs atomiques — Bloc Div, Flexbox et Grille — et les quelques réglages qui décident comment leurs enfants se rangent : en ligne, en colonne, centrés, espacés. C’est le socle de la Partie III ; les chapitres 10 à 12 ne feront qu’affiner ce que l’on pose ici.
En bref
- Public
- Toute personne qui a construit sa première page (chapitre 07) et veut comprendre pourquoi les éléments se placent là où ils se placent.
- Enjeu
- Choisir le bon conteneur et régler sa disposition sans tâtonner.
- Idée clé
- Un conteneur ne se règle pas lui-même : il range ses enfants.
- Prérequis
- Chapitres 05, 06 et 07.
- Lecture
- Environ 15 minutes (+ 35 minutes d’exercices).
9.1 — Tout est boîte, une boîte contient des boîtes
Au chapitre 03, nous avons vu qu’une page web est un squelette de boîtes emboîtées. Elementor ne fait que rendre ces boîtes visibles : chaque élément déposé — titre, image, bouton — est une boîte, et chaque conteneur est une boîte plus grande dont le seul métier est de décider comment celles qu’il contient se rangent.
Définition
Parent et enfants — le conteneur qui en entoure un autre est son parent ; les éléments qu’il contient sont ses enfants. Les réglages de disposition se font toujours sur le parent, et ce sont les enfants qui bougent. Quand un élément est mal placé, on ne le regarde pas lui : on regarde son parent.
L’Éditeur atomique d’Elementor 4 propose trois conteneurs, tous gratuits, qui partagent les mêmes onglets Général (General) et Style. Le Bloc Div (Div Block) est le conteneur générique, « similaire au Flexbox, mais plus léger et plus rapide à charger » selon le Centre d’aide (page « Div Block element »). Le Flexbox dispose ses enfants en ligne ou en colonne. La Grille (Grid, apparue en 4.2.0) les organise sur des lignes et des colonnes ; un Flexbox peut d’ailleurs être basculé en Grille depuis sa section Mise en page.
| Conteneur | Ce qu’il fait de ses enfants | Quand le choisir |
|---|---|---|
| Bloc Div | Les empile verticalement, dans l’ordre. | Une carte, un groupe titre + paragraphe, tout ce qui n’a pas besoin d’être réparti. |
| Flexbox | Les range sur un seul axe, puis les justifie, les aligne et les espace. | Un bandeau, une rangée de boutons, une image à côté d’un texte. |
| Grille | Les place dans des cases ; une case peut s’étendre sur plusieurs colonnes. | Une galerie, une mosaïque de prestations, tout ce qui doit rester aligné en hauteur et en largeur. |
9.2 — L’onglet Général : balise HTML et lien
Le champ Balise HTML (HTML tag) propose six valeurs : Div, Header, Section, Article, Aside et Footer. Par défaut, un conteneur est un div, une boîte sans signification. Choisir section pour une bande de page, header ou footer pour l’en-tête et le pied de page, article pour un contenu autonome et aside pour un contenu latéral ne change rien à l’affichage, mais dit aux moteurs de recherche et aux lecteurs d’écran à quoi sert la boîte : c’est la sémantique du chapitre 03.
Le champ Lien (Link), reconnaissable à son icône +, rend toute la boîte cliquable, avec une option Ouvrir dans un nouvel onglet (Open in a new tab) — pratique pour une carte de prestation qui doit mener entière à sa page.
Attention
Le Centre d’aide est formel (page « Flexbox element ») : si un lien est posé sur un conteneur, aucun élément enfant ne peut plus être cliquable. Un bouton placé dans une carte cliquable devient un simple décor. Soit la carte est un lien, soit elle contient un bouton, jamais les deux.
9.3 — Style › Mise en page : ranger les enfants d’un Flexbox
La section Mise en page (Layout) commence par un mode d’affichage : Bloc (Block), Flex, Bloc en ligne (Inline-block) et Aucun (None). Un Flexbox est en mode Flex, et c’est ce mode qui fait apparaître les cinq réglages qui suivent. Le mode Aucun masque l’élément ; on l’applique sur un seul point de rupture pour le cacher sur mobile (chapitre 12).
La direction
Le réglage Direction fixe l’axe principal : Ligne (Row) range les enfants côte à côte, de gauche à droite ; Colonne (Column) les empile de haut en bas. Deux variantes inversées parcourent l’axe dans l’autre sens, utiles pour passer une image à droite du texte sans déplacer les éléments.
Justifier et aligner : deux axes, deux réglages
C’est ici que la plupart des débutants se perdent, parce que les deux réglages suivants ont des menus semblables. Justifier le contenu (Justify content) répartit les enfants le long de l’axe principal : Start (au début), Center, End (à la fin), Space between (espace entre les enfants, aucun aux extrémités), Space around (espace autour de chacun) et Space evenly (espaces tous égaux). Aligner les éléments (Align items) les place sur l’axe perpendiculaire : Start, Center, End ou Stretch (étirés sur toute la hauteur — ou toute la largeur, en Colonne).
Astuce
Si la direction change, les deux réglages échangent leurs rôles : en Colonne, Justifier le contenu agit à la verticale et Aligner les éléments à l’horizontale. Pour centrer le contenu d’une section en Colonne, on règle donc Aligner sur Center. Quand un élément refuse de se centrer, vous avez presque toujours touché au mauvais des deux.
L’écart et le retour à la ligne
L’Écart (Gap) fixe la distance entre les enfants. Il remplace les marges que l’on posait autrefois sur chaque élément : il ne crée jamais d’espace parasite au bord du conteneur et il suit la direction, horizontal en Ligne, vertical en Colonne. Retour à la ligne (Wrap) décide de ce qui arrive quand la place manque : No wrap comprime les enfants sur une seule ligne, Wrap les fait passer dessous, Reverse wrap fait de même en ordre inverse. Réglez toujours un Flexbox dans cet ordre — Direction, Écart, Justifier, Aligner, Retour à la ligne.
9.4 — La Grille : des lignes et des colonnes
Un Flexbox ne raisonne que sur un axe : avec Retour à la ligne, il fait passer des cartes dessous, sans garantir qu’elles s’alignent sous celles de la première ligne. La Grille dessine d’abord des cases, puis y dépose les enfants. Sa section Mise en page demande le nombre et la taille des colonnes et des lignes, dans n’importe quelle unité CSS et notamment en fr. Le bouton Schéma de la grille (Show Grid Outline) dessine sur la toile des pointillés qui matérialisent les cases, invisibles sur le site publié. Les enfants se placent de gauche à droite puis de haut en bas ; l’option Dense auto-placement comble les trous laissés par un enfant plus grand.
Définition
L’unité fr (pour fraction) — une part de l’espace disponible. Trois colonnes à 1fr 1fr 1fr se partagent la largeur en trois parts égales ; 2fr 1fr donne deux tiers à la première et un tiers à la seconde. Contrairement aux pourcentages, l’unité fr tient compte d’elle-même des écarts : on ne calcule jamais « 33,33 % moins l’écart ».
Chaque enfant d’une Grille reçoit des réglages propres : Grid Column et Grid Row pour occuper plusieurs colonnes ou lignes, Align Self et Order pour l’aligner ou le déplacer indépendamment des autres (Centre d’aide, page « How to use CSS Grid in the Atomic Editor »). Règle de choix : alignement dans les deux sens — galerie, catalogue, pied de page à quatre blocs — égale Grille ; rangée ou pile égale Flexbox.
9.5 — Imbriquer : la section pleine largeur et son contenu limité
Presque toute page vitrine repose sur une même figure : une bande colorée qui occupe toute la largeur de l’écran, et un contenu limité à une largeur lisible — 1140 px, la largeur de contenu par défaut d’Elementor (Réglages du site › Mise en page › Largeur du contenu). Contrairement au conteneur classique du chapitre 11, le Flexbox atomique n’a pas de réglage « Boîte / Pleine largeur » tout fait : on construit cette figure avec deux boîtes imbriquées, l’extérieure qui porte le fond, l’intérieure qui porte la largeur.
- Déposez un premier Flexbox sur la page « Accueil », sous le bandeau du chapitre 07. Dans la Structure (Ctrl+I, Cmd+I sur Mac), renommez-le « Section prestations » ; dans Général, balise
section. - Réglez-le comme un cadre. Style › Mise en page : Direction Colonne, Aligner les éléments Center. Espacement : padding de
80px en haut et en bas (chapitre 10). Arrière-plan : blanc cassé#FAF7F2. - Déposez un second Flexbox à l’intérieur, renommé « Contenu prestations ». Taille : largeur
100%, largeur maximale1140px. Mise en page : Direction Ligne, Écart32px, Aligner les éléments Stretch. - Déposez trois Blocs Div dans le contenu, nommés « Carte escaliers », « Carte cuisines », « Carte agencements », chacun avec un Titre H3 et un Paragraphe.
- Vérifiez dans la Structure : quatre niveaux, pas davantage — Section › Contenu › Carte › Titre et Paragraphe. Enregistrez avec Ctrl+S.
À savoir
Pourquoi deux boîtes ? Parce qu’une boîte limitée à 1140 px ne peut pas colorer les bords de l’écran : il faut une boîte qui s’étale et une boîte qui se retient. Vous reproduirez cette paire sur chaque section ; au chapitre 21, vous l’enregistrerez comme modèle.
9.6 — Bien construire : règles et erreurs classiques
Un emboîtement propre se reconnaît dans la Structure au premier coup d’œil. Peu de niveaux : section, contenu, carte, éléments — au-delà de cinq, on ne sait plus quel parent règle quoi. Un conteneur, un rôle : celui qui porte le fond ne porte pas la largeur. Le Bloc Div par défaut : on ne crée un Flexbox que pour aligner ou répartir. Un nom par conteneur. Et jamais de hauteur fixée « pour que ce soit aligné » : c’est Stretch qui aligne, et une hauteur fixe casse sur mobile (chapitre 10).
À éviter
Un seul Flexbox pour toute la page, vingt éléments poussés à coups de marges ; des hauteurs fixées ; des conteneurs qui s’appellent tous « Flexbox » ; un lien sur une carte qui contient un bouton.
À faire
Une section par bande de page, un contenu limité à 1140 px, des cartes en Blocs Div, l’espace réglé par l’Écart et le padding, des hauteurs libres, des noms explicites, un seul élément cliquable par carte.
Exercice 9.1 — Le bandeau « 3 prestations », en Flexbox puis en Grille 25 min
Objectif : construire deux fois la même rangée de cartes pour ressentir la différence entre un Flexbox et une Grille.
- Reprenez « Section prestations » du pas-à-pas. Allongez le paragraphe de la carte « Cuisines » à six lignes : les deux autres cartes s’étirent pour rester alignées (effet de Stretch).
- Dupliquez la section (clic droit › Dupliquer). Dans la copie, basculez « Contenu prestations » en Grille : trois colonnes
1fr 1fr 1fr, Écart32px, Schéma de la grille activé. - Ajoutez une quatrième carte « Rénovation » dans les deux versions. Côté Flexbox, testez Retour à la ligne sur No wrap puis sur Wrap ; côté Grille, notez où se place la carte.
- Dans la Grille, faites occuper deux colonnes à « Rénovation » avec Grid Column, puis décidez quelle version vous gardez.
Résultat attendu : deux sections à quatre cartes. En Flexbox sans retour à la ligne, les cartes se compriment ; avec retour à la ligne, la quatrième passe seule dessous. En Grille, elle prend la première case de la seconde ligne, alignée sous la première, puis s’étend sur deux colonnes à la demande.
Exercice 9.2 — Image et texte côte à côte 10 min
Objectif : maîtriser Justifier, Aligner et la direction inversée sur le bloc le plus courant d’un site vitrine.
- Sur la page « Accueil », ajoutez la paire section + contenu du pas-à-pas, nommée « Section atelier ». Dans « Contenu atelier » : Direction Ligne, Écart
48px, Aligner les éléments Center. - Déposez-y une Image (photo provisoire) puis un Bloc Div « Texte atelier » avec un Titre H2 « Un atelier à Murol, depuis 2009 », un Paragraphe et un Bouton « Découvrir l’atelier ». Largeur
50% pour chacun des deux enfants (section Taille). - Testez Aligner sur Start, Center et End, puis passez la direction en Ligne inversée : l’image passe à droite sans que rien n’ait été déplacé.
Résultat attendu : un bloc image + texte à deux enfants de même largeur, dont vous inversez le sens en un clic — comme nous le faisons en atelier Num Compagny pour alterner les sections d’une page longue.
À retenir
- Trois conteneurs atomiques gratuits : le Bloc Div empile, le Flexbox range sur un axe, la Grille range sur deux axes.
- La disposition se règle toujours sur le parent ; ce sont les enfants qui bougent.
- Justifier le contenu agit le long de la direction, Aligner les éléments agit en travers ; en Colonne, les deux échangent leurs rôles.
- L’Écart remplace les marges entre enfants ; les hauteurs restent libres.
- La figure de base d’une page vitrine est une paire : un Flexbox section pleine largeur qui porte le fond, un Flexbox contenu limité à 1140 px qui porte la largeur, avec une balise HTML et un nom dans la Structure.