Part of 100+ video lessons
Short, step-by-step lessons you can rewatch anytime.
Hands-on project
Follow along in the host project and build as you learn.
Certificate path
Counts toward your Framer Fundamentals certificate.
Add a fixed overlay to a button, design inside it, then wire up a close button.
Select the button or component and add a fixed overlay. It fills the viewport.
Overlays have no layout control, so position elements absolutely and centre them.
Choose click or hover to open, pick a fade preset, and wire a close button to dismiss it.
BUILD MODALS AND VIDEO POPUPS
Use a fixed overlay to open content over the whole page.
CONTROL HOW THEY OPEN AND CLOSE
Set the trigger, the fade in and out, and a close button that dismisses it.
BUILD NAVBAR DROPDOWNS
Relative overlays sit under the link they belong to and open on hover.
Forms in Framer
Build a form visually, give every field a unique name, and send submissions to email, a Google Sheet or a webhook. No code needed.
Lightbox Effects in Framer
Make any image or CMS gallery open in its own modal with one native effect. No components, no overlays, no workarounds.
CURRICULUM
WHAT YOU’LL LEARN IN THIS COURSE
In the Ultimate Framer Masterclass, you’ll master Framer from the ground up. Follow real projects, get expert feedback, and finally design and ship the way you’ve always wanted to.
Add a video popup to a button, then build a hover dropdown on a navbar link.
06:54
PUBLISH CHECKLIST
Fixed overlay added to a trigger
Content centred inside
Open trigger set
Fade preset chosen
Close button wired up
Dropdown tested on hover
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
FREQUENTLY ASKED QUESTIONS
Everything you need to know about this lesson.
How do I build a popup modal in Framer?
Select the trigger button and add a fixed overlay, which fills the viewport. Position your content absolutely inside it, then wire a close button to dismiss it.
What's the difference between a fixed and relative overlay in Framer?
A fixed overlay covers the whole viewport, which suits modals and video popups. A relative overlay attaches to an element, which suits dropdowns and popovers.
Why can't I use layout inside a Framer overlay?
Overlays have no layout control, so elements need to be positioned absolutely and centred by hand rather than arranged with a stack.
CERTIFICATION
BECOME A CERTIFIED FRAMER MASTER
Earn 3 official certifications that show you don’t just know Framer, but you can
design, build, and execute real pixel-perfect sites.
Rated excellent by 900+ students
4.8
Lifetime access
14-day money-back guarantee
Stream anywhere
