A Simple Framer CMS Setup
A clean collection structure for projects and articles that stays easy to edit after launch.
Jonas Verdin
Date
Category
Technical
Reading Time
2 min read
Most portfolios do not need a complicated CMS. They need a few collections, a few well-chosen fields, and the discipline to stop adding more. This is the setup I keep returning to when I build a portfolio in Framer.
Start from the content, not the tool
Before opening Framer, I list the things the site will show: projects, journal posts, perhaps a list of services. If something appears more than three times and has the same shape every time, it is a candidate for a collection.
If it appears once, or its shape changes each time, it is better as a normal page.
The collections
Collection | Holds | Key fields |
|---|---|---|
Projects | Case studies | Title, Cover, Category, Year, Content |
Project Categories | Filter labels | Title |
Journal | Written posts | Title, Cover, Date, Excerpt, Content |
Keep field names consistent
Use the same name for the same idea everywhere. If a cover image is called Cover in one collection, do not call it Thumbnail in another. Consistent names make bindings easier to read, and they help anyone who inherits the project.
References, not duplicates
Categories are a good example. Instead of typing a category on every item, create a small collection and reference it. Renaming a category then happens in one place, and filters stay reliable.
Setting it up
Create the collections and add fields one at a time.
Add three real-looking items before designing anything.
Build the list page, then the detail page, and bind each field.
Check an item with very long and very short content:
A title that wraps onto three lines.
A post with no cover image.
Real-looking items matter. A design built with “Lorem ipsum” hides every problem that real content will reveal.
Slugs and titles
The slug becomes the web address, so I keep it short and readable. Mine usually mirrors the title, in lowercase with hyphens. Changing a slug later breaks old links, so I decide it carefully once.
A CMS is a promise about structure. Make the promise small enough to keep.
When to stop
Every new field is a decision someone must make for every item, forever. I add one only when I can name the page that uses it. Everything else stays out. For tips on shaping the images you upload, see Exporting Images for the Web.