Ripassa e approfondisci le classi Webflow

Prima di cominciare

Questa lezione è per te se sai già aggiungere e selezionare elementi nel Designer, ma vuoi capire quali elementi cambiano quando modifichi una classe. Costruiremo esempi semplici: imparerai a condividere uno stile, rinominare una classe, crearne una copia indipendente e usare combo e utility con un'intenzione precisa. Alla fine applicherai queste scelte a un esempio diverso.

Puoi leggere il percorso per capire i concetti oppure eseguirlo in un tuo progetto di prova. Nel secondo caso, scegli un sito e una pagina modificabili e un'area libera. La lezione non richiede di pubblicare.

Parla al tutor nella tua lingua: ti guida un passo alla volta, anche nella preparazione e nella scelta di come osservare il progetto. Non serve un prompt di configurazione. In Work puoi modificare nel Designer originale, attendere il salvataggio e fargli ricaricare il Sandbox per verificare. I nomi dei controlli, le classi e i valori tecnici rimangono esatti. Il testo di riferimento e le didascalie delle dimostrazioni sono disponibili in italiano e inglese. Il tutor ti spiega i passaggi nella tua lingua.

Se un passaggio non torna, chiedi una spiegazione indicando il nome della fase, l'elemento selezionato e ciò che vedi. Prima di proseguire, torna alla verifica rimasta aperta.

Le dimostrazioni HTML ricostruiscono il Designer: sono repliche, non catture di una sessione Webflow. Partono in pausa e si fermano alla fine del segmento scelto. Puoi rivederle, spostarti nella timeline e tornare a questo punto della lezione. Le immagini indicano separatamente schemi e catture autentiche.

Lavoreremo su tre esempi distinti: A/B/C per Rename e Duplicate, un nuovo gruppo A/B/C per Combo, e Universal con Card A/Card B per Utility. Conserva i gruppi precedenti; seleziona sempre quello indicato dal passo. Ogni replica mostra soltanto il gruppo del proprio esempio. Se li conservi tutti sulla stessa pagina, il contatore «on this page» dello Style Selector può essere più alto: include anche gli altri elementi della pagina che usano quella classe. Confronta nomi, contesti e conseguenze, senza cercare di riprodurre quel numero.

Cosa saprai decidere. Quando condividere uno stile, quando creare una classe indipendente e quando usare combo o utility. Il filo della lezione è prevedere quali elementi saranno raggiunti da una modifica e spiegare perché. Alla fine userai queste scelte in una prova con una tua soluzione.

Controlli attuali e impaginazione dell'esercizio

Nel pannello Add attuale Webflow usa Box per gli elementi strutturali. Un Box nuovo ha tag Div; il tag si legge/cambia in Settings → Tag. Usiamo tag Section per l'esterno e Div per area interna e card. Tag HTML, etichetta nel Navigator e classe CSS sono distinti. Gli elementi storici Section, Container e Div Block continuano a funzionare: non ricostruire una gerarchia valida solo per rinominarne il tipo. Controlla il tag e la struttura effettiva.

Prepara un'area leggibile, poi concentrati sul comportamento delle classi. Le proprietà predefinite non richiedono istruzioni o conferme di routine: si indagano solo se un conflitto cambia il risultato. Il massimo di 960px e la spaziatura sono suggerimenti visivi, non criteri di superamento. Una differenza innocua come padding 26px anziché 16px nel contenitore non richiede correzione o nuova verifica.

Le basi delle card dimostrative usano Height 160px fissa e padding 16px suggerito. Mantieni brevi e leggibili le etichette; non nascondere l'overflow per farle entrare. Notice conserva il test autonomo 20px→24px: lì il cambiamento del padding è proprio il criterio didattico e resta esatto. Universal mantiene solo la utility di colore: non aggiungere dimensioni alla utility standalone.

Le repliche aggiornate mostrano la griglia e i colori dell’esercizio; l’interfaccia conserva i controlli osservati durante la preparazione, con inquadrature illustrative. I nuovi elementi si aggiungono come Box con il tag indicato. Replica e catture autentiche restano distinte: non è una sessione live di Webflow. La differenza di scala e il pannello ingrandito servono a leggere il controllo, non a cambiare il risultato.

