Now that you’ve watched Ryan walk through the process and had a go inside the Starter Kit project it’s time to take the training wheels off. In the next few lessons, you’ll be building your own CMS system in Framer from scratch, using your own imported data.

What You’ll Be Doing

You’re going to build a dynamic CMS-powered detail page that updates automatically for each CMS item. This will set the foundation for a full blog or job board setup.

You’ll practice:

• Building a CMS detail page

• Linking layout to dynamic content

• Navigating between CMS items

• Connecting lists to detail pages

What You’ll Need

• A fresh Framer project

• The CSV files from this lesson (Find these above)

• Access to the CMS video modules

Steps:

1. Import the CMS Content

Start by uploading your content:

• Go to the CMS panel

• Create a new Collection (e.g., “Blog Posts”)

• Use the Import CSV button to upload your CSV file (Provided above)

• Make sure the columns are mapped correctly (e.g., title, author, image, body)

Want to include authors? Create a second collection called Authors and link it via a Reference field in the Blog Post collection.

2. Create a New Detail Page

• Hit + → choose your collection under CMS

• This creates a template for every item in that collection

3. Switch Between CMS Items

• Use the dropdown at the top of the canvas to preview different CMS items

• Helps you spot layout issues or missing fields

4. Design the Page

• Add text, images, and layout structure

• Use stacks, padding, and proper sizing modes (from the Sizing lesson!)

• Keep it clean, test in all breakpoints

5. Connect the Content

• Bind text to CMS fields (like blog.title, blog.image, blog.description)

• Just like variables in components — but for CMS now!

6. Add a Link from the Collection List

• Go back to your list page

• Select a list item → Add a link → Connect to your Detail Page

• Framer will pass the right CMS item automatically