Componenti guidati dal CMS e dropdown animati in Webflow

Alla fine di questa lezione finirai la sezione team, collegherai le proprietà dei componenti direttamente al CMS e costruirai un FAQ con dropdown che si aprono e chiudono con un’animazione fluida. È la lezione in cui componenti, CMS e movimento si incontrano.

Due momenti meritano attenzione. Il primo è un piccolo tocco di magia di Webflow: trasforma un blocco collegato al CMS in un componente e le proprietà che ti aspetteresti di creare sono già lì, ancora collegate al CMS. Il secondo è l’animazione — il tuo primo vero viaggio nel pannello interazioni, tenuto di proposito semplice ma pienamente funzionante.

Rallentiamo anche sui dettagli che fanno inciampare: rendere un’immagine CMS un cerchio pulito, scegliere il rich text per le risposte strutturate e sistemare il quirk di posizionamento che fa sovrapporre un dropdown a tutto ciò che ha sotto.

Come funziona

Partiamo dalle card del team. Un cerchio è solo un quadrato con angoli perfettamente arrotondati, e le immagini CMS arrivano in tutte le forme, quindi la ricetta robusta è: imposta l’aspect ratio dell’immagine su square (larghezza e altezza coincidono sempre), imposta object-fit: cover (riempie il riquadro e ritaglia invece di deformare), poi imposta border-radius: 50%. Tre passi, qualsiasi foto, sempre un cerchio.

Poi la magia. Quando trasformi la card collegata al CMS in un componente, Webflow crea in automatico una proprietà per ogni elemento collegato, nomina ciascuna come il suo campo CMS e tiene vivo il collegamento — le proprietà si illuminano di viola per mostrare che stanno tirando dal CMS. Hai costruito le connessioni una volta a livello di elemento; Webflow le preserva come proprietà del componente, gratis.

Il FAQ riusa tutto in un nuovo contesto. Le risposte hanno bisogno di vera struttura — paragrafi, titoli, liste — quindi il campo answer è un campo rich text, non testo semplice (e al suo interno sistemi la gerarchia dei titoli così quelli annidati diventano H4/H5 sotto l’H2/H3 della sezione). L’unica vera insidia è il posizionamento: una dropdown list è position: absolute di default, quindi una list aperta si sovrappone ai dropdown sotto. Passala a static e rientra nel flusso della pagina, spingendo in basso i fratelli man mano che si espande — esattamente ciò che gli utenti si aspettano.

Per l’animazione, il setup chiave è overflow: hidden sulla dropdown list così il contenuto viene tagliato quando l’altezza è zero. Usando il trigger “dropdown opens” animi l’altezza della list da uno stato iniziale 0 ad auto e ruoti l’icona freccia di 180°. Il passaggio cruciale, spesso dimenticato: cambia il target del trigger da Element a Class così tutti i dropdown che condividono la classe si animano, non solo quello su cui l’hai costruita. L’animazione di chiusura è solo quella di apertura duplicata e invertita. E poiché il dropdown nativo di Webflow chiude già l’item aperto quando ne apri un altro, ottieni quella rifinitura senza costruirla.

Come si usa

1. Dai stile alle card. Dai al content wrapper dell’item padding (1.5em), uno sfondo, border-radius e bordo; impostalo come colonna flex verticale centrata. Trasforma l’immagine in un cerchio (ratio square → object-fit: cover → border-radius: 50%) e sistema lo spacing di nome/ruolo e il gap delle icone social.
2. Rendi la card un componente. Seleziona il content wrapper dell’item (non il collection item) e premi ⌘/Ctrl + Shift + A. Nota che le proprietà collegate al CMS sono già create e connesse — hai finito.
3. Imposta il FAQ. Costruisci la struttura della sezione, aggiungi un’istanza del Section Heading Wrapper, poi crea una collection “FAQs” con un campo Question (testo semplice) e un campo Answer (rich text). Genera item di esempio e sistema la gerarchia dei titoli della risposta (H4/H5).
4. Costruisci il dropdown. Aggiungi una collection list collegata a FAQs (impostala come colonna flex verticale con un gap). Dentro un list item aggiungi un elemento Dropdown; dagli width: 100% e bordi arrotondati. Imposta il colore del testo del toggle su inherit, sostituisci il testo del toggle con un H3 collegato al campo Question e sostituisci i link della dropdown list con un elemento rich text collegato ad Answer.
5. Sistema il flusso. Cambia la position della dropdown list da absolute a static così spinge in basso il contenuto invece di sovrapporsi.
6. Trasforma in componente (ordine inverso). Trasforma il dropdown in un componente con proprietà Question (testo) e Answer (rich text), poi collega quelle proprietà ai campi CMS tramite le icone viola.
7. Animalo. Su un’istanza scollegata imposta il display della list su block e overflow: hidden. Nel pannello interazioni (classic) aggiungi un trigger “Dropdown opens” → “start an animation”: anima l’altezza della list ad auto (stato iniziale 0) e ruota la freccia di 180°, con una durata attorno a 0.3s e una curva ease-out. Cambia il target del trigger su Class. Duplica l’animazione, rinominala “Dropdown closes”, rimuovi gli stati iniziali e inverti i valori.
8. Rifinisci. Limita la larghezza del dropdown (~700px, display: block, margini laterali auto) e dai stile agli H4/H5 solo dentro questo elemento rich text usando il selettore annidato, così non tocchi tutto il sito.

Prossima tappa: impostiamo la navbar e usiamo griglia e Flexbox insieme per costruire il footer.