CMS

Understanding CMS Collections, Items & Fields in Framer (CMS Lesson 2)

Understanding CMS Collections, Items & Fields in Framer (CMS Lesson 2)

Understanding CMS Collections, Items & Fields in Framer (CMS Lesson 2)

Justin

·

5:51

·

30K views

·

Apr 7, 2025

About this lesson

In this video, we’ll break down the core building blocks of Framer’s CMS: Collections, Items, and Fields. You’ll learn how to create your first collection, add and manage content, and define custom fields to structure your data. Whether you're building a blog, portfolio, or product catalog, this lesson will set the foundation for creating scalable, content-driven sites in Framer.

https://www.youtube.com/watch?v=1PJkjBd8IsY&t=0s Introduction

https://www.youtube.com/watch?v=1PJkjBd8IsY&t=28s What is a CMS Collection?

https://www.youtube.com/watch?v=1PJkjBd8IsY&t=53s Creating a CMS Collection

https://www.youtube.com/watch?v=1PJkjBd8IsY&t=122s Exploring CMS Field Types

https://www.youtube.com/watch?v=1PJkjBd8IsY&t=257s Adding Items to the Collection

https://www.youtube.com/watch?v=1PJkjBd8IsY&t=320s Wrap Up

Check out the full course here: https://www.framer.com/academy/courses/getting-started-with-framer-cms

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00Collections, items, and fields are the 0:03foundation of any content management 0:05system. They help you keep your site's 0:07content structured, consistent, and easy 0:10to manage, especially as your site 0:12grows. So, in this lesson, I'll walk you 0:15through how to create your first 0:16collection, manage its set up the fields 0:19that control what kind of content each 0:22item holds. Let's get started.0:28To quickly recap from the last lesson, a 0:31CMS collection is like a folder that 0:33groups related content. Inside that 0:35folder are items, and each item follows 0:39the same structure defined by a set of 0:42fields, which are the type of content 0:44within an item. So, now that we've got 0:47that fresh in our minds, let's walk 0:49through how to set up your first CMS 0:51collection in 0:53Framer. To get started, click on CMS in 0:56Framer's top menu bar. This will open a 0:59new sidebar where all our collections 1:01will live. But since we don't have any 1:04set up yet, you'll see a few options 1:06like importing a collection from an 1:08external source like a CSV file or 1:11starting with Framer's sample blog. But 1:14for this lesson, we're starting from 1:16scratch. So, I'll go ahead and click the 1:18plus icon next to the word collections 1:21to create our first one. Now, it's time 1:24to name our collection. It's always a 1:26good idea to choose something clear and 1:28descriptive like blog posts, team 1:31members, or products. A good name keeps 1:34things organized and easy to manage as 1:36your site grows. For this example, I'm 1:39creating a simple blog. So, I'm going to 1:41name this first collection articles.1:44Now, before we dive into making our 1:47first item, let's take a closer look at 1:49fields since they hold the structure of 1:52our items content. To do that, I'll 1:54click edit fields at the top to open a 1:57panel where I can add or customize the 1:59fields for this collection. Framer gives 2:03us a range of field types to choose from 2:05depending on the kind of content we need 2:07to store. By default, it starts us off 2:10with two of the most common. a plain 2:12text field, which is great for short 2:14content like names or titles, and a 2:17formatted text field, which works well 2:19for longer content like blog articles or 2:23bios. You'll also see a slug field 2:26that's been automatically added. This is 2:28required for every CMS item and is used 2:32to generate the items URL when we start 2:34creating pages from our content. We'll 2:37dive deeper into how that works in a 2:39later lesson. To add a new field, just 2:42click the plus icon in the top right 2:44corner of the panel. This opens a list 2:47of all the available field types you can 2:50use. Some of the most commonly used 2:52include image fields for things like 2:54profile photos, banners, or thumbnails.2:58Link fields for URLs, calls to action,3:01or buttons, and toggles, which are 3:04perfect for simple onoff switches like 3:07when you're marking an item as featured.3:10There are also other options like color,3:13numbers, and date fields, giving you the 3:16flexibility to shape your content 3:18exactly how you need it. Since I'm 3:21creating a blog, I'll go ahead and add 3:24an image field for my banner image and a 3:26date field to show when the article was 3:28written or published. Each field we add 3:31comes with its own set of properties 3:33that we can adjust to better fit our 3:35content needs. For example, I can change 3:38the name of the field to keep things 3:40clear and organized, like changing the 3:42image field to say banner, or add a 3:46description to help explain what kind of 3:48content should go there, which is 3:51especially helpful if I'm going to be 3:52collaborating with a team. One of the 3:55most commonly used properties is the 3:57required toggle. Turning this on makes 4:00sure that every item in your collection 4:02includes content for that field before 4:06it can be saved or published to your 4:08site. Adjusting these properties give 4:10more control and flexibility over how 4:13content is structured and managed within 4:16the CMS. Now that we have our fields set 4:19up, it's time to add our first item. So,4:22I'll go ahead and click on new item,4:24which will create a blank item using the 4:26fields I just defined. From here, we can 4:29start filling in each field with 4:31content, adding a title, uploading my 4:34banner image, choosing a date, and so 4:36on. Once you finish populating all of 4:39the fields, just click save at the top 4:41to add the new item to the collection.4:45If you ever need to make changes, just 4:47click on the item from the list. it'll 4:49reopen so you can edit any existing 4:51fields or fill in any new ones you've 4:54added later. You can also rightclick an 4:56item to duplicate it, which is great for 4:59adding new content quickly. And if you 5:01want to reorder your items, you can 5:03either drag and drop them manually or 5:06click on the column label at the top 5:08like date or title to sort them 5:10automatically based on the content in 5:13that field. something that'll be extra 5:15useful when we dive into collection 5:17lists in an upcoming lesson. Now that 5:20you know how to create a collection, set 5:22up fields, and add items, you're ready 5:25to start populating your collection with 5:27real content. In the next lesson, we'll 5:30take it a step further by going over how 5:32to use those items to automatically 5:34generate pages and how to customize the 5:37design of each item page to match your 5:40site's look and feel. See you there.

TeachesCollections CMS Fields

Also coversCollection Lists Links

Watch on YouTube ↗

‹ What is the Framer CMS? (CMS Lesson 1)

Framer Update: P3 Colors ›

More in this topic

Framer Update: CMS 3.0

Framer Update: CMS 3.0

Framer Update14K views · 1 month ago

Ship websites with enterprise needs, at startup speeds

Ship websites with enterprise needs, at startup speeds

Announcement8.3M views · 3 months ago

Framer Update: CMS Dynamic Filters

Framer Update: CMS Dynamic Filters

Framer Update14K views · 3 months ago

Framer Update: CMS Components

Framer Update: CMS Components

Framer Update11K views · 4 months ago

Framer Update: Empty States in CMS Lists

Framer Update: Empty States in CMS Lists

Framer Update4K views · 4 months ago

Wireframer: Blogs and Changelogs with CMS

Wireframer: Blogs and Changelogs with CMS

Framer Update5K views · 8 months ago

On-Page Editing in Framer: A powerful new way to update Framer sites, right in the browser.

On-Page Editing in Framer: A powerful new way to update Framer sites, right in the browser.

CMS10K views · 10 months ago

Framer Event — Introducing On-Page Editing

Framer Event — Introducing On-Page Editing

Event12K views · 10 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.