Padroneggiare Webflow nativo
Vai oltre le basi di Webflow nativo — come funzionano davvero le classi, il CSS positioning, i pattern di layout Flexbox, gli effetti hover fluidi e i trucchi di workflow da pro. Niente plugin.
La maggior parte dei trucchi “avanzati” di Webflow sono in realtà solo gli strumenti nativi usati bene. Questo corso parla di diventare davvero fluenti con ciò che Webflow ti dà già — niente plugin, niente librerie, solo una padronanza più profonda e sicura dei fondamenti su cui poggia tutto il resto.
Partiamo dal concetto da cui dipende ogni singolo stile — le classi, e cosa succede davvero quando le rinomini, duplichi o ci metti una combo — poi passiamo per il CSS positioning (da static a sticky), pattern di layout Flexbox riutilizzabili e underline all’hover fluidi costruiti con nient’altro che box-shadow. Lungo la strada raccogli anche mosse da workflow professionale: simulare un viewport landscape direttamente nel Designer e un trucco sulle cartelle CMS per un’architettura degli URL più pulita. Alla fine, Webflow nativo smette di sembrare limitante e inizia a sembrare un superpotere.
Il percorso del corso
-
Classi Webflow: condividere uno stile, creare una variazione
Impara a condividere gli stili, creare variazioni e capire quali elementi cambieranno, con esercizi Webflow guidati dal tuo assistente AI.
-
CSS Positioning in Webflow: tutto quello che serve
Padroneggia position in Webflow — static, relative, absolute, fixed e sticky — più come si comportano davvero offset, stacking e container di riferimento.
-
Flexbox in Webflow: tre pattern di layout
Costruisci tre layout in Webflow: colonne della stessa larghezza, card che vanno a capo e un testo con indice laterale. Il tutor AI ti guida negli esercizi.
-
Underline all'hover fluidi in Webflow (box-shadow)
Crea effetti underline all'hover fluidi e crescenti in Webflow con box-shadow e transizioni CSS — dal basso, alto, sinistra, destra, fino ai riempimenti a tutta altezza, no-code.
-
Testare viewport landscape nel Designer di Webflow
Simula un viewport landscape (basso) direttamente nel Designer di Webflow con una variabile number e un'altezza in calc() — niente pubblicazione, niente dev tools.
-
Annida le categorie CMS sotto /blog in Webflow
Usa un piccolo glitch di Webflow per annidare una collezione CMS sotto un percorso già esistente — come /blog/categories/… — per una struttura di contenuti più pulita e intenzionale.
-
Breadcrumb accessibili in Webflow (manuali + auto)
Costruisci due sistemi di breadcrumb accessibili e riutilizzabili in Webflow — uno manuale che configuri a mano e uno automatico che legge l'URL per te.
-
Layout Masonry in Webflow Senza Codice
Crea un layout masonry in stile Pinterest in Webflow con le CSS columns — niente plugin, niente JavaScript, tutto responsive e pronto per il CMS.
-
Layout Masonry Orizzontale in Webflow
Ricrea una galleria masonry orizzontale in Webflow, totalmente responsive e accessibile, usando solo Flexbox — senza codice — e poi collegala al CMS.
-
Bordi Interni alla Griglia in Webflow: Responsive e Accessibili
Crea bordi interni puliti tra gli elementi di una griglia in Webflow usando solo gap e background — responsive e accessibili, anche con il CMS.
-
Effetto Glow che Segue il Cursore in Webflow
Crea un bagliore che segue il cursore su una griglia di card in Webflow con variabili, interazioni native e poche righe di CSS — niente JavaScript.
-
Effetto Glow su Logo al Hover in Webflow (No Code)
Crea un effetto glow sul logo al passaggio del mouse in Webflow senza codice — con masking CSS, un blur backdrop-filter e trasformazioni move e scale a strati.
-
Effetto Neon Glow Parametrico in Webflow
Ricrea il neon glow retro di Webflow all'hover con un sistema parametrico basato su variabili CSS, color-mix() e variable modes intercambiabili — senza scegliere colori a mano.
-
Navbar Liquid Glass di Apple in Webflow (No Code)
Ricrea la navbar liquid glass di Apple in Webflow con div sovrapposti e un piccolo filtro SVG — senza librerie esterne e senza codice pesante, solo elementi nativi.
-
Effetto Spotlight in Webflow con Filtro Prisma GSAP
Crea uno spotlight che segue il cursore in Webflow con un overlay a gradiente radiale, poi aggiungi un filtro prisma SVG animato con GSAP per un glow premium.