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.
Insert the component, set its scope, then make it look like yours.
Insert the search component
Drag it in from the insert menu. No code needed.
Set the scope
Point it at the CMS collection page you want it to search.
Style it your way
Build your own bar, then layer the component over it at full size to keep the behaviour.
ADD SEARCH TO A CMS COLLECTION
Let visitors search your articles, lessons or products.
SCOPE IT TO THE RIGHT CONTENT
Search one collection instead of the whole site.
DESIGN A CUSTOM SEARCH BAR
Get around the styling limits by layering the component invisibly over your own design.
Dynamic Filters in Framer
Let visitors filter a CMS collection themselves. Stack filters together, and share the result as a URL.
Collection Lists in Framer
A collection list is how CMS items get onto a page. Design one card, connect the fields, and the rest follow.
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 search to a CMS page, scope it to that collection, then design your own bar and layer the component over it.
06:17
PUBLISH CHECKLIST
Search component added
Scope set to a collection
Placeholder text written
Custom bar designed
Component layered over it
Tested 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
