Section e Container: controllare la larghezza della pagina

Obiettivo: impedire che il testo occupi tutta la larghezza di uno schermo grande e dare a una fascia di contenuto il suo respiro.
Tempo: 3 minuti
Serve: una pagina con uno slot Main

1. Nello slot Main selezionate Add Block, poi Section.
2. Dategli un Name. È un'etichetta solo per il pannello, così distinguete le sezioni nell'elenco dei blocchi; i visitatori non la vedono mai.
3. Impostate Spacing per l'aria verticale attorno alla fascia e aggiungete un'immagine di sfondo con Background Position e Overlay se la sezione lo richiede.
4. Sulla riga della Section nell'elenco dei blocchi selezionate Add child block e scegliete Container.
5. Impostate Width — da sm a xl, oppure full — e Flow. stack distanzia i figli in modo uniforme; none li lascia come sono.
6. Aggiungete i vostri blocchi di contenuto come figli del Container.

Section è la fascia orizzontale. Va da bordo a bordo, porta lo sfondo ed è proprietaria dello spazio sopra e sotto.

Container sta dentro e decide quanto può essere largo il contenuto.

Questa divisione è ciò che permette a una fotografia a tutta larghezza di stare dietro a una colonna di testo che resta comoda da leggere.

• Le righe lunghe sono difficili da leggere. Fra 60 e 75 caratteri è l'intervallo comodo, ed è per questo che esistono le larghezze ridotte. full è per immagini e impaginazione, non per i paragrafi.
• Il campo Name sui blocchi di impaginazione è solo per il pannello. Usatelo: un elenco con cinque Section chiamate «Section» non aiuta nessuno.
• Una Section senza Container è lecita e a volte giusta, ma allora il testo è largo quanto lo schermo.
• L'annidamento si fa con Add child block sulla riga del genitore, non aggiungendo un blocco di primo livello e sperando.