Editors’ pick · this week
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 · CMS DIRECTORY223 curated
Every good Framer tutorial, in one place.
A small, hand-picked directory. We read everything that gets submitted, keep what holds up in real projects, and group it so you can find what you need without scrolling through a hundred tabs.
223Curated resources
219Free to read
8Topics
7New this week
Featured
Learn Framer CMS in 7 Minutes
Fast community walkthrough that builds a dynamic portfolio: collections, fields, detail pages, conditional visibility, and lists.
Featured
Framer URL structure explained
BRIX deep dive into static vs CMS URLs, slug rules, static segments, redirects, and hierarchy limits.
ArticleBeginnerFREE
How to add content to your CMS with Framer Agents
Official Help Center guide to using Framer Agents to create collections, populate items, import CSVs, and connect the result to pages without leaving the canvas.
framer.com/help·8 min
ArticleBeginnerFREE
Framer CMS Tutorial: Collections, Fields and Dynamic Pages
Clear written workflow from empty project to working CMS — fields, detail templates, and collection lists in about thirty minutes.
diversekit.com·12 min
VideoBeginnerFREE
Framer Tutorial: For Beginners (New 2026)
A 27-minute 2026 beginner tutorial focused on the new Framer UI, AI-assisted page building, and responsive fundamentals.
youtube.com/@theryanhayward·27 min
ArticleBeginnerFREE
Framer vs Webflow (2026): Which One We Pick for Real Client Sites
TechVinta compares Framer and Webflow across design fidelity, CMS depth, e-commerce, build speed, SEO surface area, and ongoing edits, with real client examples and a decision table.
techvinta.com·9 min
ArticleBeginnerFREE
How to Build a Website in Framer (2026): Step-by-Step Guide
A complete beginner-friendly guide to building a fast, responsive Framer site from scratch, covering setup, design, CMS, animations, forms, SEO, and publishing.
shaheermalik.com·14 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
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
ArticleBeginnerFREE
Unlocking the Power of Framer CMS Collections
noel.marketing's glossary-style guide to Framer CMS collections: what they are, how fields and items work, and why a well-planned collection structure makes dynamic content manageable.
noel.marketing·3 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
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
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
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
ArticleBeginnerFREE
Using pages
Official Help Center guide to creating and managing web pages, CMS pages, and design pages in Framer, including page options and URL handling.
framer.com/help·5 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
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
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
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
ArticleBeginnerFREE
How to style links for a CMS detail page
Official styling guidance for links inside CMS detail pages so body copy stays consistent and readable.
framer.com/help·4 min
ArticleBeginnerFREE
How to Customize a Framer Template: Beginner Walkthrough
A full customization checklist from importing a purchased template to publishing: assets, colors, fonts, images, responsive breakpoints, and a final pre-launch SEO pass.
diversekit.com·10 min
ArticleBeginnerFREE
Framer CMS Tutorial: Build a Blog or Portfolio
Step-by-step 2026 article for shipping a blog or portfolio: collections, fields, detail pages, lists, filters, and CMS SEO basics.
shaheermalik.com·18 min
ArticleBeginnerFREE
The Ultimate Guide for Mastering Framer Components
A written guide to Framer components, covering variants, variables, hover/pressed states, inheritance, and interactivity between variants.
segmentui.com·15 min
CourseBeginnerFREE
LottieFiles for Framer Certification
A short beginner course on adding, customizing, and triggering Lottie animations inside Framer — and earning an official LottieFiles certification.
designchamps.io·27 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
ArticleBeginnerFREE
Limiting the number of visible CMS items
Help article on capping how many CMS items a list shows — featured rows, homepages, and teaser grids.
framer.com/help·3 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
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
ArticleAdvancedFREE
Development of a custom API layer for Framer CMS integration
A case-study walkthrough of building a Node.js middleware and PHP client that consume Framer CMS data, cache it, and distribute it securely to websites and mobile apps.
dev.to·4 min
VideoBeginnerFREE
Adding a Locale in Framer
Academy lesson on adding locales, AI translation, tone controls, and batch translating content.
framer.com/academy·5 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
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
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
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
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
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 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
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
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
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
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
VideoBeginnerFREE
The Ultimate Framer SEO/GEO Guide + Free Checklist
A fast, checklist-style guide to optimizing Framer sites for search and generative engine optimization, with actionable settings and tools.
youtube.com/@PaytonClarkSmith·4 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
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 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
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
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
ArticleAdvancedFREE
Advanced multi-criteria CMS search with code overrides
DEV Community guide to building multi-field marketplace filters over Framer CMS with custom code overrides.
dev.to·12 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
ArticleAdvancedFREE
Framer Developers: CMS
Official developers documentation for working with CMS concepts from the code side of Framer.
framer.com/developers·8 min