Decidere quando gli elementi devono condividere una classe e quando serve uno stile indipendente.
Rename e Duplicate class
Spiegare la differenza fra Rename e Duplicate class.
Combo class
Usare una combo class per una variazione e individuare quali elementi saranno interessati da una modifica.
Un nuovo esempio
Applicare queste scelte a un nuovo esempio da costruire e spiegare.
Prima di cominciare
Cosa sai già
Saper aggiungere e selezionare un Box e un Paragraph nel Designer Webflow.
La pagina di esercizio
Avere una pagina Webflow di esercizio modificabile. Comincia da una pagina vuota.
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 le classi Webflow con il tuo assistente AI
Costruisci piccoli esempi in Webflow, prevedi quali elementi cambieranno e fai domande quando ne hai bisogno. Il tuo assistente ti guida nell’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.
Ti servono un account Webflow, un progetto vuoto per esercitarti e un assistente che accetti file o testo incollato. Devi saper aggiungere e selezionare un Box e un Paragraph nel Designer.
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. Strumenti e permessi del tuo assistente determinano cosa può osservare; potrebbe chiederti dei riscontri. Non serve pubblicare il progetto Webflow.
Una classe condivisa collega gli stili di più elementi, senza condividerne il contenuto.
Rename cambia il nome della classe condivisa; Duplicate class crea una classe indipendente.
Una modifica nel contesto combinato riguarda gli elementi che corrispondono alla combinazione, non soltanto quello selezionato.
Una utility è una normale classe usata per uno scopo riutilizzabile. Il prefisso u- è una convenzione, non una funzione di Webflow.
Un riferimento rapido
Il percorso guidato ti aiuta a decidere quali elementi devono condividere uno stile e quando serve una variazione indipendente. Costruisci gli esempi sulla tua pagina Webflow di esercizio, prevedi cosa cambierà e spieghi il risultato.
Stile condiviso, testo separato
Una classe è un insieme riutilizzabile di regole di stile. Due elementi Paragraph, cioè paragrafi, possono condividere una classe e quindi lo sfondo, conservando parole diverse. Cambiare lo sfondo della classe può aggiornare entrambi; modificare il testo di un elemento non cambia quello dell’altro.
Rename o Duplicate class
Rename rinomina la classe condivisa: non separa gli stili degli elementi. Duplicate class crea una classe indipendente con una copia degli stili. È utile quando il nuovo elemento non deve seguire le modifiche successive alla classe originale. Duplicare una classe è diverso da duplicare un elemento.
Classe base e combo class
Una combo class aggiunge una variazione a una classe base. La base continua a contribuire agli stili; la combinazione può sostituire il valore di una singola proprietà. Nello Style panel, il pannello degli stili, controlla quale classe o combinazione stai modificando. Una modifica nel contesto combinato riguarda tutti gli elementi che lo usano, non soltanto quello selezionato.
Utility e contesto corrente
Una utility è una normale classe riutilizzata per uno scopo preciso, come una spaziatura o un allineamento. Un prefisso nel nome è una convenzione, non un comando speciale di Webflow. Applicare una classe a un elemento e modificare uno stile con una combinazione selezionata sono azioni diverse. Controlla il contesto corrente prima di modificare un valore che vuoi condividere.
Il tutorial termina con un nuovo esempio da pianificare, costruire e spiegare. I nomi CSS nel risultato pubblicato e il border radius, che regola l’arrotondamento degli angoli, restano approfondimenti facoltativi. Il video ha esempi propri e capitoli nella sezione Risorse qui sotto.
No. Una classe condivide regole di stile. Il testo di ciascun elemento separato resta un contenuto proprio.
Duplicate class crea un altro elemento?
No. Crea una classe indipendente con una copia degli stili. Duplicare un elemento è un’operazione diversa.
Serve il progetto clonabile?
No. Il tutor ti aiuta a costruire l’esercizio sulla tua pagina di prova. Il progetto del video è una risorsa facoltativa per il percorso separato del video.
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