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.
15 lezioni
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.
In questo corso
- Padroneggia le classi in Webflow: combo, global e oltre Capisci come funzionano davvero le classi in Webflow — rinominare, duplicare, combo class, global class e come Webflow riscrive i nomi delle classi in pubblicazione.
- 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: pattern di layout in Webflow Costruisci tre pattern di layout Flexbox riutilizzabili in Webflow — colonne uguali, un layout grid-ish fluido e content + sidebar — e capisci perché ognuno funziona.
- 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.