Cos'è una variante di componente in Webflow?

Una variante è un insieme alternativo di stili per lo stesso componente. La assegni per istanza e cambia solo l'aspetto, non la struttura, così un componente si adatta a contesti diversi senza doverne creare uno nuovo.

Perché riordinare gli elementi ha cambiato tutte le istanze del mio componente?

Perché spostare elementi nel navigator è un cambio strutturale, e la struttura appartiene al componente stesso, non a una variante. Per cambiare il layout per istanza, fallo con lo stile — per esempio invertendo una riga Flexbox — su una variante specifica.

Cosa sono collection, campi e item nel CMS di Webflow?

Una collection raggruppa contenuto di un tipo, come membri del team o articoli del blog. I campi definiscono quali informazioni può contenere ogni voce, come un nome, un'immagine o un link. Un item è una singola voce dentro la collection.

Quando dovrei usare una griglia invece di Flexbox in Webflow?

Usa una griglia quando il layout è davvero bidimensionale — righe e colonne insieme, come una galleria di card. Flexbox brilla per righe o colonne monodimensionali e può gestire il 2D, ma la griglia è più veloce e chiara per questa forma.

Varianti dei componenti e la tua prima collection CMS

Impara le varianti dei componenti in Webflow per cambiare layout via stile, poi costruisci la tua prima collection CMS e disponila con una griglia — la base di una sezione team dinamica.

Alla fine di questa lezione finirai la sezione features con le varianti dei componenti e inizierai la sezione team costruendo la tua prima collection CMS. Sono due delle idee più potenti di Webflow, e insieme sbloccano layout allo stesso tempo coerenti e davvero dinamici.

Prima risolviamo il layout alternato dalla scorsa volta. L’istinto è riordinare gli elementi — ma proprio così impari una cosa importante su cosa siano davvero le varianti. Poi passiamo al CMS: invece di costruire a mano ogni card del team, costruiamo la card una volta e lasciamo che il contenuto fluisca da una collection.

Il filo conduttore è costruire una volta, adattare tante volte. Una variante adatta l’aspetto di un componente per istanza; il CMS adatta un singolo layout perché ospiti quante voci vuoi. Impara entrambi e smetti di ripeterti.

Come funziona

Le varianti confondono per una sottigliezza: riguardano lo stile, non la struttura. Se riordini i wrapper del testo e dell’immagine nel navigator, quello è un cambio strutturale alla definizione del componente, quindi colpisce ogni istanza — non quello che vuoi. La soluzione è rendere lo scambio uno stile. Poiché il feature item è già una riga Flexbox, seleziona la tua nuova variante (diciamo “Image First”) e imposta la direzione della riga su reverse. Ora solo le istanze a cui assegni quella variante invertono l’ordine, mentre le altre restano sulla variante base. Le varianti si comportano come una proprietà del componente: il default resta “base” e cambi le singole istanze quando serve.

Il CMS è l’altra metà. Un content management system ti fa costruire un layout una volta e riempirlo con contenuto diverso. Tre parole da tenere chiare: una collection raggruppa il contenuto per tipo (membri del team, articoli, progetti); i campi definiscono cosa contiene ogni voce (un nome, un ruolo, un’immagine, dei link); e gli item sono le singole voci. Progetti i campi per rispecchiare il tuo riferimento — qui un’immagine profilo, un nome, un ruolo e due link social — e Webflow può persino generare item di esempio realistici con l’AI, così non resti bloccato a inventare contenuti.

Per mettere il contenuto CMS sulla pagina usi una collection list collegata a una collection, e per disporre le card usi una griglia. Le card del team formano un layout bidimensionale — righe e colonne — e mentre Flexbox può fare il 2D, la griglia è lo strumento più veloce e chiaro per questa forma. Imposta la collection list su display: grid, scegli tre colonne, e ogni item si sistema al suo posto in automatico.

Come si usa

Rendi il feature item un componente. Selezionalo, premi ⌘/Ctrl + Shift + A e chiamalo “Feature Item”. Aggiungi proprietà di testo per nome e descrizione e una proprietà immagine per la foto (nessuna proprietà per l’alt text — Webflow usa l’alt text dell’asset stesso).
Crea una variante. Entra in edit mode, apri il popup delle varianti dall’icona componente nel selettore di stile, aggiungi una variante chiamata “Image First” e — con quella variante selezionata — imposta la direzione flex del feature item su reverse. Esci dall’edit mode.
Assegnala. Sostituisci i tre feature item semplici con istanze del componente, riempi il contenuto di ciascuna e imposta la proprietà variante su “Image First” sulle card alternate.
Costruisci la struttura del team. Aggiungi una nuova section → main-container → section_content-wrapper, poi aggiungi un’istanza del componente Section Heading Wrapper e imposta il contenuto.
Crea la collection CMS. Apri il CMS, aggiungi una collection chiamata “Team Members” e crea i campi: un’immagine (Profile Picture), testo semplice (Role) e due campi link (LinkedIn Profile, X Profile). Il campo Name di default copre il nome del membro.
Genera il contenuto. Usa Generate sample items con un prompt breve (es. “Ogni item è un membro diverso di un team IT”), creane una decina e riducili al numero che serve alla tua griglia.
Disponi con una griglia. Aggiungi una collection list, collegala a Team Members, imposta la collection list su display: grid con tre colonne e un gap di 1.2em, poi aggiungi e collega gli elementi della card (immagine, nome, ruolo, link social) ai loro campi CMS tramite le icone viola.

Ci fermiamo appena prima di dare stile alle card — perché nella prossima lezione le trasformiamo in un componente le cui proprietà si collegano direttamente al CMS, e riusiamo lo stesso identico trucco in un contesto completamente diverso: la sezione FAQ.

Varianti dei componenti e la tua prima collection CMS

Punti chiave

Capitoli del video

Come funziona

Come si usa

Risorse

Domande frequenti