Prepariamo il laboratorio

Obiettivo. Rendere gli esempi leggibili nel Designer. La preparazione grafica non è il tema della lezione: useremo card affiancate per vedere subito quali elementi cambiano. Puoi fermarti, fare domande e chiedere una dimostrazione durante il percorso.

Una classe è un nome che collega gli elementi a regole di stile riutilizzabili. Un elemento può avere più classi; la regola che stai modificando dipende dal contesto selezionato nello Style Selector.

Il Navigator mostra la gerarchia degli elementi. Il nome con cui riconosci un elemento nel Navigator non basta, da solo, a dimostrare quali classi usa. Per leggerle, seleziona l'elemento e guarda Style panel → Style selector. Il testo contenuto in un paragrafo è ancora un'altra cosa.

Le classi non sono l'unica fonte di stile: esistono regole sui tag HTML, proprietà ereditate e valori predefiniti del browser. Qui useremo una piccola area controllata per rendere visibile l'effetto delle classi che creiamo.

Prima dell’esempio il tutor chiede una sola previsione aperta: due paragrafi hanno la stessa classe; se cambi le parole di uno, che cosa ti aspetti dall’altro? Aspetta la risposta. Poi chiede separatamente cosa succede cambiando una proprietà della classe condivisa e aspetta ancora. Nessuna risposta suggerita o preselezionata.

Prepara l'area. Nel progetto confermato, a Desktop e nello stato normale, aggiungi un Box con tag Section nell'area libera. Controlla il tag in Settings → Tag, oppure usa Box <section> in Quick find se disponibile. Assegna academy-classes-section e imposta padding 24px su tutti i lati. Non modificare All Sections o Body per preparare l'esercizio.

Al suo interno aggiungi un Box con tag Div e assegna academy-classes-demo. Imposta sulla classe queste proprietà scelte per il tutorial:

Sono suggerimenti di impaginazione, non default Webflow o requisiti delle classi. Assegna l'intera preparazione, incluso il paragrafo seguente, come un unico compito con una verifica finale. Conserva un equivalente già leggibile senza correzioni cosmetiche. Indaga dimensioni/display solo se il risultato presenta un conflitto.

Inserisci nel Div un paragrafo con il testo «Classi: condivise, indipendenti, combinate». Controlla nel Navigator che il paragrafo sia figlio del Div e che questo sia dentro il Box con tag Section. Questa sarà l'area di tutti gli esercizi.

Prepara un Box con tag Div per il primo gruppo, fratello del paragrafo introduttivo, con classe dedicata academy-example-grid. Imposta Display Grid, tre colonne uguali (1fr ciascuna), gap 16px. Le basi delle card manterranno Height 160px. Su mobile usa una colonna; l’area può restringersi. Se non sai configurare Grid, chiedi la guida breve: è preparazione, non una prova sulle griglie. Quando arriveremo a Combo e Utility creeremo altri wrapper con questa classe, conservando gli esempi separati. I titoli dei gruppi restano fuori dalle griglie. All’inizio A/B occupano le prime due colonne; C occuperà la terza.

Universal mantiene solo la utility di colore: il wrapper e l’allineamento stretch danno forma alla sua cella senza aggiungere proprietà di layout alla utility. Le card Utility hanno una base separata; la preparazione grafica non deve creare uno sfondo su quella base.

Prima di creare i nomi indicati, verifica che non esistano già nel tuo sito. Se un nome è occupato, scegli un prefisso libero e usalo coerentemente per tutta la lezione. Non riutilizzare una classe preesistente senza averne letto le regole.

Fermati e controlla: sei sulla pagina scelta, l'area è libera e il testo è visibile? Se il Designer ha selezionato il paragrafo anziché il Div, risali nel Navigator prima di modificare lo stile del contenitore.

Conclusione della preparazione. L’area è pronta; ora useremo la stessa classe su due card per separare contenuto e stile condiviso. Le differenze estetiche innocue non bloccano l’esperimento.

Uno stile condiviso, contenuti diversi

Obiettivo. Applicare una classe esistente a un altro elemento e prevedere quali card cambiano quando modifichi quella classe.

