Section et Container : maîtriser la largeur de la page

Objectif : empêcher le texte d'occuper toute la largeur d'un grand écran et donner à une bande de contenu son propre espace.
Durée : 3 minutes
Il vous faut : une page avec un slot Main

1. Dans le slot Main, sélectionnez Add Block, puis Section.
2. Donnez-lui un Name. C'est une étiquette réservée à l'administration, pour distinguer les sections dans la liste des blocs ; les visiteurs ne la voient jamais.
3. Réglez Spacing pour l'air vertical autour de la bande, et ajoutez une image de fond avec Background Position et Overlay si la section en a besoin.
4. Sur la ligne de la Section dans la liste des blocs, sélectionnez Add child block et choisissez Container.
5. Réglez Width — de sm à xl, ou full — et Flow. stack espace les enfants régulièrement ; none les laisse tels quels.
6. Ajoutez vos blocs de contenu comme enfants du Container.

Section est la bande horizontale. Elle va d'un bord à l'autre, porte le fond et possède l'espace au-dessus et en dessous.

Container se place à l'intérieur et décide de la largeur autorisée au contenu.

C'est cette séparation qui permet à une photo pleine largeur de se tenir derrière une colonne de texte qui reste confortable à lire.

• Les longues lignes sont difficiles à lire. Entre 60 et 75 caractères est la plage confortable, et c'est à cela que servent les largeurs réduites. full est fait pour l'image et la mise en page, pas pour les paragraphes.
• Le champ Name des blocs de mise en page est réservé à l'administration. Servez-vous-en : une liste de cinq Sections appelées « Section » n'aide personne.
• Une Section sans Container est valable et parfois juste, mais alors votre texte est aussi large que l'écran.
• L'imbrication se fait avec Add child block sur la ligne du parent, pas en ajoutant un bloc de premier niveau en espérant.