Scegli dove impostare uno stile, prevedi quali larghezze cambieranno e scopri perché una proprietà non segue più la base. Poi verifica il risultato a larghezze reali, anche fra le viste predefinite.
Non è richiesta una precedente lezione dell’Academy. Per la pratica serve una pagina Webflow che puoi modificare. Non servono un progetto clonabile o la pubblicazione. Le dimostrazioni usano una replica didattica del Designer: non mostrano il tuo progetto salvato. Le etichette dei controlli Webflow restano in inglese.
Scegli come imparare
Con un tutor AI: scarica il file della lezione, allegalo a una nuova conversazione nel tuo assistente AI e inizia nella tua lingua. Il tutor guida; le modifiche le fai tu. Concorda con te come osservare il lavoro, tramite un collegamento MCP Webflow, se configurabile, un browser/Sandbox accessibile, immagini o impostazioni riferite. Ti chiederà brevemente l’esperienza che non hai già indicato. Caricare il file non dà accesso al progetto. Se la chat non ha un browser interattivo, puoi concordare un tentativo in Work, se disponibile per te: l’accesso al Sandbox va verificato lì. Restare nella chat con immagini o impostazioni riferite è un’alternativa da scegliere esplicitamente, non un passaggio automatico.
Su questa pagina: segui il riferimento e l’esercizio qui sotto. Prima di aprire una spiegazione o una dimostrazione, prova a formulare la tua previsione. Puoi mettere in pausa, navigare nel tempo, ricominciare o avanzare per stati con movimento ridotto. Ogni aiuto include un riepilogo testuale di valori e origini. Puoi aprirlo separatamente per avere più spazio.
Prepara una scheda
Per un nuovo tentativo usa una pagina di esercizio vuota, anche nello stesso progetto. Se le classi indicate hanno già degli stili, concorda con il tutor nomi nuovi inutilizzati e mantieni la corrispondenza. Il riuso di una card esistente è una scelta esplicita: gli stili già presenti non sono attività svolte in questo tentativo.
Crea una pagina di prova vuota. Nel Navigator costruisci Body → Box lab-page → Box lab-card → Heading lab-title e Paragraph. I due Box usano il tag div; Heading usa H1. Assegna la classe indicata prima di applicare gli stili all’elemento. Una classe dà un nome a una regola di stile riutilizzabile: questi nomi sono convenzioni, non comandi. Va bene anche un vecchio Div Block se tag e struttura corrispondono.
Usa Webflow Lab come titolo e Un incontro pratico per costruire la tua prima pagina. come paragrafo. Puoi tradurre il testo ordinario; mantieni esatti i valori dell’esercizio e usa con coerenza i nomi delle classi concordati.
Sul breakpoint base Desktop:
- Imposta il padding di
lab-pagea 24px su tutti i lati. - Imposta
lab-cardcon width 100%, max-width 960px, margin sinistro/destro Auto e padding 32px su tutti i lati. - Imposta
lab-titlecon font size 32px e line height 1.2 senza unità.
Lascia che la scheda cresca con il contenuto. Usa un aspetto neutro e leggibile. Queste misure servono all’esercizio: non sono regole universali per un sito responsivo. Verifica struttura, classi, testo e contesto base prima di continuare.
Trova il punto di partenza condiviso
Prima una previsione: se cambi la dimensione del titolo sul breakpoint base Desktop, dove ti aspetti che compaia la modifica?
Confronta la previsione con la dimostrazione della base
Desktop è la regola di base, non lo schermo più grande. Gli stili della base valgono alle diverse larghezze, salvo una dichiarazione applicabile che sostituisca quella proprietà. Le regole dei breakpoint piccoli si propagano verso larghezze minori; quelle dei breakpoint grandi verso larghezze maggiori. Selezionare un breakpoint non crea un override né una copia della pagina.
Passa fra Desktop, Tablet e le due viste Mobile senza cambiare valori. Il titolo deve restare 32px. Nella dimostrazione anche il padding della scheda selezionata resta 32px: cambia la vista, non la regola.
La base condivisa
Replica didattica. Nessun avvio automatico. Valori e origini sono disponibili anche come testo sotto il canvas.
Apri separatamenteLeggi i nomi e le larghezze
Tieni questa mappa come riferimento: non serve imparare le soglie a memoria. Il valore in pixel indica la larghezza della vista della pagina, non il modello del dispositivo.
| Nome ufficiale | Intervallo della regola |
|---|---|
| Desktop, base | Base comune a tutte le larghezze, salvo altre regole applicabili |
| Tablet | Fino a 991px |
| Mobile landscape | Fino a 767px |
| Mobile portrait | Fino a 479px |
| Breakpoint grandi opzionali | Da 1280, 1440 e 1920px verso larghezze maggiori |
Gli intervalli delle regole si sovrappongono. Non sono quattro copie della pagina. Nell’interfaccia e nelle repliche puoi trovare le abbreviazioni Mobile (L) e Mobile per Mobile landscape e Mobile portrait. Prima di una previsione numerica, individua l’intervallo pertinente sulla mappa. Riferimento ufficiale Webflow.
Introduci una differenza sugli schermi piccoli
Prima una previsione: quali viste cambieranno modificando su Tablet il padding della scheda e la dimensione del titolo?
Applica e confronta le modifiche su Tablet
Su Tablet seleziona lab-card e imposta padding 24px sui quattro lati. Seleziona lab-title e imposta font size 28px. Confronta Desktop, Mobile (L) e Mobile. Desktop conserva i valori della base; le viste più piccole usano le differenze di Tablet.
Differenze su Tablet
Replica didattica. Nessun avvio automatico. Valori e origini sono disponibili anche come testo sotto il canvas.
Apri separatamenteUna seconda previsione: su quali viste avrà effetto una modifica alla dimensione del titolo fatta su Mobile, a 479px e meno?
Modifica Mobile e confronta il risultato
Su Mobile imposta soltanto font size di lab-title a 24px. Lascia Mobile (L) senza un ulteriore override. Nell’ordine Desktop / Tablet / Mobile (L) / Mobile, i titoli sono 32 /28 /28 /24px; il padding della scheda è 32 /24 /24 /24px. L’override del titolo su Mobile non modifica Mobile (L).
Differenze su Mobile portrait
Replica didattica. Nessun avvio automatico. Valori e origini sono disponibili anche come testo sotto il canvas.
Apri separatamenteScopri perché una proprietà non segue più la base
Prima una previsione: se ora porti il titolo della base da 32px a 36px, quali viste seguiranno la modifica? Se una resta diversa, dove cercheresti la causa?
Trova l’origine del valore e guarda come usare Reset
Su Desktop imposta font size di lab-title a 36px. Tablet e Mobile (L) restano 28px; Mobile resta 24px. Leggi l’origine della dimensione del titolo su Tablet: una dichiarazione locale prevale sulla base. Non è l’intero elemento ad aver smesso di ereditare.
Fai clic sull’indicatore dello stile applicato alla proprietà e scegli Reset. Dove disponibile puoi anche usare Option-clic su Mac o Alt-clic su Windows. Leggi proprietà e origine, senza affidarti soltanto al colore. Rimuovi la dichiarazione di Tablet invece di digitare 36px. Tablet e Mobile (L) ereditano quindi 36px dalla base; Mobile conserva i propri 24px.
Per continuare l’esercizio, ripristina esplicitamente font size 28px su Tablet. Il padding non è stato modificato.
Origine del valore e Reset
Replica didattica. Nessun avvio automatico. Valori e origini sono disponibili anche come testo sotto il canvas.
Apri separatamenteIncludi gli schermi grandi
Usa solo il progetto di prova: i breakpoint grandi non possono essere rimossi dopo l’aggiunta. Se 1280px non è presente, aggiungilo dal menu dei breakpoint grandi. Per questo esercizio non occorre aggiungere 1440px o 1920px. Nella dimostrazione, 1280px è già predisposto: l’animazione mostra il menu e gli stili successivi, non l’operazione di aggiunta.
Prima una previsione: su quali larghezze avrà effetto una dimensione del titolo impostata a 1280px?
Imposta e confronta lo stile per gli schermi grandi
A 1280px imposta font size di lab-title a 40px. La base resta 36px, i valori piccoli restano 28 /28 /24px. La regola del breakpoint grande vale verso l’alto, salvo una regola più specifica per un ulteriore breakpoint grande.
Parti dalla base per gli stili condivisi, poi procedi verso l’esterno introducendo solo le differenze necessarie. Questo spiega l’ordine di lavoro: non devi riscrivere ogni proprietà a ogni breakpoint.
Schermi grandi
Replica didattica. Nessun avvio automatico. Valori e origini sono disponibili anche come testo sotto il canvas.
Apri separatamenteVerifica larghezze e contenuto condiviso
Ridimensiona attraverso soglie e larghezze intermedie, fino a 320px. Controlla leggibilità, elementi tagliati e scorrimento orizzontale. Per l’esercizio confronta i passaggi 991/992, 767/768, 479/480 e 1279/1280px, oltre a una larghezza intermedia come 900 o 600px. I nomi dei dispositivi identificano intervalli di viewport: non garantiscono il risultato su ogni dispositivo fisico.
Prima una previsione: se cambi il testo del titolo mentre guardi Mobile, dove comparirà il nuovo testo?
Guarda come il contenuto resta condiviso fra le viste
Cambia temporaneamente il titolo in Webflow Lab di sabato. Confronta Mobile (L), Tablet, Desktop e 1280px, poi ripristina Webflow Lab. Il testo appartiene alla pagina; i breakpoint non sono copie separate. Anche spostare un elemento nel Navigator modifica la struttura condivisa. Cambiare il layout CSS è un’operazione diversa dallo spostare un elemento nel DOM.
La dimostrazione usa un solo canvas, con ridimensionamento e cambi di breakpoint. Nel Designer reale Expand canvas può mostrare viste affiancate ed è diverso da Preview. Quel controllo non viene mostrato nella dimostrazione.
Larghezze e contenuto condiviso
Replica didattica. Nessun avvio automatico. Valori e origini sono disponibili anche come testo sotto il canvas.
Apri separatamenteApplica il principio a un nuovo caso
La scheda ora presenta un workshop serale. Deve avere 20px di spazio interno soltanto a 479px e meno, conservando gli attuali valori Desktop e Tablet.
Prima di modificare, spiega dove interverresti e quali viste prevedi che cambieranno. Poi realizza il piano, verifica le viste pertinenti e spiega perché le altre non sono cambiate. Infine spiega come torneresti allo spazio ereditato senza ricopiare un numero. Distingui previsione, modifica eseguita e risultato verificato; annota gli aiuti ricevuti.
Il Reset finale del padding è una prova aggiuntiva facoltativa: puoi lasciare i 20px richiesti dal workshop. Una volta completati piano, previsione, esecuzione e spiegazione, la lezione è conclusa; non serve annullare il risultato per terminarla.
Fonti e riferimenti
- Tutorial originale e capitolo della lezione sulla responsività.
- Breakpoint Webflow, Style panel e canvas.
L’esercizio combina queste fonti con un progetto di prova verificato separatamente dall’autore. Le repliche usano controlli osservati a ottobre 2026; l’interfaccia dei video precedenti può differire. Questo non prova l’accesso al tuo progetto né, da solo, l’apprendimento.
Hai concluso
Dopo la prova finale, sai scegliere dove impostare uno stile e controllare quali viste lo seguono. Distingui ciò che hai verificato nella pratica dagli aiuti che hai usato. Se le classi condivise restano poco chiare, puoi proseguire con la lezione sulle classi; altrimenti prova il principio su una nuova scheda. È un seguito facoltativo.