Dentro il primo academy-example-grid, aggiungi un Box con tag Div. Nel suo Style Selector crea academy-class-card. Inserisci un paragrafo con «Card A — stile condiviso». Seleziona nuovamente il Box esterno della card e imposta questi valori visivi. Imposta queste dichiarazioni per l’esercizio:

Height 160px fissa dà all'esempio l'aspetto di una card. Queste misure servono alla presentazione, non sono una verifica separata. Crea entrambe le card prima del controllo: non occorre approvare Card A prima di costruire B.

Il testo eredita il colore scuro dall'area dell'esercizio. Aggiungi un secondo Box con tag Div come fratello del primo nello stesso wrapper, assegna la classe già esistente academy-class-card scegliendola dai suggerimenti e inserisci «Card B — stesso stile, altro contenuto». Non creare una classe con un nome quasi uguale.

Seleziona separatamente i due Div esterni. Entrambi devono avere una sola classe, con lo stesso nome esatto. I loro paragrafi hanno invece parole diverse.

Prevedi, poi prova. Se cambi lo sfondo della classe selezionando A, quali card cambieranno? Dopo la previsione, con A selezionata imposta Background color a #FFF0B3. Controlla A e B nello stesso breakpoint e stato.

Risultato atteso: entrambe hanno il nuovo sfondo; i testi restano distinti. Hai modificato una regola condivisa. Modificare le parole del paragrafo di A, invece, non riscrive automaticamente quelle del paragrafo di B.

Se cambia soltanto una card: confronta i nomi completi, verifica se una ha una classe aggiuntiva, controlla il Div selezionato, breakpoint e stato. Prima di aggiungere un'altra classe, cerca una differenza di contesto o un override: una regola che sovrascrive il valore che ti aspetti. Correggi la differenza e ripeti la verifica su entrambe.

Conclusione. Le due card hanno parole indipendenti e uno stile condiviso. La modifica dello sfondo riguarda la classe, non soltanto la card selezionata.

Rinominare una classe condivisa

Obiettivo. Capire se cambiare il nome crea una classe nuova o rinomina quella già condivisa. Prima prevedi cosa mostrerà B.

Vuoi rinominare la classe, mantenendo condiviso lo stile delle card. Prima di farlo, prevedi che cosa dovrebbero mostrare A e B dopo il cambio di nome.

Seleziona il Div esterno di A. Nel menu del nome della classe, nello Style Selector, scegli Rename class. Scrivi academy-class-panel e conferma. Seleziona poi B e leggi il suo Style Selector.

Risultato atteso: entrambe usano academy-class-panel; padding e sfondo rimangono quelli impostati. Hai rinominato la classe condivisa, non soltanto l'elemento selezionato.

Se è cambiata solo un'etichetta nel Navigator, torna allo Style Selector e controlla che cosa hai rinominato. Se volevi una variante indipendente, il cambio di nome non basta: il prossimo passaggio serve proprio a crearla.

In un progetto con codice personalizzato, controlla anche gli eventuali selettori scritti in CSS o JavaScript. Non dare per scontato che Webflow riscriva ogni riferimento esterno quando rinomini una classe.

Conclusione. Rename ha cambiato il nome della stessa classe: A/B sono ancora collegate e conservano lo stile.

Creare una classe indipendente

Obiettivo. Cambiare soltanto C senza modificare A/B. Prima di ricevere la procedura, proponi cosa deve diventare indipendente. Il tutor aspetta il tuo piano prima di spiegare la differenza fra duplicare l’elemento e duplicare la classe.

Duplica l’elemento B e conserva il nuovo Div come fratello di A e B. Cambia il testo del suo paragrafo in «Card C — variante indipendente». C conserva inizialmente academy-class-panel: duplicare l’elemento non crea una nuova classe. La dimostrazione parte da questa preparazione già completata.

Seleziona il Div esterno di C. Dal menu della sua classe scegli Duplicate class, assegna alla copia il nome academy-class-panel-alt e conferma. Controlla che C usi la nuova classe come base, senza averla semplicemente aggiunta dopo quella precedente. Poi cambia Background color in #D9E8FF.

