What is a CMS Page?

A CMS page is one that can be automatically created to repeat multiple content items, like blogs or news, using the CMS features. With a single design template, you can rapidly manage several items, making it extremely convenient for handling large-scale content.

What is CMS?
It stands for Content Management System. Even without a designer, you can input text, and pages are created using pre-designated layouts. This makes it useful for cases with a lot of content that changes frequently, like blogs, news, and product listings.

Creating a CMS Collection

To use CMS pages, you first need to create a collection, which will be the frame of your content.
Note : A CMS collection is essentially a folder that gathers similar types of content. Simply put, it's a content group.

How to Create a CMS Collection

1. Click CMS in the top menu of Framer

2. Press the + button in the sidebar to create a new collection

3. Enter a collection name (e.g., Articles, Products, etc.)

Setting Fields

Fields refer to the types and structures of data included within each CMS content item.

How to Set Fields

1. Click Edit Fields in the top bar

2. Add required fields

3. Field types:
   Plain Text: Short text like titles
   Formatted Text: Long text like body content
   Image: Banners or thumbnails
   Date: Publication date

4. Each field's name can be changed, descriptions can be added, and required status can be set

Note : Adding descriptions to fields can clearly convey information when working in a team.

Adding Items

Each content piece within a collection is known as an item.

How to Add Items

1. Select the created collection

2. Choose New Item from the top bar

3. Enter the blog post title, date, image, body content, etc., into each field

Each item added this way is linked to a single CMS page.

Designing the CMS Detail Page

1. In the page tab of the sidebar, click the + button → select New CMS Page

2. Select the collection to be linked (e.g., Articles)

3. Choose the type of Detail Page Index Page: Item list (blog list, card view, etc.) Detail Page: Single item content page

4. The fields of the selected collection are automatically linked to the page

5. Use elements from the [+]insert > Fields tab to design

Q. Can I add new fields after creating a CMS Detail page?

1. Go back to CMS collection and select Edit Fields

2. Add a new field (e.g., Link field)

3. Enter the content of the field into the CMS item
   How to connect the Link field to the CMS page using variables

Q. What if the fields vary across pages?

Suppose some posts have a Link field while others do not. If a button keeps appearing in posts without a Link field, it would have no meaning and look awkward in design, right? In such cases, use Conditional Visibility to display elements only when there is data in a CMS item.

1. Select an element (e.g., button)

2. Click the + button beside Visible in the property panel

3. Set Variable > select the Link field

4. Click on is set

After selecting the is set option, the element is shown only when the field is available, and it is automatically hidden otherwise.

This content is translated and adapted from the Framer official video ‘Understanding CMS Collections, Items & Fields in Framer’.