Layout della hero in Webflow: sezioni, div e Flexbox

Alla fine di questa lezione avrai in piedi l’intero layout di una sezione hero in Webflow — ancora senza stile, solo una struttura pulita e ben organizzata. E lungo la strada raccoglierai i concetti su cui si appoggia quasi ogni sezione futura: sezioni, container, div block, classi, box model, Flexbox ed ereditarietà.

Separiamo di proposito il layout dallo stile. Prima mettiamo ogni elemento al posto giusto e nella scatola giusta; la rifinitura visiva arriva nella prossima lezione. Quell’ordine non è casuale — è l’abitudine che evita che le pagine complesse si trasformino in un pasticcio.

Il grande cambio di mentalità qui è la decomposizione. Una pagina sembra intimidatoria finché non la spezzi in sezioni, ogni sezione in gruppi, e continui a dividere finché ogni pezzo non è banalmente semplice. Fai così e anche un layout carico sembra una passeggiata.

Come funziona

Quasi ogni sezione che costruirai parte dallo stesso scheletro: una section (una fascia a tutta larghezza, come un capitolo della pagina, che aggiunge anche valore semantico per accessibilità e SEO), un main container al suo interno (che limita la larghezza e tiene il contenuto centrato) e un content wrapper, un div block, dentro ancora (che ospita il contenuto vero). Impara a memoria quel trio — section → main container → content wrapper — e hai un punto di partenza affidabile ogni volta.

La parola che tiene insieme tutto è classe. Una classe è un’etichetta con una lista di istruzioni attaccata. Assegna la stessa classe a più elementi e obbediscono tutti alle stesse regole; cambia una regola e si aggiornano tutti insieme. È tutta qui la ragione per cui i siti Webflow restano coerenti e veloci da modificare. Webflow ti aiuta anche colorando il selettore di stile: arancione vuol dire che un valore è ereditato da qualche altra parte, blu vuol dire che l’hai impostato tu direttamente su questa classe.

Altre due idee fanno gran parte del lavoro pesante. La prima è il box model: seleziona un elemento qualsiasi e vedrai un contorno blu — quella è la sua scatola. Tutto il web è scatole che si impilano una sull’altra o si affiancano, e le proprietà che imposti decidono come. La seconda è Flexbox, lo strumento che dice a quelle scatole come disporsi — riga o colonna — e come spartirsi lo spazio disponibile. Imposta un wrapper su display: flex, scegli una direzione e allinea i figli; quella singola mossa risolve una fetta enorme dei problemi di layout di tutti i giorni.

Infine c’è l’ereditarietà: imposti l’allineamento del testo su un wrapper e il paragrafo dentro lo eredita senza che tu tocchi il paragrafo. Sapere quali proprietà si ereditano ti risparmia dal dover impostare la stessa cosa più e più volte.

Come si usa

1. Aggiungi la struttura di base. Inserisci una section (scorciatoia: A, oppure ⌘/Ctrl + E → “section”) e dalle la classe section. Dentro, aggiungi un container con la classe main-container. Dentro ancora, un div block con la classe section_content-wrapper.
2. Limita e spazia il container. Su main-container imposta un max-width (attorno a 1920px va bene). Per il padding usa la funzione min() così scala: imposta il padding sinistro/destro su min(64px, 4.5vw) e sopra/sotto su min(128px, 9vw). Il browser sceglie sempre il minore dei due, e lo spacing resta sensato dagli schermi enormi fino ai telefoni.
3. Dividi il contenuto in tre gruppi. Aggiungi tre div block dentro il content wrapper: un heading wrapper, un image wrapper e un social-proof wrapper.
4. Costruisci l’heading wrapper. Dentro hero-section_heading-wrapper aggiungi un’etichetta di testo, un heading H1, un paragrafo e un buttons wrapper con due pulsanti. Imposta il wrapper su display: flex, direzione verticale, allineato al centro. Metti l’allineamento del testo su centro (i figli lo ereditano) e dai al buttons wrapper display: flex con un gap di 16px.
5. Costruisci l’image wrapper. Aggiungi un’immagine, carica l’asset e scrivi un alt text descrittivo oppure marcala decorativa. Comprimi gli asset dal pannello Assets (AVIF è il formato consigliato) così la pagina carica veloce.
6. Costruisci il social-proof wrapper. Rispecchia l’heading wrapper (flex, verticale, centrato) con un text block più una lista di loghi. Dai alla lista loghi display: flex e un gap di 64px, poi inserisci i loghi dei clienti.
7. Aggiungi respiro. Dai all’heading wrapper e all’image wrapper un margin inferiore (attorno a 80px) per spaziare in modo uniforme i tre gruppi. Ricorda: il padding è lo spazio dentro il confine di un elemento, il margin è lo spazio fuori.

Ed ecco tutto il layout in piedi. Nella prossima lezione iniziamo lo stile — partendo proprio da quei loghi ora bianchi su bianco e del tutto invisibili.