Tutte le lezioni
Tutte le lezioni del sito in un unico elenco, dalla più recente. Filtra per livello o argomento — oppure usa la ricerca del browser e vai dritto a quella che ti serve.
73 lezioni
Nessuna lezione corrisponde a entrambi i filtri.
-
Effetto lente di vetro sui video in Webflow
Trasforma il cursore in una lente di vetro sopra un video hero in Webflow — un effetto di distorsione cromatica su GPU che configuri con pochi attributi custom.
-
Animazione staggered allo scroll responsive in Webflow
Costruisci un'animazione staggered allo scroll responsive in Webflow: le card entrano in dissolvenza riga per riga, con lo stagger che si adatta al numero di colonne a ogni breakpoint.
-
Galleria cubo 3D da CMS allo scroll in Webflow
Costruisci una galleria cubo 3D guidata dallo scroll in Webflow dai dati CMS — immagini in dissolvenza, split text e un cubo che ruota nello spazio con transform 3D e GSAP.
-
Bordo che cresce in hover in Webflow (CSS + GSAP)
Costruisci un bordo circolare che cresce in hover in Webflow con un conic-gradient e una @property animabile; GSAP fa solo il toggle di una classe mentre il CSS anima.
-
Animazione grow & scatter da CMS in Webflow
Costruisci una gallery grow-and-scatter da CMS in Webflow: le immagini partono dal centro a stagger e poi si dispongono in una griglia responsive, con una variabile, CSS e GSAP.
-
Sidebar CMS accessibile in Webflow (scroll lock + focus trap)
Costruisci una sidebar guidata dal CMS in Webflow con GSAP — contenuto per card, slide-in, scroll lock, chiusura al click esterno e un vero focus trap per la tastiera.
-
Un sistema di marquee infinite riutilizzabile in Webflow
Costruisci una marquee a loop infinito in Webflow con GSAP che va in qualsiasi direzione ed è riutilizzabile su tutto il sito con un singolo attributo — senza ricostruzioni.
-
Ancora un video allo scroll in Webflow (Picture-in-Picture)
Costruisci un video picture-in-picture che si ancora nell'angolo allo scroll in Webflow, con scroll trigger GSAP, sticky positioning e una singola variabile animata.
-
Lightbox Webflow con loop infinito (galleria accessibile)
Potenzia la lightbox nativa di Webflow con la navigazione a loop infinito usando un solo attributo custom — funziona con galleria CMS o statica, su mobile, e resta pienamente accessibile.
-
Un hover da avanzato in Webflow (solo CSS)
Costruisci un'interazione hover per card in Webflow — bordo più scuro, immagine che scala, sibling desaturate — senza Interactions, solo hover state, variabili e un po' di CSS.
-
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.
-
Vero cookie consent in Webflow (Consent Pro)
Costruisci un sistema di cookie consent in Webflow che blocca davvero i tracker prima del consenso — analizza il sito, poi configura Finsweet Consent Pro con banner opt-in/opt-out.
-
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.
-
Popup GSAP accessibile in Webflow (con scroll lock)
Costruisci un popup modale accessibile in Webflow con GSAP — ruoli ARIA corretti, una timeline apri/chiudi reversibile, chiusura al click esterno e scroll lock mobile-safe.
-
Toggle light/dark persistente in Webflow (GSAP)
Costruisci un toggle light/dark persistente in Webflow con variable modes, un class toggle GSAP, transizioni di colore fluide e localStorage che sopravvive ai reload.
-
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.
-
Rendere un sito Webflow pienamente responsive: i breakpoint
Rendi un sito Webflow pienamente responsive su tablet, landscape e portrait — padroneggiando il principio della cascata, i breakpoint, la navigazione mobile e qualche trucco Flexbox.
-
Webflow Crash Course 2026: dove andare adesso
Chiudiamo il crash course di Webflow con la lezione che resta — è questione di struttura e sistemi, non di trucchi visivi — e una mappa di dove portare le tue skill.
-
Navbar e footer in Webflow: nav sticky, grid + Flexbox
Imposta una navbar sticky in Webflow con anchor link fluidi, poi costruisci un footer da un layout di default dove griglia e Flexbox lavorano insieme su un layout bidimensionale.
-
Componenti guidati dal CMS e dropdown animati in Webflow
Collega le proprietà dei componenti al CMS in Webflow e costruisci un FAQ accessibile con animazioni fluide di apertura e chiusura, dai campi rich text al pannello interazioni.
-
Varianti dei componenti e la tua prima collection CMS
Impara le varianti dei componenti in Webflow per cambiare layout via stile, poi costruisci la tua prima collection CMS e disponila con una griglia — la base di una sezione team dinamica.
-
Componenti Webflow: una sezione features riutilizzabile
Costruisci una sezione features in Webflow imparando componenti e proprietà — blocchi riutilizzabili che configuri per istanza — più il trucco Flexbox per colonne uguali.
-
Layout della hero in Webflow: sezioni, div e Flexbox
Poni le fondamenta di una sezione hero in Webflow con sezioni, container, div block, classi e Flexbox — la struttura riutilizzabile da cui parte quasi ogni layout.
-
Stile della hero in Webflow: tag HTML e tipografia fluida
Dai stile a una hero in Webflow nel modo intelligente: tag HTML per i default di tutto il sito, combo class e font-size fluido con clamp() che scala con il viewport.
-
Webflow Crash Course 2026: come funziona il corso
Diamo il via a un crash course pratico su Webflow: costruirai una vera landing page SaaS da zero e imparerai i fondamenti mettendoli subito in pratica.
-
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.
-
Slider 3D con CMS in Webflow (nativo + Finsweet)
Costruisci uno slider 3D premium in Webflow con lo Slider nativo, un riflesso CSS, un'interazione Slider Change, poi rendilo dinamico dal CMS con Finsweet.
-
Micro-interazioni hover intelligenti in Webflow (GSAP + CSS)
Progetta cinque micro-interazioni hover sui pulsanti in Webflow e impara quando usare GSAP, quando basta il CSS puro e come combinarli in modo pulito.
-
Repeat, Runs On e Conditional Playback in Webflow
Padroneggia gli interaction settings GSAP in Webflow — repeat di interazione vs action, runs on e conditional playback — per loop performanti che rispettano il reduced motion.
-
Hover intelligenti e state machine in Webflow
Costruisci animazioni hover su una sola timeline GSAP con play e reverse, poi una state machine che cambia colore con jump to — tutto in Webflow, senza interazioni duplicate.
-
Controlla le interazioni GSAP in Webflow (Speed & Jump To)
Usa gli event settings GSAP in Webflow — control, speed e jump to — per mettere in pausa, riprendere, congelare e alternare animazioni da trigger diversi, senza duplicare la timeline.
-
Elimina il flicker al page-load GSAP in Webflow
Elimina il flash of unstyled content prima di un'animazione GSAP al caricamento in Webflow con un pattern riutilizzabile CSS + attributo, sicuro anche senza JavaScript.
-
Padroneggia le interazioni GSAP in Webflow per animazioni fluide
Ti aiuto a padroneggiare le interazioni GSAP in Webflow spiegando trigger, action e timeline, così puoi costruire animazioni di page-load fluide e senza intoppi.
-
Anima un poster in stile svizzero in Webflow con GSAP
Ricrea un poster modernista in stile svizzero in Webflow con una maschera clip-path costruita in Figma e una sequenza GSAP al caricamento fatta di reveal di testo in stagger e slide-mask.
-
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.
-
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.
-
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.
-
Rendere un mega menu Webflow pienamente responsive
Fai funzionare un mega menu Webflow su ogni schermo — riposiziona il nav menu, rendilo scrollabile, riduci le colonne con larghezze calc() e pulisci gli stati hover per il mobile.
-
Bottone di Vetro con Filtri SVG e GSAP in Webflow
Crea in Webflow un bottone di cristallo che rifrange la pagina dietro di sé con un filtro SVG e, all'hover, passa da vetro morbido a ghiaccio nitido con GSAP.
-
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.
-
Costruire un mega menu Webflow: struttura e accessibilità
Trasforma un dropdown Webflow semplice in un mega menu accessibile a tutta larghezza — un trucco di posizionamento per pannelli edge-to-edge, struttura a liste semantiche, colonne, banner e aria label.
-
Sfondo a gradiente fluido interattivo in Webflow
Aggiungi uno sfondo a gradiente fluido in Webflow con un attributo custom — niente codice — e regola colori, velocità e reattività al mouse in tempo reale.
-
Animazioni Split-Text con Stagger in Webflow (GSAP)
Fai comparire i titoli parola per parola o lettera per lettera in Webflow con il pannello GSAP nativo — stagger, origine From, Split Text, maschere ed easing.
-
Navbar Webflow responsive: unità dvh e blocco scroll
Trasforma una navbar desktop Webflow in un menu mobile pienamente responsive — risolvi il bug dell'altezza mobile con le unità dvh, domina il wrap del flex e blocca lo scroll a menu aperto.
-
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.
-
Costruire una navbar Webflow: struttura desktop e hover
Ricostruisci da zero la navbar desktop di Webflow — struttura Flexbox solida, nav accessibile, spacing fluido con clamp() e un underline all'hover che non sposta il layout.
-
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.
-
Ripple d'acqua interattivi su qualsiasi sezione Webflow
Aggiungi un effetto ripple d'acqua no-code e configurabile a qualsiasi sezione o galleria CMS in Webflow — basato su jQuery + WebGL con un pannello GUI live per il tuning in tempo reale.
-
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.
-
Indice Accessibile in Webflow, Senza Codice
Crea un indice dei contenuti responsive e accessibile in Webflow senza codice — link che si evidenziano da soli, gruppi comprimibili e un popup su mobile.
-
Crea card trascinabili in Webflow con GSAP (No Code)
Crea in Webflow uno stack di card trascinabili e lanciabili con GSAP — scagliale via, resetta il mazzo e collegale persino ai contenuti del CMS.
-
Image sequence in scroll stile Apple (Webflow + GSAP)
Ricrea l'animazione in scroll degli AirPods di Apple in Webflow: estrai i frame dal video, ospitali e guida la sequenza su un canvas con GSAP ScrollTrigger.
-
Effetto disintegrazione con GSAP in Webflow
Crea in Webflow un effetto disintegrazione allo scroll con pochi attributi GSAP — niente codice da modificare, funziona con i contenuti CMS e resta accessibile.
-
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.
-
Marquee infinito e trascinabile in Webflow (no code)
Crea un marquee infinito e trascinabile in Webflow senza codice — solo attributi per direzione, velocità per breakpoint, pausa fluida al passaggio del mouse, CMS e accessibilità.
-
Apri i dropdown di Webflow in automatico con gli attributi
Fai aprire i dropdown di Webflow da soli — al caricamento, allo scroll o al click su un link — con pochi attributi custom e zero JavaScript in più.
-
Animazioni while-scrolling da premio in Webflow (senza codice)
Ricrea una gallery scalante while-scrolling da premio in Webflow con interazioni native, trigger in posizione assoluta e un trucco con calc() — senza una riga di codice.
-
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.
-
Animazione hover con immagini impilate in Webflow
Ricrea in Webflow un'animazione hover premiata e guidata dal CMS, dove le immagini di anteprima compaiono, scalano e si impilano una sull'altra con pochissimo codice.
-
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.
-
Workspace plan e site plan di Webflow, spiegati
Capisci finalmente i workspace plan, i site plan, i seat e i client seat di Webflow — spiegati con una storia semplice così la documentazione ufficiale smette di confonderti.
-
Effetto glitch sul logo in hover in Webflow (no-code)
Sovrapponi tre livelli del logo, tinta due con filtri CSS e aggiungi un'interazione hover nativa con movimenti a scatti — effetto glitch in Webflow, senza codice.
-
Crea un'animazione 3D delle card allo scroll in Webflow
Crea un'animazione while-scrolling 3D delle card in Webflow senza codice, usando position sticky, la perspective sui figli e la timeline delle interazioni per dare profondità vera.
-
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.
-
Padroneggia le animazioni allo scroll in Webflow (no-code)
Crea quattro animazioni native allo scroll in Webflow — un logo, un modello 3D e del testo che si rimpiccioliscono e scivolano nella navbar, senza codice.
-
Animazioni staggered GSAP in Webflow senza codice
Aggiungi animazioni staggered di slide e fade a gallery, liste CMS e griglie in Webflow con GSAP — senza codice, solo pochi attributi per timing, easing e ordine.
-
Aggiungi YouTube al tuo popup video in Webflow
Aggiorna il tuo popup video custom in Webflow per riprodurre i video di YouTube: prendi il link embed giusto, abilita le JS API e ricolora l'icona play.
-
Animazioni Staggered Responsive in Webflow (Solo CSS)
Costruisci un reveal staggered slide-and-fade responsive in Webflow senza JavaScript, usando un attributo, la proprietà CSS transition-delay e media query con nth-child.
-
Grid gallery dinamica in Webflow (senza codice)
Costruisci una grid gallery guidata dal CMS in Webflow dove ogni immagine mantiene il suo vero rapporto d'aspetto, senza ritagli — imposta le colonne per breakpoint con qualche attributo.
-
Popup Video Custom in Webflow (No Code, Autoplay)
Crea un popup video custom in Webflow senza codice: autoplay all'apertura, pausa alla chiusura, scroll lock e binding CMS — tutto con attributi custom.
-
Blocca lo scroll in Webflow (una regola CSS)
Blocca lo scroll della pagina mentre il nav menu di Webflow è aperto con una sola regola CSS e :has() — niente JavaScript, niente librerie, niente interazioni.
-
Text Reveal Animations Scalabili in Webflow (Custom Element)
Crea text reveal animations riutilizzabili in Webflow con il Custom Element: una sola action, stagger per lettera via CSS inline e supporto multi-riga incluso.
-
Sincronizza i campi input in Webflow in tempo reale
Rispecchia un input Webflow in un altro in tempo reale con Mirror Input di Finsweet — anteprime live, saluti personalizzati e campi duplicati, senza codice.