VideoIntermediateFREE
CMS collection references introduction
Relate authors to posts, projects to tags, and other joins with reference fields — the schema pattern that keeps collections clean.
framer.com/academy·4 min
Intermediate
Curated Framer CMS resources tagged intermediate.
102 resources99 free3 paid
Free resources
99
VideoIntermediateFREE
CMS pages & dynamic content
Design one detail template, bind CMS fields, and let Framer generate a unique page for every collection item.
framer.com/academy·9 min
ArticleIntermediateFREE
Framer CMS Variables: Dynamic Content Guide
How CMS variables bind fields to text, images, links, and visibility rules so one template adapts to every item.
noel.marketing·11 min
VideoIntermediateFREE
Utilizing collection lists in Framer
Official lesson on repeating indexes: insert a collection list, bind card fields, then sort, filter, limit, and paginate.
framer.com/academy·9 min
ArticleIntermediateFREE
How to add dynamic filters to CMS lists
Help Center guide to interactive filters — search, tabs, toggles, dropdowns, and checkboxes on published collection lists.
framer.com/help·8 min
VideoIntermediateFREE
On-page editing for CMS content
Let clients and editors update live CMS fields in the browser — the handoff pattern that keeps people out of the canvas.
framer.com/academy·5 min
ArticleIntermediateFREE
Google Sheets Sync for Framer CMS
Marketplace plugin by Reem Magdi that maps a public Google Sheet into a CMS collection — auto field detection, quick re-sync, free tier for small lists.
framer.com/marketplace·6 min
ArticleIntermediateFREE
CMS page titles, descriptions & social images
Bind {{Title}} and {{Description}} (and social images) so every CMS detail page gets unique metadata for search and sharing.
framer.com/help·7 min
ArticleIntermediateFREE
Framer CMS Deep Dive: Collections, Dynamic Pages, and Limits
Production-minded guide covering collections, relational patterns, on-page editing, and when Framer CMS hits its ceiling versus headless.
techvinta.com·14 min
ArticleIntermediateFREE
Comprehensive Guide for Framer CMS
FrameSpark guide covering setup, references, filters, sorting, and pagination for scalable Framer CMS sites.
framespark.io·15 min
ArticleIntermediateFREE
Using Markdown in the CMS
Official Help on pasting Markdown into rich text, copying CMS content as Markdown, and how links are normalized.
framer.com/help·5 min
ArticleIntermediateFREE
CMS References update
Product update introducing collection references so items can point at other collections for reusable, relational content.
framer.com/updates·4 min
ArticleIntermediateFREE
Style bold text color in CMS formatted text
Help article for controlling bold text color inside CMS formatted text via text styles or custom CSS.
framer.com/help·4 min
ArticleIntermediateFREE
Center images in a CMS formatted text field
Official method to center images that appear inside CMS formatted text using custom CSS.
framer.com/help·4 min
ArticleIntermediateFREE
Using images with unique aspect ratios in the CMS
Help guide for displaying CMS images at their natural aspect ratios instead of forcing one crop everywhere.
framer.com/help·5 min
ArticleIntermediateFREE
How to create flexible CMS detail pages
Official Help on conditionals (Is Set, option fields, toggles) so detail templates adapt to each item’s content.
framer.com/help·8 min
ArticleIntermediateFREE
Add video components to your CMS pages
Help article for YouTube/Vimeo/self-hosted video on detail pages, CMS URL fields, and hiding empty players.
framer.com/help·6 min
ArticleIntermediateFREE
Add another CMS collection to a CMS detail page
Official guide to placing additional collection lists on a detail page for related content and connected data.
framer.com/help·5 min
ArticleIntermediateFREE
Duplicate a CMS page and connect it to a different collection
Reuse an existing CMS detail design with another collection instead of rebuilding the template.
framer.com/help·4 min
ArticleIntermediateFREE
Empty States in CMS Lists
Product update on empty states so filtered or empty collection lists show a designed message instead of a blank hole.
framer.com/updates·3 min
ArticleIntermediateFREE
CMS Pagination update
Official update covering pagination for large CMS lists so indexes stay fast and crawlable.
framer.com/updates·3 min
ArticleIntermediateFREE
Dynamic Filters for CMS
Product announcement for Dynamic Filters — search, tabs, toggles, dropdowns, and checkboxes wired to page variables.
framer.com/updates·4 min
ArticleIntermediateFREE
Framer Dynamic Filters: The Complete Guide (2026)
Community deep guide to every dynamic filter type, setup steps, stacking filters, and URL query parameters.
allaboutframer.com·12 min
ArticleIntermediateFREE
Framer Notion Integration: A Complete Guide
Practical guide to syncing Notion databases into Framer CMS, mapping properties, and designing templates once.
framerwebsites.com·10 min
ArticleIntermediateFREE
Localization 2.0 update
Product update outlining the modern localization system that advanced Academy lessons build on.
framer.com/updates·4 min
ArticleIntermediateFREE
Notion plugin for Framer CMS
Official Marketplace plugin to sync Notion databases into Framer CMS collections.
framer.com/marketplace·5 min
ArticleIntermediateFREE
Airtable plugin for Framer CMS
Marketplace plugin to sync Airtable bases into Framer CMS for structured, spreadsheet-like content ops.
framer.com/marketplace·5 min
ArticleIntermediateFREE
FramerSync — Notion, Airtable & Sheets
Community Marketplace plugin to sync Notion, Airtable, and Google Sheets into Framer CMS collections.
framer.com/marketplace·6 min
ArticleIntermediateFREE
RSS plugin for Framer CMS
Marketplace plugin for bringing RSS feeds into Framer CMS workflows.
framer.com/marketplace·4 min
ArticleIntermediateFREE
WordPress plugin for Framer CMS
Marketplace plugin bridging WordPress content into Framer CMS for redesigns and hybrid stacks.
framer.com/marketplace·5 min
ArticleIntermediateFREE
Fixing uncrawlable overlay content
Help article explaining why links only inside overlays become orphan pages — and how to keep CMS routes discoverable.
framer.com/help·5 min
ArticleIntermediateFREE
Components introduction
Official developers intro to Framer components — foundation for overrides and CMS-aware code components.
framer.com/developers·10 min
VideoIntermediateFREE
Components (Academy)
Academy lesson on Framer components — the design-side counterpart to developer component docs.
framer.com/academy·8 min
ArticleIntermediateFREE
White Label Framer: How Agencies Scale Client Projects
Agency workflow article on white-label Framer delivery — relevant when CMS handoff and repeatable systems matter.
launchnow.design·9 min
ArticleIntermediateFREE
Supercharge Your Site with Framer CMS References
Community walkthrough of Reference and Multi-reference fields for authors, categories, speakers, and more.
allaboutframer.com·9 min
VideoIntermediateFREE
Framer Update: CMS Collection References
Official Framer YouTube update video introducing collection references and multi-references with a blog/author example.
youtube.com/@Framer·6 min
ArticleIntermediateFREE
Embed unique HTML on each Framer CMS page
BRIX guide to per-item embeds via CMS variables on Embed components or Page Custom Code.
brixtemplates.com·8 min
ArticleIntermediateFREE
Reusable CTA blocks inside Framer CMS blog posts
How to insert Canvas components into formatted CMS text, plus reference-based CTA libraries.
brixtemplates.com·9 min
TemplateIntermediateFREE
Directory templates with CMS
Marketplace directory templates built around filterable CMS listings.
framer.com/marketplace·4 min
TemplateIntermediateFREE
Ecommerce templates with CMS catalogs
Marketplace ecommerce templates that use CMS (or commerce plugins) for product-style listings.
framer.com/marketplace·4 min
TemplateIntermediateFREE
Real estate templates with CMS listings
Marketplace real-estate templates using CMS for property cards, filters, and detail pages.
framer.com/marketplace·4 min
ArticleIntermediateFREE
Ashby plugin — sync jobs into Framer CMS
Marketplace plugin that syncs Ashby job listings into CMS collections for branded careers pages.
framer.com/marketplace·5 min
ArticleIntermediateFREE
Lever plugin for Framer CMS
Marketplace Lever integration for syncing postings into Framer CMS careers experiences.
framer.com/marketplace·5 min
ArticleIntermediateFREE
Greenhouse plugin for Framer CMS
Marketplace plugin connecting Greenhouse jobs to Framer CMS collections.
framer.com/marketplace·5 min
ArticleIntermediateFREE
HubSpot plugin for Framer
Marketplace HubSpot integration relevant when marketing CRM content feeds Framer experiences.
framer.com/marketplace·5 min
ArticleIntermediateFREE
Shopify plugin for Framer
Marketplace Shopify connector for commerce-adjacent Framer storefronts and product storytelling.
framer.com/marketplace·5 min
ArticleIntermediateFREE
Airtable Sync plugin
Marketplace Airtable Sync listing for keeping bases mirrored into Framer CMS collections.
framer.com/marketplace·5 min
ArticleIntermediateFREE
Social share buttons for Framer CMS blog posts
BRIX guide to Open Graph per CMS item plus Code Overrides for share actions.
brixtemplates.com·10 min
ArticleIntermediateFREE
Baserow plugin for Framer CMS
Marketplace Baserow connector for open-source spreadsheet/database sync into Framer collections.
framer.com/marketplace·5 min
ArticleIntermediateFREE
Ghost plugin for Framer
Marketplace Ghost integration for publishing and newsletter stacks that still want Framer marketing pages.
framer.com/marketplace·5 min
ArticleIntermediateFREE
Coda plugin for Framer
Marketplace Coda connector for doc/database workflows syncing structured rows into Framer CMS.
framer.com/marketplace·5 min
ArticleIntermediateFREE
How I Finally Fixed My Broken CMS Links in Framer: A Complete Guide
A step-by-step walkthrough of diagnosing and repairing broken CMS detail-page links in Framer using a custom script, MutationObserver, and click interception.
medium.com/design-bootcamp·6 min
ArticleIntermediateFREE
POC: Deliver Country-Specific CMS Content with Minimal Code (and Zero Extra Locales)
A proof-of-concept for showing country-specific Framer CMS content within a single locale by combining collections, component variants, and lightweight code overrides.
medium.com/@jingjiechin·5 min
ArticleIntermediateFREE
How to Connect a Framer Front-End to a Bubble Database and Redirect to Bubble
A no-code/low-code tutorial that wires a Framer form to a Bubble backend via the Bubble Data API, then redirects the user based on the returned record.
medium.com/@ketanmk26·3 min
ArticleIntermediateFREE
First Code Component in Framer Web
Seth Corker's introduction to building code components in Framer Web, walking through a line item and bar chart for a mobile banking UI.
dev.to·8 min
VideoIntermediateFREE
Framer Update: Forms
Official Framer walkthrough for building fully functional, native forms with 10+ input types, custom styling, and email/Sheets/webhook connections.
youtube.com/@Framer·17 min
VideoIntermediateFREE
Learn Framer Scroll Animations in 13 Minutes
A concise Framer University tutorial on sticky positioning and scroll-section triggers that create polished scroll animations with no code.
youtube.com/@frameruniversity·13 min
VideoIntermediateFREE
How to Use Framer Better than 99% of People
A 33-minute walkthrough covering global styles, Framer AI, components, responsive design, CMS, animations, and a live boutique landing page build.
youtube.com/@Mikeywebsite·33 min
ArticleIntermediateFREE
The Complete Guide to Framer Website Design in 2026
A comprehensive agency walkthrough of what Framer is, why teams choose it, and how its visual editor, components, CMS, and interactions fit together for production sites.
framerwebsites.com·19 min
ArticleIntermediateFREE
Framer CMS: The Complete Guide for 2026
End-to-end guide to Framer CMS collections, field types, dynamic pages, filters, references, and dynamic SEO for blogs and marketing content.
framerwebsites.com·13 min
ArticleIntermediateFREE
Framer Components: A Complete Guide for 2026
Explains how Framer components, variants, and properties work like a real design system, plus when to use visual vs code components.
framerwebsites.com·11 min
ArticleIntermediateFREE
Framer Animations: The Complete Guide for 2026
Deep dive into Framer's variant-and-trigger animation model: appear effects, scroll animations, hover, page transitions, text, and component-level motion.
framerwebsites.com·20 min
ArticleIntermediateFREE
How to Add Custom Code in Framer: A Complete Guide
Covers all four custom-code paths in Framer — HTML embeds, CSS overrides, code components, and code overrides — with real examples and when to skip them.
framerwebsites.com·11 min
ArticleIntermediateFREE
Does Migrating to Framer Hurt Your SEO? (The Honest Answer)
Honest 2026 migration guide covering the six real SEO risks — redirects, metadata loss, Core Web Vitals, content gaps, URL structure, and sitemaps — with fixes.
allaboutframer.com·18 min
ArticleIntermediateFREE
Framer Components: How to Build a Design System
A practical walkthrough of Framer components, variants, properties, component libraries, and how they connect to design tokens and CMS content.
launchnow.design·11 min
ArticleIntermediateFREE
How to Add Custom Code to Your Framer Website
Covers when and how to add head and body scripts, HTML embeds, React code components, and code overrides in Framer without overcomplicating the project.
launchnow.design·9 min
ArticleIntermediateFREE
Framer Micro-Interactions That Actually Convert: A Designer's Guide
A design-focused look at micro-interactions in Framer—button hovers, card lifts, scroll animations, and form feedback—that guide users toward conversion.
launchnow.design·23 min
ArticleIntermediateFREE
Adding Markdown to Framer
Mikhail Karan builds a custom React Markdown code component and wires it to a Framer CMS plain-text field so blog posts can be authored in Markdown inside the CMS.
dev.to·5 min
ArticleIntermediateFREE
Stop Wasting Engineering Cycles on Landing Pages: The Framer Playbook for Startups
A founder-focused guide to keeping the core product in Next.js while offloading marketing pages to Framer, complete with next.config.js rewrites and the Framer Startup Program.
dev.to·5 min
ArticleIntermediateFREE
Build Full Web Apps & Auth Systems in Framer with Framergenie + Supabase + Supasync
Introduces the Framergenie plugin for auth, dashboards, and live forms, plus Supasync to sync Supabase tables directly into Framer CMS.
medium.com·2 min
ArticleIntermediateFREE
Crafting Interactive UI Components in Framer
Roberto Rodríguez builds a data-visualization component that mixes visual design with code overrides and Framer's useStore hook to manage state across tags and a line chart.
medium.com·4 min
ArticleIntermediateFREE
Framer Padding Hack: Update Spacing Across All Your Project in Seconds
Build a responsive spacer component or a window-width-aware code override to centralize padding across every breakpoint in a Framer project.
scriptingpixels.com·8 min
ArticleIntermediateFREE
Framer Custom Code Components: The Production Patterns That Actually Work
A 2026 engineering guide to choosing, sizing, and shipping Framer code components and overrides in production, including the March 2026 CMS change.
techvinta.com·12 min
ArticleIntermediateFREE
Framer Developers: Quick Start
Official first steps for building a Framer plugin from npm create framer-plugin to opening a development plugin inside the editor.
framer.dev·10 min
ArticleIntermediateFREE
How to retrieve a CMS value in a custom code component?
Use a Framer code override to read a CMS Number field and auto-refresh the page after a configurable number of seconds.
framerlabs.substack.com·6 min
ArticleIntermediateFREE
How to Add JSON-LD Schema to a Framer Site (2026 Guide)
Step-by-step guide for injecting JSON-LD structured data into Framer pages through Custom Code, plus how RankFrame automates the same.
rankframe.com·8 min
ArticleIntermediateFREE
How to Add a Redirect from Shopify Checkout to Framer
Send shoppers back to your Framer storefront from the Shopify checkout by editing theme.liquid and injecting a small redirect script.
insertframe.io·5 min
VideoIntermediateFREE
How I Set Up Framer CMS for a Real Client (Step-by-Step)
Megan Weeks walks through the exact collection structure and fields she uses for a real client build, including naming conventions and client-ready defaults.
youtube.com/@MeganWeeks·11 min
VideoIntermediateFREE
How to Build a Filterable Portfolio Grid in Framer (Step-by-Step)
Step-by-step build of a category-filtered portfolio grid using CMS collection lists and on-page filter controls.
youtube.com/@EdwardCreates·11 min
VideoIntermediateFREE
Dynamic Layouts for CMS Detail Pages in Framer
Build CMS detail page templates that change layout based on field values, including conditional blocks and responsive structure.
youtube.com/@Designwithbharath·17 min
VideoIntermediateFREE
Framer Ecommerce Build With Shopify | Tutorial with Frameship
David Alex builds a Shopify-powered store inside Framer with Frameship, covering product sync, custom fields, and integration limits.
youtube.com/@meetdavidalex·10 min
VideoIntermediateFREE
Create a Framer Plugin with Cursor AI
A focused walkthrough of building a Framer plugin with Cursor AI, from prompt to working plugin inside the Framer ecosystem.
youtube.com/@kostamotresku·8 min
ArticleIntermediateFREE
Framer CMS 3.0
Product update introducing the redesigned Framer CMS: inline table editing, multi-cell selection, bulk actions, folders, column customization, and a dedicated fields panel.
framer.com/updates·5 min
VideoIntermediateFREE
Building an Expanding Article Stack
Framer Academy tutorial that builds a collapsible article stack in a hero section, pulling live content from a CMS collection.
framer.com/academy·13 min
ArticleIntermediateFREE
Fetch for developers
Framer.dev guide to Fetch: adding dynamic API data to a Framer site without code on the canvas, plus best practices for backends and CORS.
framer.dev·10 min
VideoIntermediateFREE
CMS plugins
Framer Academy lesson on getting started with the CMS Starter Plugin, connecting a custom data source, and extending the plugin after the first sync.
framer.com/academy·5 min
ArticleIntermediateFREE
How to track custom events in Framer
Official Help Center guide to using the useTracking hook in a code override or code component to measure any interaction on a Framer site.
framer.com/help·7 min
ArticleIntermediateFREE
Best Framer Templates with Parallax Scrolling
Framebite rounds up parallax-ready Framer templates and explains how layered scroll motion works, with real site examples and tips for building cinematic pages without code.
framebite.com·9 min
ArticleIntermediateFREE
How to Connect Framer with Shopify: Full Setup Guide for E-commerce
Insert Frame's Frameship docs walk through connecting a Shopify store to Framer: sync products into a CMS collection, build product detail pages, add a cart, and publish.
insertframe.io·10 min
ArticleIntermediateFREE
10+ Useful Framer CMS Plugins in 2026
A curated roundup of Framer CMS plugins that extend collections with filtering, search, sync, stock images, and export capabilities.
framespark.io·13 min
ArticleIntermediateFREE
Framer SEO Checklist 2026: 27 Steps to Rank Your Site
A 27-step Framer SEO checklist from foundation to advanced: meta tags, schema, image SEO, Core Web Vitals, indexing, and keyword tracking.
rankframe.com·8 min
ArticleIntermediateFREE
How to Add Password Protection to Framer CMS Contents
A no-third-party guide that gates Framer CMS collection pages and individual item pages using a custom code component.
shamsdigital.medium.com·2 min
ArticleIntermediateFREE
Beyond the Canvas: Building a High-Impact Landing Page with Framer & SEO in Mind
A designer-developer case study on shipping a Framer landing page that balances spring-based animations with technical SEO and Core Web Vitals.
dev.to·6 min
ArticleIntermediateFREE
How to Build a Lead Qualification Form in Framer (with Slack Routing)
A step-by-step guide to qualifying leads in Framer and routing high-intent submissions to Slack or Discord via webhooks, with an optional Lead Form plugin.
dev.to·10 min
ArticleIntermediateFREE
How I Mastered Framer and Built Websites That Actually Work
A real-world breakdown of using Framer CMS for dynamic pages, custom components, MCP state sharing, and integrations with Shopify, Stripe, and Zapier.
medium.com·5 min
ArticleIntermediateFREE
CMS Components
Framer Community announcement introducing components inside CMS entries, enabling animated galleries, interactive embeds, and newsletter signups within formatted content.
framer.community·4 min
ArticleIntermediateFREE
CMS Studio
Framer Marketplace plugin by Evixel Studio that turns Framer CMS collections into a spreadsheet editor with inline editing, bulk fill, find/replace, CSV import/export, and content audits.
framer.com/marketplace·6 min
ArticleIntermediateFREE
Framer Commerce
Framer Marketplace plugin that connects Shopify stores to Framer, syncing products and metafields into the CMS and providing e-commerce components, filters, and checkout.
framer.com/marketplace·8 min
ArticleIntermediateFREE
GitHub Sync: CMS Plugin for Framer
A Framer Marketplace plugin that syncs Markdown files from a GitHub repository into a Framer CMS collection, preserving frontmatter and formatting.
framer.com/marketplace·5 min
Paid resources
3
CourseIntermediateCourse
Conditions & Transforms for CMS (Insert Frame)
Lesson on showing/hiding CMS content and transforming text with prefixes/suffixes from field values.
school.insertframe.io·4 min
CourseIntermediateCourse
Dynamic Filters (Insert Frame) — Airbnb-style listings
Ryan builds search, dropdowns, tabs, toggles, checkboxes, Clear Filters, and shareable URL params on a property listing.
school.insertframe.io·8 min
CourseIntermediateCourse
Adding Search to CMS content (Insert Frame)
Lesson on Framer’s search component scoped to CMS content with styling tricks for a custom bar.
school.insertframe.io·6 min
Other tags
Accessibility1Advanced23AI4Airtable3Animation7API1Article135Beginner98Blog12Bubble1Bulk Editing1Business1Checklist1Client Work1CMS23Code Components2Collections2Community26Comparison3Components12Conversion2Course12Dynamic Pages2E-commerce7Filtering9Forms2Framer Web1GEO1GitHub1Headless6i18n1Integration1Integrations12Jobs4Landing Page1Landing Pages2Layout1Localization5Lottie1Markdown2Marketplace1Navigation1No-Code5Notion2Official68Overrides12Performance2Plugin27Plugins1Portfolio10React4Responsive Design5Review3RSS1SaaS2Search2Security1SEO20Shopify3Slack1Startups1Students1Template12Templates2TypeScript5UX3Video45Webflow4Webhooks2WordPress2Workflow1