Risultato atteso: C è azzurra; A e B restano gialle. C conserva il padding copiato di 16px e l’altezza di 160px, ma la nuova classe è indipendente dalla precedente. Una futura modifica alla vecchia classe non aggiorna automaticamente questa copia.

Duplicare un elemento normalmente conserva le classi applicate. Duplicare una classe crea una nuova classe. Inoltre, duplicare la classe del Div esterno non duplica le classi dei suoi figli: un titolo annidato può continuare a condividere la propria classe con altri titoli.

Se A e B cambiano insieme a C, verifica che C usi davvero la copia. Non cercare di isolarla cambiando soltanto il nome dell'elemento nel Navigator. Qui manteniamo lo stesso layout: il colore basta a verificare l'indipendenza.

Conclusione. C usa una classe nuova, copiata inizialmente dalla precedente: ora le modifiche a quella classe possono riguardare C senza aggiornare A/B.

Creare una variazione con una combo

Obiettivo. Aggiungere una variazione condivisa senza riscrivere la base, distinguendo la presenza delle classi dal contesto in cui salvi uno stile.

Una combo permette di definire una variazione nel contesto della base. Nel nostro esempio useremo due classi sullo stesso elemento.

Prepara un esempio separato. Conserva le tre card precedenti. Aggiungi un nuovo wrapper academy-example-grid con tre Box con tag Div fratelli, riconoscibili dal contenuto «Card A», «Card B» e «Card C», e assegna a tutti la classe esistente academy-class-panel. Controlla che ciascuno abbia soltanto questa classe e lo sfondo #FFF0B3. Da qui fino alla fine di questa fase, A/B/C indicano esclusivamente questo nuovo gruppo. La C azzurra dell’esempio precedente mantiene la sua classe indipendente.

Aggiungere un bordo e riutilizzarlo

Seleziona B. Dopo academy-class-panel, nello Style Selector, aggiungi una nuova classe chiamata academy-has-border. Dopo aver aggiunto la seconda classe, lo Style selector mostra base e combo: stai modificando il loro contesto combinato. Imposta tutti e quattro i bordi a Solid, 2px, #000000.

A e C devono restare senza questo bordo; B deve mostrarlo. Seleziona ora C, che ha già academy-class-panel, e applica la classe esistente academy-has-border dopo la base. Non impostare di nuovo il bordo su C: verifica se riceve la regola già definita.

Risultato atteso: B e C hanno lo stesso bordo nero, mentre A non lo ha.

Il segno + nella tabella significa «due classi sullo stesso elemento»: non è un carattere da digitare. Un selettore indica quali elementi una regola deve raggiungere. In CSS questa combinazione si scrive:

.academy-class-panel.academy-has-border

Non c'è uno spazio tra i nomi. La regola raggiunge gli elementi che hanno entrambe le classi, anche se possiedono ulteriori classi. Non è legata alla sola B che avevi selezionato durante la modifica.

Prevedi, poi verifica. Se cambi il colore del bordo selezionando C e lasciando nello Style selector il contesto academy-class-panel seguito da academy-has-border, che cosa prevedi per B e per A? Motiva la risposta prima di aprire la dimostrazione o modificare il valore.

Su C, nel contesto academy-class-panel seguito da academy-has-border, cambia solo Border color da #000000 a #D45B5B. Conserva Solid e 2px. Atteso: B e C hanno il bordo rosso; A rimane senza bordo. La modifica appartiene alla combinazione, anche quando la esegui dall’altra istanza.

Sovrascrivere una proprietà della base

Ora usa A, che ha ancora soltanto academy-class-panel. Aggiungi dopo la base la nuova classe academy-is-white e, senza passare alla sola base tramite Inheriting, imposta Background color a #FFFFFF. La base aveva già uno sfondo: qui lo stai sovrascrivendo in un contesto più specifico.

Per confrontare le regole senza modificarle, apri l'indicatore Inheriting sopra lo Style Selector e seleziona la base academy-class-panel. Il suo sfondo deve essere ancora #FFF0B3. Usa Back per tornare alla combinazione: lì leggi #FFFFFF. La card può continuare a mostrarsi bianca anche mentre stai leggendo la regola base, perché l'override rimane applicato all'elemento.

