Webflow Quick Wins
Short, high-impact Webflow techniques you can add in minutes — hover underlines, masonry and grid layouts, scroll control, landscape testing, and more.
Not every improvement needs a whole afternoon. This course is a grab-bag of small, high-impact techniques — the kind you can add to a project in a few minutes and immediately feel the difference: smooth hover underlines, masonry and inner-border grid layouts, disabling scroll with one CSS rule, testing landscape viewports without leaving the Designer.
Each one is short, self-contained, and comes with a cloneable. Dip in for the one you need, or run through them all — either way you’ll walk away with a handful of moves you’ll reach for again and again.
Your route through the course
-
Disable Page Scrolling in Webflow (One CSS Rule)
Lock page scroll while the Webflow nav menu is open using a single CSS rule with :has() — no JavaScript, no libraries, no interactions.
-
Smooth Hover Underlines in Webflow (Box-Shadow)
Build smooth, growing hover underline effects in Webflow with box-shadow and CSS transitions — from bottom, top, left, right, to full-height fills, no code.
-
Build a No-Code Masonry Layout in Webflow
Create a Pinterest-style masonry layout in Webflow using pure CSS columns — no plugins, no JavaScript, fully responsive and ready for the CMS.
-
Inner Grid Borders in Webflow: Responsive & Accessible
Create clean inner borders between Webflow grid items using only gap and background color — fully responsive and accessible, even with CMS content.
-
Test Landscape Viewports in the Webflow Designer
Simulate a landscape (short) viewport right inside the Webflow Designer with one number variable and a calc() height — no publishing, no dev tools.
-
Nest CMS Categories Under /blog in Webflow
Use a little Webflow glitch to nest a CMS collection under an existing collection path — like /blog/categories/… — for a cleaner, more intentional content structure.