Loading tutorials…
Loading tutorials…
The Framer CMS is fast once you understand it — but the canvas-first UX hides decisions that matter: slug strategy, reference fields, dynamic SEO meta. This walks the full setup for a blog (and the same pattern works for case studies, team, jobs).
Who this is forFramer site owners adding a content collection — usually a blog, case study library, team page, or job board. If you already published a site without a CMS and you're now back-filling content, this is the right path.
What you'll need
Step 1
Left sidebar → CMS tab → New Collection. Define fields once — fields are nearly impossible to rename later without breaking dynamic bindings.
In the Framer project, open the CMS tab in the left sidebar (looks like a database icon). Click 'New Collection.'
Name the collection in singular form (e.g., "Blog Post" not "Blog Posts" — Framer pluralizes automatically for URLs).
Define fields. For a blog: Title (text), Slug (slug, required), Excerpt (text 160 chars), Body (formatted text or markdown), Hero image (image), Author (reference to Authors collection), Published date (date), Category (multi-option or reference), Meta title (text 60 chars), Meta description (text 160 chars), OG image (image).
Set the Title field as the "Display name" so the CMS list view shows post titles, not IDs.
Lock the slug field — choose "Auto-generate from Title" so new posts get slugs without manual work, but allow override per post.
Step 2
In Pages, add a "Collection page" tied to your new collection. Framer auto-generates /blog/[slug] URLs.
Pages panel → "+" → "Collection page." Choose the collection you just created.
Set the URL pattern. For blog posts, the convention is /blog/[slug]. Framer auto-fills [slug] from the slug field on each item.
If you also want a listing page (a /blog index showing all posts), add a regular page at /blog. The listing page contains a CMS list that renders all items.
Avoid changing the URL pattern after publishing. If you must, set up 301 redirects in Project settings → Redirects before changing.
Confirm the URL appears correctly: go to a CMS item, click 'View live URL,' and verify the slug matches the pattern.
Step 3
The collection page is one design — Framer renders it once per item with bound fields. Design it like a template, not like a static page.
Open the collection page. Insert sections: hero (title + author + date + hero image), body, and "Related posts" footer.
Bind each element to its CMS field. Click the element → right panel → "+ Add binding" → select the CMS field.
Title element → bind to Title field. Hero image → bind to Hero Image field. Body element → bind to Body field (use the formatted text bound version, not plain text).
Author and date: bind to Author.name (reference field) and Published Date (formatted as desired).
Test by switching the "Preview item" dropdown at the top of the canvas. Each item should render correctly with its own data.
Step 4
Page settings → SEO panel → bind title and description to CMS fields. This is what makes per-post SEO work.
On the collection page (not a regular page), open Page settings → SEO panel.
Click the meta title field. There should be a "+" or chain-link icon to bind it to a CMS field. Bind to "Meta title" (the field you created in step 1).
Do the same for meta description (bind to Meta Description), OG image (bind to OG Image).
Verify by switching preview items: each post should show its own meta in the SEO panel.
Publish. Open the live URL of any post in incognito → right-click → View source → search for <meta name="description" — should show the post-specific description.
Step 5
On the /blog index page, insert a CMS List. Bind it to your collection. Design the card template once — it renders per item.
Open the /blog page (the listing page). Insert → CMS → CMS List. Choose your collection.
Design one card: thumbnail (bound to Hero Image), title (bound to Title), excerpt (bound to Excerpt), date (bound to Published Date).
Sort: typically by Published Date descending. Set in the CMS List properties panel.
Filter: optionally hide drafts (filter where "Published" is true if you added a Published boolean field).
Pagination or "Load more": for 20+ posts, add Framer's built-in pagination. Otherwise the page gets slow.
Test on mobile breakpoint — card grids often break on small screens. Use Stack auto-layout and Wrap mode.
Step 6
Add a real post (not a sample). Save. Publish. Verify it appears on the listing page and at the correct URL.
In the CMS panel, click "+ New" to add an item. Fill in every field. Upload a real hero image. Write a real excerpt and meta description.
Save the item (it stays in draft until the project is republished).
Hit Publish on the project. Wait 30 seconds.
Visit /blog in incognito. The new post should appear in the listing.
Click through. The detail page should render with the correct content, hero, author, date, and meta.
Edit one field (e.g., the title). Republish. Confirm the change appears on the live URL within 60 seconds.
Common mistakes
Not binding per-item SEO meta
What goes wrong: Every blog post inherits the project default meta title and description. Google sees 50 identical titles, demotes the entire blog, and you wonder why traffic plateaus. Lost organic compounds at $500-2,000/mo in equivalent ad spend.
How to avoid: Page settings → SEO panel → bind meta title, description, and OG image to CMS fields. Verify with View Source on each live post.
Changing slug structure after publishing
What goes wrong: Changing /blog/[slug] to /posts/[slug] after publishing breaks every backlink and inbound search-result click. 6-12 months to recover authority lost in the rename.
How to avoid: Lock URL patterns at setup. If you must change, set up 301 redirects in Project settings → Redirects BEFORE changing the pattern.
Using rich-text field for what should be separate fields
What goes wrong: You dump everything into a single 'Body' rich-text field. Later you want to surface excerpts on the homepage or feature images on social — you can't bind to them because they're buried in HTML.
How to avoid: Separate fields for Excerpt, Meta Description, Hero Image, OG Image, Body. Even when content overlaps, the separation enables future flexibility.
Skipping image alt text
What goes wrong: CMS images go live without alt text. Screen readers can't navigate. Google can't index images. Accessibility audit fails. Equivalent SEO loss: 5-10% on image search traffic.
How to avoid: Add an "Image Alt" text field to the collection. Bind every image on the page to use Alt = the bound field. Make Alt required in the CMS schema.
No pagination on listing pages
What goes wrong: At 50+ posts, the /blog listing page tries to render every post. First Contentful Paint hits 4-6 seconds. PageSpeed score drops to 40. Mobile bounce rate climbs.
How to avoid: Enable Framer's pagination on the CMS List. Show 12 posts per page. Alternative: "Load more" button for infinite scroll feel.
Recap
Done — what's next
How to set up a Framer site end-to-end
Read the next tutorial
Hand it off
A working CMS is one weekend. A CMS that grows with editorial workflow, multilingual content, advanced filters, and 500+ items is a different system. Framer specialists on EverestX typically run $200-600/mo for CMS architecture, schema migrations, and editorial training.
See specialist rates
Mini plan: 1,000 items per collection. Pro plan: 10,000 items. Business plan: unlimited. For most marketing sites with a blog and case studies, Mini is enough for 12-18 months.
Framer has CSV import for CMS collections. Export your WordPress/Webflow content to CSV (use a plugin like Export WP Posts or Webflow's native exporter), then import into Framer CMS. Image references usually need to be re-uploaded — Framer doesn't follow remote image URLs reliably on import.
Yes. Create separate collections (Authors, Categories), then add a Reference field on the main collection. Each item then references one (or multiple, with Multi-Reference) author/category. Bindings on the page can drill into the referenced fields (e.g., Author.name, Author.bio).
Add a 'Published' boolean field to your collection. On the listing page, filter the CMS List to only show items where Published = true. Draft posts stay in the CMS but don't appear publicly.
Always use a category prefix: /blog/post-name, /case-studies/client-name. The prefix tells search engines (and users) what type of page they're on. Flat /post-name slugs look cleaner but make it harder to organize redirects and analytics later.
Framer
Framer feels like Figma until you hit publish — then it suddenly behaves like a real CMS. This walks the path from empty project to a live custom domain, including the breakpoint and domain-connect steps that trip up most first-time builders.
Framer
Framer ships clean HTML and fast Core Web Vitals — but it does not auto-generate good SEO meta. Every page needs deliberate title, description, OG, and (for CMS) dynamic bindings. This is the full setup specialists run on every Framer site.
Framer
Framer is gorgeous and accessible — until you hit the wall where every change costs you a day. This is the honest framework: when the time cost of DIY exceeds the cost of hiring, and how to tell which side you're on.
Webflow
Webflow doesn't have a native GA4 field anymore — every install goes through Custom Code. Most DIY setups end up double-counting from the webflow.io staging subdomain or missing events from form submits. This walks the install + the filters that fix both.