Controllo: A è bianca; B e C mantengono lo sfondo giallo della base e il bordo rosso. Le card del primo esempio non vengono modificate. Se il passaggio di selezione non è disponibile nella tua interfaccia, confronta i contesti con il tutor senza inventare il comando e lascia esplicita la verifica ancora da fare.

Mappa finale dell’esempio Combo. Il riepilogo riguarda soltanto il gruppo Combo appena preparato, non le card del primo esempio.

Il testo di A conserva il colore scuro #111111 per tutta la procedura. Aggiungere academy-is-white non cambia ancora l’aspetto: lo sfondo diventa bianco soltanto quando confermi la modifica di Background color nella combinazione. Non occorre aggiungere una classe al paragrafo o modificarne il colore.

Leggere il contesto completo

Il suffisso da solo non basta. La regola di una card con academy-has-border non è automaticamente la regola di una sezione con un'altra base e lo stesso suffisso. I due selettori combinati sono diversi. Una eventuale regola standalone .academy-has-border, però, potrebbe contribuire allo stile di entrambi.

Nel riferimento originale esistono proprio una card e una section con has-border in contesti diversi. Qui basta riconoscere la distinzione: non serve costruire un'altra sezione per completare il percorso.

Se il bordo compare dove non lo aspettavi, leggi tutte le classi applicate e la regola selezionata, anziché concludere che la combo appartenga a una singola card.

Conclusione. Hai aggiunto e riutilizzato una combo, poi letto separatamente base e combinazione. Leggere la base non rimuove le classi né l’override dall’elemento.

Riutilizzare una utility

Obiettivo. Distinguere applicare uno stile già esistente dal salvare una nuova variazione per una combinazione.

Una utility, spesso chiamata anche global class, è una classe ordinaria usata per una funzione riutilizzabile, come uno sfondo o un raggio. Quando nomineremo u-academy-bg-red, il prefisso u- sarà una nostra convenzione per riconoscere le utility: non attribuisce alla classe un comportamento speciale in Webflow. Usare una sola proprietà può rendere una utility più leggibile, ma non è un requisito tecnico: per esempio, un'ombra riutilizzabile può avere più valori.

Per distinguere bene gli effetti, prepariamo un terzo esempio separato: Universal, Card A e Card B. Universal è il nome visibile del campione, non un selettore universale CSS o un tipo speciale di classe. Non alteriamo gli esempi precedenti, che hanno già i propri sfondi.

Creare per prima Universal e la utility isolata

Crea un nuovo wrapper Utility con la classe esistente academy-example-grid. Come primo elemento figlio aggiungi un Box con tag Div e il paragrafo «Universal». Assegna al Box soltanto u-academy-bg-red e imposta Background color a #D45B5B. Non aggiungere una seconda classe. La cella della griglia dà superficie visibile al campione; la utility dichiara soltanto il colore. La creiamo isolata prima di riutilizzarla sulle card.

Aggiungere poi Card A e Card B, con una base senza sfondo

Dopo Universal aggiungi il successivo Box fratello con tag Div nello stesso wrapper e il paragrafo «Card A — utility condivisa». Assegna al Box una nuova classe, academy-utility-card. Imposta padding 16px, margin bottom 12px e Height 160px. Non impostare uno sfondo su questa base. Aggiungi una seconda card con «Card B — stessa utility», applicando la stessa classe esistente.

Controlla che i due Div abbiano soltanto academy-utility-card e che non portino con sé le classi delle card degli esempi precedenti. Il colore di sfondo della base deve essere privo di una dichiarazione introdotta da questo esercizio. Se il tuo sito impone uno sfondo tramite altre regole, identifica quel contesto prima di procedere.

Prima di applicare la utility, lo sfondo di queste card non è dichiarato: può apparire bianco sul canvas. I testi e la disposizione nella griglia permettono di riconoscerle. Non aggiungere uno sfondo alla base per ottenere un grigio: cambierebbe l’esperimento.

L’ordine da sinistra a destra è Universal, Card A, Card B, come nell’animazione. È una scelta di presentazione, non un requisito del selettore CSS. Un esempio già costruito in un altro ordine leggibile non richiede modifiche alle classi applicate.

