Breakpoint Webflow: scegli dove cambiano gli stili
Basewebflowresponsivebreakpoint
Impara a prevedere gli effetti dei breakpoint, diagnosticare gli override e controllare le larghezze con il tuo tutor AI. Costruisci e spiega una card responsive.
Prevedere quali larghezze saranno interessate da una modifica di stile.
Trova l’origine
Individuare nello Style panel da dove arriva il valore di una proprietà.
Usa Reset
Spiegare la differenza fra Reset e inserimento manuale dello stesso valore.
Verifica il risultato
Controllare una pagina responsive anche fra le larghezze predefinite e applicare il principio a una nuova richiesta di spaziatura.
Prima di cominciare
Cosa sai già
Saper aggiungere e selezionare elementi e assegnare una classe in Webflow.
La pagina di esercizio
Avere una pagina Webflow di esercizio modificabile. Comincia da una pagina vuota, anche nello stesso progetto di prova.
Gli strumenti
Un assistente AI che accetti il file della lezione o il testo completo. Per verificare il lavoro puoi usare il server MCP di Webflow, se collegato, un link Sandbox con un browser interattivo disponibile, oppure screenshot e impostazioni che descrivi. MCP è facoltativo; non serve pubblicare il progetto.
Tutorial AI · progetto pilota
Impara i breakpoint Webflow con il tuo assistente AI
Costruisci una card, prevedi quali larghezze saranno interessate da una modifica e controlla il risultato. Il tuo assistente guida l’esercizio nella tua lingua.
Le animazioni mostrano i controlli e i cambiamenti in una ricostruzione del Designer di Webflow. Si aprono in pagine separate e non modificano il tuo progetto.
Puoi parlare con il tutor nella tua lingua, anche se il file della lezione è scritto in inglese. Il testo di riferimento e le animazioni sono disponibili in italiano e inglese.
Per iniziare basta il file della lezione: caricalo nel tuo assistente AI. La versione ZIP contiene lo stesso file e le istruzioni per cominciare. In entrambi i casi il tutor può proporti i link alle animazioni online.
Carica il file della lezione in una nuova conversazione nel tuo assistente AI. Se non accetta allegati, incolla tutto il contenuto.
Scrivi «Cominciamo», o una breve frase nella tua lingua.
Comincia su una pagina di esercizio vuota. Il tutor ti aiuta a prepararla e a concordare come verificare il lavoro. Le modifiche le fai tu.
Servono una pagina Webflow di esercizio e un assistente che accetti un file o testo incollato. È utile saper aggiungere elementi e assegnare classi; il tutor può spiegare ciò che non conosci.
Come controlla il tutor il mio lavoro?
Concordate una modalità disponibile: Webflow MCP, un Sandbox link con un browser interattivo (anche ChatGPT Work, se disponibile), oppure screenshot e impostazioni che riferisci tu. Il tutor verifica l’accesso effettivo prima di basarsi su di esso. MCP è facoltativo.
Con Sandbox modifichi nel Designer originale, attendi il salvataggio e avvisi il tutor. Lui ricarica lo stesso Sandbox per leggere l’aggiornamento. Per condividere una tab usa il selettore del tuo assistente, se presente; altrimenti indica browser e URL. Il tutor conferma progetto e pagina.
Posso fermarmi e riprendere?
Chiedi un riepilogo dei progressi. In una nuova conversazione carica il file della lezione e quel riepilogo. L’accesso al progetto va verificato di nuovo: le conversazioni non si sincronizzano da sole.
Testo di riferimento e animazioni
Il tutor propone una breve animazione quando può aiutarti. Mostra dove si trova un controllo o come cambia un esempio in una ricostruzione del Designer. Puoi aprirla nel browser e poi tornare alla chat; guardarle tutte non è necessario.
Questo è un tutorial pilota. Gli strumenti disponibili determinano ciò che il tuo assistente può osservare. Puoi concordare anche screenshot o impostazioni riferite; non serve pubblicare il sito Webflow.
Desktop è il punto di partenza condiviso degli stili. Un’altra regola applicabile può sostituire il valore di una singola proprietà.
Gli stili impostati su Tablet valgono anche alle larghezze inferiori; quelli di un breakpoint grande valgono verso larghezze superiori.
Selezionare un breakpoint non crea un override. Un override è un valore impostato per quella proprietà in una regola di breakpoint più specifica.
Reset rimuove un valore locale e permette di usare di nuovo quello ereditato. Scrivere lo stesso numero mantiene invece un valore locale.
Modificare il testo di un titolo cambia il contenuto condiviso; una modifica di stile riguarda le larghezze a cui si applica la regola.
Un riferimento rapido
Un breakpoint è una regola per un intervallo di larghezze della pagina. La viewport è lo spazio disponibile per visualizzarla: il nome del dispositivo non indica un modello fisico preciso. Nell’esercizio lavori su una scheda e spieghi perché ogni modifica riguarda determinate larghezze.
La base Desktop e le larghezze inferiori
Desktop è il punto di partenza condiviso. Se il titolo è di 32px e nessun’altra regola applicabile ne sostituisce la dimensione, resta di 32px alle altre larghezze. Un valore impostato su Tablet vale anche su Mobile landscape e Mobile portrait, salvo una regola più stretta che sostituisca quella stessa proprietà.
Scopri da dove arriva un valore
Un override è un valore impostato in una regola di breakpoint che sostituisce quello ereditato. La sostituzione riguarda una proprietà, per esempio la dimensione del testo: non significa che tutto l’elemento abbia smesso di ereditare stili. Nello Style panel, il pannello degli stili, controlla l’etichetta o l’indicatore della proprietà per scoprirne l’origine. Non affidarti soltanto al colore.
Rimuovi un valore locale con Reset
Se il titolo è di 36px su Desktop e ha un valore proprio di 28px su Tablet, scrivere 36px su Tablet rende uguali i numeri ma conserva un valore locale. Reset rimuove il valore locale della dimensione del testo su Tablet, permettendo alla base di applicarsi di nuovo. Le altre proprietà e le regole più strette con valori propri restano distinte.
Controlla larghezze reali e contenuto condiviso
Ridimensiona la vista anche fra le larghezze predefinite. Cerca contenuti tagliati, scorrimento orizzontale inatteso e testo difficile da leggere. Il testo di un titolo è contenuto condiviso: cambiarne le parole mentre guardi Mobile non crea una versione di quelle parole solo per Mobile.
Il tutor conclude con una nuova richiesta di spaziatura da pianificare, realizzare e spiegare. Dal riquadro del tutor puoi aprire il riferimento scritto e le dimostrazioni contestuali quando ti serve un passaggio. Non occorre guardarle tutte per finire.
No. I breakpoint permettono di cambiare gli stili della stessa pagina per diverse larghezze della vista. Selezionare Tablet, da solo, non crea un override.
Cosa significa valore ereditato?
È un valore che arriva da un altro breakpoint applicabile. Nel contesto corrente non c’è un valore locale che lo sostituisca per quella proprietà.
Devo fare Reset del padding finale di 20px?
No. L’esercizio finale richiede 20px su Mobile portrait. Puoi conservare il risultato; fare davvero Reset è una prova aggiuntiva facoltativa, dopo aver spiegato come rimuoveresti il valore locale.
Aiutami a migliorare questi tutorial
Cosa ti è stato utile, o dove ti sei bloccato? Indica la lezione e l’assistente che hai usato. Evita informazioni private del progetto.
Il feedback viene trattato su questo sito tramite Cloudflare e inviato alla mia email. Uso la tua email per risponderti e non la uso per marketing. Vengono trattati anche dati tecnici della richiesta per consegnare il messaggio e limitare gli abusi. Informativa privacy