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 LIGHTBOX IN THREE STEPS
Ryan applies the effect to three image cards, previews it, then adjusts the rules until it feels right.
Select the image
Pick any image frame on the canvas. An image is essentially just a frame.
Apply the effect
Go to Effects in the properties panel, add Lightbox, then preview and click the image.
Adjust the rules
Set max width, padding, z-index, backdrop colour and transition to suit your site.
02:25
Add lightboxes without components
Turn any image into a clickable, full-screen view using Framer's native effect.
02:25
Style the overlay to match your site
Control width, padding, backdrop colour and transition so the lightbox feels on brand.
02:25
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.
FUNDAMENTALS
Open the host project, add a lightbox to the three image cards and adjust the settings until the overlay feels right.
Learn the basics
PUBLISH CHECKLIST
Is the page responsive?
Do I use a container?
Using text & color styles?
Used components for reusable elements
Updated SEO
Published my site
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
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