Applicare la utility esistente alle card

Seleziona Card A e applica la classe esistente u-academy-bg-red dopo la base. Ripeti su Card B. In questo passaggio non modificare Background color mentre è selezionata la combinazione: stai soltanto applicando la utility già creata.

Risultato atteso: Universal, Card A e Card B hanno sfondo rosso. Le due card conservano la spaziatura della loro base; Universal non la acquisisce dalla utility. Se una card resta senza rosso, controlla che la classe sia applicata al Div giusto, il nome esatto e le eventuali regole di sfondo concorrenti. Non creare un override per far sembrare riuscita l'applicazione della utility.

Modificare il contesto combinato

Prima di agire, prevedi che cosa dovrebbe succedere a Card A, Card B e a Universal se modifichi lo sfondo dopo aver selezionato Card A, lasciando nello Style selector la base seguita dalla utility. Su queste card il contesto attivo è quello combinato; per modificare la utility autonoma useremo Universal.

Seleziona il Div di Card A. Leggi l'intero contesto nello Style Selector: academy-utility-card seguito da u-academy-bg-red. In questo contesto combinato, imposta Background color a #FFC6C6. Poi seleziona Universal e Card B, leggendo i loro contesti separatamente.

Risultato atteso nella nostra area controllata:

La regola standalone rossa non è stata cancellata. La combinazione definisce uno sfondo diverso per gli elementi che la soddisfano. Card B cambia insieme a Card A, anche se non l'hai selezionata durante l'edit.

Applicare una utility non la rende inutilizzabile globalmente e non modifica, da solo, la sua dichiarazione standalone. Sono diverse la presenza delle classi sull'elemento e la scelta della regola in cui salvi una nuova proprietà.

Se Universal diventa rosa: verifica se hai modificato la utility da sola, oppure se Universal ha ricevuto anche la base. Se cambia solo Card A: confronta lo stack completo di Card B, il breakpoint, lo stato e altri override. Non dichiarare creata una regola combinata prima di averne letto il contesto e il valore effettivo.

Una dichiarazione aggiunta altrove può cambiare il risultato: in quel caso fermati, individua la regola responsabile e verifica di nuovo. Il colore visibile da solo non dimostra dove è stata salvata una proprietà.

Una regola di stile collega un insieme di elementi a proprietà e valori. Qui la utility da sola raggiunge Universal e le due card; la combinazione base+utility raggiunge soltanto le due card e vi aggiunge lo sfondo rosa. Nel CSS un selettore esprime proprio quali elementi vengono raggiunti. Nel Designer lo Style selector permette di leggere e modificare i relativi contesti: non stai selezionando due card contemporaneamente.

Come si modifica nel Designer. Per cambiare la dichiarazione autonoma seleziona Universal: qui ha soltanto u-academy-bg-red. Su A/B, invece, il normale contesto modifica la combinazione academy-utility-card + u-academy-bg-red; la loro base è academy-utility-card, non la utility. Non si modifica la seconda classe da sola in quel contesto. Per cambiare il rosa seleziona A oppure B e resta nella combinazione; Universal non permette di modificare quella combinazione, perché non ha la base.

La dichiarazione autonoma continua ad applicarsi a tutti e tre gli elementi, ma sulle card lo sfondo della combinazione prevale su quella proprietà. Cambiando lo sfondo autonomo, Universal rifletterebbe la modifica mentre le card resterebbero rosa. Non è un rapporto di eredità tra elementi padre e figlio, né una proprietà del prefisso. Spiega il motivo; evita domande sui nomi/ordine delle classi appena prescritti. Se serve una domanda di ragionamento, chiedi perché le card conserverebbero il rosa, senza eseguire un altro cambio pratico di colore.

Conclusione. Applicare la utility ha riusato il rosso senza modificarlo. Cambiare lo sfondo nel contesto base+utility ha creato il rosa per le due card, lasciando Universal rosso. Conta il contesto modificato: qui lo raggiungi selezionando una delle due card.

Prova finale — Progetta due avvisi

Obiettivo. Verificare se sai scegliere una struttura di classi per un caso nuovo, motivarla e prevedere una modifica. Non seguiamo un’altra ricetta: proponi tu nomi e soluzione. Puoi chiedere indizi; distingueremo il primo tentativo da ciò che completi con aiuto.

