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.
Wireframe the card, connect the fields, then set the source and order.
Design the card
Build it as a wireframe first: image, title, tag, description.
Connect each field
Tie every element to a CMS field so the content flows in.
Set source and sorting
Choose the collection, the order, and how many items show.
SHOW CMS ITEMS ON A PAGE
Turn a collection into a grid or list that updates itself.
CONNECT THE DESIGN TO THE DATA
Every element on the card points at a field.
SORT AND SWAP THE SOURCE
Reuse one design for another collection, and control the order.
CMS Detail Pages in Framer
One page template that renders every item in a collection, with referenced fields and links from your list.
Dynamic Filters in Framer
Let visitors filter a CMS collection themselves. Stack filters together, and share the result as a URL.
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.
Design one card for a collection, connect every field, then sort the list by title and limit it to six items.
12:23
PUBLISH CHECKLIST
Card designed as a wireframe
Fields connected
Source set
Sorting set
Item limit checked
Responsive on mobile
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
