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.
Follow the lesson flow: draw and style the section, add the content, then lock in the layout so it responds to the screen.
Press F to draw a frame, set the width to 100% and the height to auto, then add a grey background style.
Type the heading and paragraph, draw a button frame with white text and an arrow icon, then paste in the image asset.
Wrap the text and button in a stack, set it to horizontal with space-between, and add outer padding so nothing touches the edge.
Build a section from scratch
Draw frames, apply fills and text styles, and understand how a hero is put together.
Control layout with stacks
Use direction, distribution, alignment and padding to align content without guesswork.
Layer images with absolute positioning
Pin an image, manage z-index and add a gradient so the hero responds nicely at any width.
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 a blank Framer project and rebuild the hero from the lesson: a 100% width section, a heading, a paragraph, a button with an arrow icon, and one image positioned absolutely behind the content. Preview it and resize the window to check that the bottom row stays aligned.
11:26
PUBLISH CHECKLIST
Section is full width
Container used
Text and buttons added
Text styles applied
Responsive on tablet and phone
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 build a hero section in Framer?
Draw a frame at 100% width and auto height, add your heading, paragraph and button, then turn the section into a stack with space-between and outer padding.
How do I stop a hero image overflowing its section in Framer?
Wrap the text and the image in a heading container and fix the overflow on the parent frame. Absolute positioning plus z-index then layers the image cleanly.
What layout settings keep a hero responsive in Framer?
Use a stack with direction, distribution, alignment and padding instead of positioning by eye, and set width to 100% with height auto so the section responds at any width.
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