Ora prova a scegliere tu, prima di leggere altri suggerimenti. Usa un nuovo gruppo nell’area di prova per due avvisi (Notice), con testi distinti. Prima descrivi come organizzeresti le classi e perché; poi realizza la tua proposta. Entrambi devono avere padding 20px, sfondo #F2F2F2 e testo leggibile. Qui il padding è la variabile del test, non un dettaglio estetico da ignorare. Uno solo deve avere un bordo Solid, 2px, #111111.

Una futura modifica al padding deve aggiornare entrambi, senza costringerti a ripetere la stessa modifica su due classi indipendenti. Scegli nomi nuovi, implementa la tua soluzione e spiega perché soddisfa questi requisiti. Puoi consultare la lezione: annota ciò che hai consultato e l'aiuto che hai ricevuto.

Prima di una modifica di verifica, prevedi quali elementi coinvolgerà. Poi cambia il padding da 20px a 24px nel contesto che hai scelto e controlla entrambi i Notice e il bordo del solo elemento previsto. Il tutor deve attendere il tuo tentativo prima di suggerire un assetto delle classi.

Se stai seguendo soltanto il percorso concettuale, proponi la scelta e la motivazione; tieni distinta questa spiegazione dalla capacità di eseguirla.

Confronto finale

Dopo una proposta valida, il tutor lascia eseguire il piano senza fornire la ricetta. I soli nomi delle classi non provano che gli avvisi siano stati costruiti: prima della modifica al padding serve il riscontro del risultato. La domanda sul contesto di modifica è aperta, senza elencare le alternative; istruzioni sui controlli solo se richieste o necessarie per correggere un errore.

Verifichiamo tre aspetti: hai previsto quali elementi cambiano; hai realizzato la soluzione che proponi; sai spiegare perché il bordo resta su un solo avviso. Il tutor non fornisce l’assetto delle classi prima del tuo tentativo, né considera un’azione guidata come prova di autonomia.

Il riepilogo finale racconta cosa sai fare adesso — condividere, rinominare, rendere indipendente, creare una variazione e riutilizzare una utility — indicando dove hai avuto bisogno di un indizio. L’approfondimento sui nomi nel browser si considera svolto solo se lo hai scelto ed eseguito.

Controlla separatamente le classi/proprietà e ciò che vedi in Preview. Il percorso principale non richiede un ulteriore test responsive per concludersi. Come approfondimento facoltativo di presentazione dopo la conclusione, a Desktop e a una larghezza stretta, per esempio 393px, verifica che testi e differenze tra card siano leggibili e che non ci siano tagli o scorrimento orizzontale indesiderato. Se compare overflow, cerca larghezze fisse, spaziature o contenuti problematici; non nasconderlo per far sembrare riuscito il controllo.

L’esercizio Webflow non richiede animazioni. Quelle delle dimostrazioni illustrano la procedura: non sono effetti da ricreare sulle tue card. Se manca una vista o una lettura, conserva il controllo come ancora da eseguire.

Prepara un breve recap con: lingua e modalità; sito/pagina del tuo esercizio; nomi adottati; risultati controllati su classi e proprietà; larghezze osservate; scelta fatta per i Notice; passaggi aperti e aiuto ricevuto. Puoi usarlo per riprendere in un'altra conversazione, dove lo stato attuale andrà verificato di nuovo.

Un risultato costruito con guida dimostra che hai completato quel lavoro con quel supporto. Per capire quanto sai trasferirlo, conserva anche il tuo primo tentativo sui Notice, prima delle correzioni. Quale passaggio è rimasto meno chiaro?

Approfondimento facoltativo — I nomi delle classi nel browser

Questo passaggio serve quando devi riconoscere i nomi usati nel codice. Il percorso principale si conclude con la prova finale; questo approfondimento non è necessario per completarlo. Se scegli l’approfondimento, distingueremo il nome nel Designer, i token HTML e il selettore CSS.

Nel Designer puoi leggere Look At My Card; nel pubblico del riferimento il token osservato è look-at-my-card. Quando il codice deve cercare una classe, è utile leggere il nome effettivo anziché indovinarlo.

