Guida · Il contenuto
La sezione: guscio, contenitore, contenuto
Tre livelli con tre compiti diversi. Sembrano ridondanti finché non devi mettere una fascia a tutta larghezza con il testo incolonnato al centro.
Dove siamo
Sai far disegnare un blocco come vuoi. Alla fine di questo capitolo avrai una pagina fatta di fasce, e saprai perché il colore di fondo e la larghezza del testo si decidono in due posti diversi.
Il gesto
Aggiungi un blocco sections. Ha tre campi: section, container, content.
Metti il fondo sul section. Metti la larghezza massima sul container. Metti i blocchi nel content. Ricarica.
// un blocco dentro layout di una pagina, in Payload
{
"blockType": "sections",
"section": { "viewMode": "Section", "className": "us-bgDots w-full py-24" },
"container": { "viewMode": "Container", "className": "max-w-3xl" },
"content": [ { "blockType": "text", "viewMode": "h2", "className": "us-titleXl", "text": "Una fascia" } ]
}Cos’è appena successo
Il guscio prende tutta la larghezza della finestra: è lui che porta il fondo, perché un fondo che si ferma prima del bordo non è un fondo. Il contenitore vive dentro il guscio e ha un compito solo, incolonnare: larghezza massima, centratura, spaziature. Il contenuto non sa nulla di entrambi.
Separarli costa un livello in più e compra la cosa che serve tutte le volte: fondo a tutta pagina e testo leggibile al centro, senza che nessuno dei due debba sapere dell’altro. Con un livello solo o rinunci al fondo pieno, o incolonni a mano dentro ogni blocco.
Quando non funziona
Metti la larghezza massima sul section invece che sul container. Il fondo si restringe insieme al testo, e la fascia diventa un rettangolo in mezzo alla pagina.
Non è un errore, è la domanda posta male: la larghezza del contenuto e l’estensione del fondo sono due decisioni, e il blocco sections esiste per tenerle separate.
Avanti
Le sezioni le riempi a mano. Nel capitolo dopo le riempi con quello che c’è in database.