Componenti Webflow: una sezione features riutilizzabile

Alla fine di questa lezione avrai una sezione features pulita — e, più prezioso della sezione stessa, capirai i componenti Webflow: blocchi riutilizzabili che costruisci una volta e configuri a ogni uso. È il passaggio che ti porta dal copia-incolla di layout alla costruzione di un vero design system.

In superficie la sezione features è facile: un gruppo titolo che abbiamo già costruito, più una lista di righe testo-e-immagine che alternano il lato. Quindi la vera domanda è cosa può insegnare una sezione così. La risposta sono i componenti — e alla fine capirai perché cambiano il modo di costruire.

Partiamo di proposito dall’approccio ingenuo (copiare il gruppo titolo, rinominare le classi) così il problema è evidente, poi passiamo ai componenti come soluzione pulita. Lungo la strada incontriamo anche il tag H2, la gerarchia dei titoli e una mossa Flexbox elegante per colonne uguali.

Come funziona

Il problema che i componenti risolvono è la duplicazione. Se copi il gruppo titolo della hero in una nuova sezione e rinomini ogni classe, ora hai due copie indipendenti — cambia il gap o una font-size più avanti e devi ricordarti di aggiornarle entrambe, ovunque, per sempre. Noioso e rischioso. Una soluzione è rinominare le classi in modo generico (section_heading-label invece di hero-section_heading-label) così lo stesso wrapper è davvero riutilizzabile. La soluzione più potente è un componente.

Un componente è un progetto riutilizzabile. Trasforma il gruppo titolo in uno, e ogni punto in cui lo usi diventa un’istanza. La distinzione cruciale: quando entri in edit mode del componente stai cambiando la definizione, quindi la modifica colpisce ogni istanza; quando selezioni un’istanza e ne modifichi le proprietà, cambia solo quell’istanza. Chiarito questo modello mentale, i componenti smettono di essere misteriosi.

Le proprietà sono le parti che esponi apposta alla personalizzazione. Puoi creare una proprietà di testo (per l’etichetta, il titolo o il paragrafo), una proprietà di tag (così un’istanza è un H1 e un’altra un H2), una proprietà di visibilità (per nascondere i pulsanti in una sezione che non li vuole), una proprietà di link e altro. Il componente mantiene una struttura e un design; le proprietà fanno portare a ogni istanza il proprio contenuto e piccole variazioni.

Questa lezione fissa anche la gerarchia dei titoli. Il titolo della sezione features dovrebbe essere un H2, quindi diamo stile al tag All H2 Headings esattamente come abbiamo fatto per l’H1 — e più avanti ogni titolo feature diventa un H3. Quella gerarchia (H1 → H2 → H3) è una struttura su cui si appoggiano sia le tecnologie assistive sia i motori di ricerca, quindi scegli il tag per significato e poi gli dai stile. Infine, il layout a colonne uguali usa un bel trucco Flexbox: imposta “grow if possible” sia sul wrapper del testo sia su quello dell’immagine e, poiché spingono verso l’esterno con la stessa forza, si spartiscono la riga 50/50.

Come si usa

1. Ricostruisci la struttura di base. Aggiungi una nuova section → main-container → section_content-wrapper.
2. Rendi il gruppo titolo un componente. Rinomina le sue classi in modo generico (section_heading-wrapper, section_heading-label, section_subheading, section_buttons-wrapper), seleziona il wrapper e crea un componente chiamato “Section Heading Wrapper”.
3. Aggiungi le proprietà. In edit mode del componente crea una proprietà di testo per l’etichetta, una di testo e una di tag per il titolo (default H1), una di testo multi-riga per il paragrafo, una di visibilità per il gruppo pulsanti e proprietà di link/testo per i pulsanti.
4. Piazza e configura un’istanza. Esci dall’edit mode. Nella sezione features premi Shift + A, aggiungi il Section Heading Wrapper, imposta il tag del titolo su H2 e nascondi il gruppo pulsanti tramite la sua proprietà di visibilità.
5. Dai stile al tag H2. Sul tag All H2 Headings imposta margini sopra/sotto a zero, font-weight: 500, line-height: 1 e una font-size clamp() (min 24px, max 54px, differenza 30).
6. Costruisci un feature item. Aggiungi features-section_feature-list → features-section_feature-item. Dentro l’item aggiungi un wrapper di testo (H3 + paragrafo — dai stile al tag All H3 Headings con min 18px, max 40px, differenza 22) e un image wrapper (con sfondo, border-radius e bordo).
7. Rendile due colonne uguali. Imposta il feature item su display: flex, poi dai sia al wrapper del testo sia a quello dell’immagine il sizing flex “grow if possible”. Aggiungi un gap (attorno a 6em), centra gli item sull’asse trasversale e imposta il wrapper del testo come colonna flex verticale.
8. Ripeti. Duplica il feature item per rispecchiare il riferimento, poi imposta la feature list come colonna flex verticale con un gap (di nuovo 6em).

Lasciamo di proposito il layout alternato e il testo finale per la prossima lezione — perché sono la scusa perfetta per introdurre le varianti dei componenti e, subito dopo, il CMS di Webflow.