Il DOM è la rappresentazione degli elementi della pagina nel browser. Qui lo leggiamo in una pagina già pubblicata, senza modificare o pubblicare nulla.

1. Apri il riferimento pubblico in un browser desktop. In Chrome fai clic destro su una card e scegli Inspect, oppure Ispeziona. Si apre il pannello Elements.
2. Controlla l'elemento evidenziato. Se è il paragrafo o un titolo, risali al Div esterno della card; passando sulla sua riga, l'evidenziazione deve coprire la card.
3. Leggi class="...". Puoi incontrare, per esempio, class="look-at-my-card has-border". Lo spazio separa due token di classe: look-at-my-card e has-border.
4. Per un selettore CSS di classe si antepone il punto: .look-at-my-card. Per chiedere entrambe le classi sullo stesso elemento: .look-at-my-card.has-border, senza spazio tra i selettori.

Lo spazio dentro l'attributo HTML separa i nomi applicati. Uno spazio tra selettori CSS avrebbe invece un altro significato, una relazione di discendenza. Non devi scrivere codice per completare l'esercizio: devi riconoscere i token letti.

Con un altro browser usa il suo equivalente di Inspect; se non lo trovi, chiedi il percorso per quel browser. Se puoi soltanto leggere l'esempio qui sopra, hai un esempio concettuale, ma non hai ancora eseguito l'ispezione della pagina.

La tabella di nomi presente nel riferimento mostra degli esempi. Non basta a dimostrare una regola universale per ogni carattere speciale o nome possibile. Per il tuo codice verifica il markup effettivo e usa nomi semplici e coerenti.

Approfondimento facoltativo — Radius: la stessa logica su un'altra proprietà

È facoltativo: il percorso principale è completo senza questo esercizio. Usa una piccola area separata per non aggiungere ulteriori classi alle card precedenti. Crea due Box con tag Div, R1/R2, entrambi con la nuova base academy-radius-card, contenuto testuale distinto, padding 16px, margin bottom 12px, Height 160px e sfondo #F2F2F2. Non impostare un radius sulla base.

Aggiungi un campione separato con un paragrafo che lo identifichi. Assegna al Div soltanto u-academy-radius e imposta Radius 8px su tutti gli angoli. Applica poi la utility esistente dopo la base di R1 e R2, senza editarla in quei contesti. Le due card devono mostrare gli angoli arrotondati; il campione senza sfondo può non renderli visibili, ma permette di leggere la regola isolata.

Prima di ogni modifica, prevedi l'effetto sui tre elementi:

1. Sul campione con la sola utility, imposta Radius a 16px. Atteso: R1/R2 ricevono 16px, in assenza di altre regole concorrenti.
2. Su R1, con academy-radius-card seguito da u-academy-radius nello Style selector, imposta Radius a 24px. Leggi il contesto e controlla R2: entrambe le card devono usare 24px, mentre la utility isolata conserva 16px.
3. Torna al campione isolato e imposta 20px. Le card devono mantenere il loro override combinato a 24px, mentre la regola standalone ora ha 20px.

Controlla gli angoli nella Preview e i valori nei contesti effettivi. Se il risultato è diverso, confronta nomi, breakpoint, stato e altre dichiarazioni; non attribuire al raggio una logica diversa da quella delle regole di sfondo. Il nome non impone un valore numerico: è la proprietà salvata a determinarlo.

Fonti e provenienza

Questo è un adattamento didattico Academy della lezione Classes di Francesco, con qualificazioni tecniche già approvate e nuovi esercizi. Gli esempi semplificati, i loro nomi/valori e le seconde istanze non sono una trascrizione dei clic originali.

• Video originale.
• Progetto pubblicato di riferimento.
• Cloneable originale.
• Guida ufficiale Webflow sulle classi.

La preparazione ha confrontato transcript inglese recuperato, campioni visivi del video e configurazioni pertinenti del Designer originale in sola lettura. Non è una certificazione di apprendimento o del risultato del tuo progetto.

UI attuale (verificata il 19 ottobre 2026):

• Aggiornamento Box.
• Guida Box.
• Display settings.