The Complete Guide to the Framer CMS (2025)

At its core, the Framer CMS is a structured spreadsheet that lives inside your website. It holds your data (text, images, links) separate from your design.

There are two main pieces to the puzzle: 1. **Collections**: Think of a Collection as a spreadsheet. You might have a "Blog Posts" collection, a "Team Members" collection, or a "Features" collection. 2. **Items**: These are the rows in your spreadsheet. Each blog post is an Item. Each team member is an Item.

The real power of the CMS is its integration with the visual canvas. You build a single "Template Page," connect it to your Collection, and Framer instantly stamps out a distinct webpage for every single Item in your database.

To get started, click the "CMS" icon in the top toolbar. Framer will prompt you to create a new Collection. Give it a plural name like "Blog Posts" or "Case Studies."

Once created, you need to define the structure by adding **Fields**. These are the columns of your spreadsheet. A standard blog post needs several fields: • **Title** (Plain Text) • **Slug** (Plain Text - used for the URL) • **Cover Image** (Image) • **Content** (Formatted Text / Rich Text) • **Publish Date** (Date) • **Author** (Reference to another CMS collection, optional)

Framer supports over a dozen field types, including colors, links, files, and toggles. Take the time to map out exactly what data you need before you start designing.

With your fields set up, it's time to add data. Click "New Item" in the top right of the CMS panel.

Fill in the fields for your first item. Upload a cover image, write a catchy title, and paste some dummy text into the Formatted Text area. You can also import data automatically using a CSV file. If you are migrating a blog from Webflow or WordPress, you can export your posts to a CSV and drag it straight into the Framer CMS to populate hundreds of items instantly.

Create at least 3-4 sample items so you have enough data to see how your design will look when you connect it in the next step.

A Collection List is how you display multiple CMS items on a standard page — like a grid of blog posts on your homepage.

To add one, go to the Insert menu (shortcut: `I`), select "CMS," and drag a Collection List onto your canvas. By default, it will drop a basic vertical stack of text onto the page.

Now to design it: Draw a Frame inside the "Item" bounding box. Give it a background color, some padding, and rounded corners to create a "Card." Drag a text layer into the card. Look at the properties panel on the right — next to the "Content" textbox, click the small `+` icon and select the "Title" variable from your CMS.

Repeat this for images and descriptions. Whatever you design inside the first card will automatically ripple down and apply to every other item in the list.

While a Collection List shows previews (cards), a Collection Page shows the full content (the actual blog post).

When you create a CMS collection, Framer automatically generates a new Page template in your left sidebar, usually named `/blog/:slug`. Click this to open the detail view template.

Design this page exactly as you would a normal webpage. Create a hero section with a giant text element, and bind that text to the CMS "Title" field. Add an image wrapper and bind it to the CMS "Cover Image" field.

For the main article body, drag in a "Formatted Text" component from the Insert menu and bind it to your CMS Content field. Framer will automatically render all your H2s, H3s, paragraphs, and list items dynamically based on what you wrote in the CMS dashboard.

Once you have dozens of items, you won't want to show all of them on every page at the same time.

Select any Collection List on your canvas and look at the right properties panel. You'll see options for **Limit**, **Sort**, and **Filter**. • **Limit**: Restrict the list to only show the "Latest 3" posts to use on your homepage. • **Sort**: Order items by Publish Date (Newest to Oldest) or Alphabetically. • **Filter**: Only show items where a specific field matches a condition. For example, only show items where the "Featured" toggle is set to True, or where "Category" equals "Design."

Combining these three tools allows you to create complex layouts, like a "Featured Post" main section, a grid of "Recent Posts," and a sidebar of "Popular Posts" — all powered by the exact same database collection.

Framer automatically generates clean, indexable URLs for every CMS item based on the Slug field. But you also need to automate the meta titles and descriptions for search engines.

Open your CMS Page Template (`/blog/:slug`) and click the "Page Settings" gear icon. Scroll down to the SEO section. Instead of typing a static title, click the `+` icon and select variables from your CMS.

Set the Page Title to: `[Title Field] | My Beautiful Blog` Set the Page Description to: `[Excerpt Field]` Set the Open Graph Image to: `[Cover Image Field]`

When Google crawls your site, it will see a perfectly customized, totally unique meta title and description for every individual blog post, ensuring they can all rank independently in search results.