EN IT
Home About Learn Blog
Beginner

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.

6 lessons

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.

In this course

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.