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.
Apply the effect to a CMS gallery, preview it, then adjust the rules until it feels right.
Pick any image frame, or the gallery field inside a CMS collection.
Go to Effects in the properties panel, add Lightbox, then preview and click the image.
Set max width, padding, z-index, backdrop colour and transition to suit your site.
Add lightboxes without components
Turn a CMS gallery or a single image into a clickable, full-screen view.
Style the overlay to match your site
Control width, padding, backdrop colour and transition so the lightbox feels on brand.
Make your images more functional
Give visitors a closer look at your work, from single images to CMS galleries.
Layout in Framer
Framer's layout system works like auto layout in Figma or Flexbox in Webflow. Learn how stacks and grids bring alignment and order to your elements.
Overflow in Framer
Overflow decides what happens when content is bigger than the frame it lives in. Learn the four overflow types and when to use each one.
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.
Open the host project, add a lightbox to the three image cards and adjust the settings until the overlay feels right.
03:07
PUBLISH CHECKLIST
Lightbox added to an image
Max width and padding set
Backdrop colour chosen
Transition feels smooth
Copied to the other images
Checked in preview
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
FREQUENTLY ASKED QUESTIONS
Everything you need to know about this lesson.
How do I add a lightbox in Framer?
Select an image frame or the gallery field inside a CMS collection, go to Effects in the properties panel and add Lightbox. It opens in its own modal in a couple of clicks.
Do I need a component or plugin for a lightbox in Framer?
No. Framer ships the lightbox as an effect, so the old approach of components, overlays and manual setup is no longer needed.
Can I style the Framer lightbox overlay?
Yes. Set max width, padding, z-index, backdrop colour and transition so the lightbox matches the rest of your site.
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
