This document aims to address difficulties faced by local users learning Framer due to the lack of Korean resources. We have translated content from the official blog into Korean and added practical information for you. We hope this proves helpful to Framer users.

What is a CMS Page?

By using the CMS feature, you can automatically create pages with repeating content, such as blogs or news. It's really convenient for managing large-scale content, as it allows you to quickly organize multiple items based on a single design.

What is CMS?
It's an abbreviation for Content Management System.
It is useful when there is a lot of content that frequently changes, such as blogs, news, and product listings, because pages can be created with pre-specified designs without needing a designer.

Creating a CMS Collection

To use CMS pages, you first need to create a collection, which serves as the framework for 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 on the top menu in Framer

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

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

Setting Up Fields

Fields are the types and structures of data contained within each CMS content item.

How to Set Up Fields

1. Click Edit Fields on the top bar

2. Add necessary fields

3. Field types:
   Plain Text: Short text like a title
   Formatted Text: Long text like a body
   Image: Banner or thumbnail
   Date: Posting date

4. Each field can be renamed, have descriptions added, and set as required

Note : Adding descriptions to fields can clearly convey meanings during team collaboration.

Adding Items

Each piece of content that goes into a collection is called an item.

How to Add Items

1. Click the created collection

2. Select New Item on the top bar

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

Each item you add is linked to a single CMS page.

Designing a CMS Detail Page

1. Click the + button in the side tab's page section → select New CMS Page

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

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

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

5. Utilize elements in the [+]insert > Fields tab for design

Q. Can you add new fields after creating a CMS Detail Page?

1. Go back to the CMS collection and select Edit Fields

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

3. Enter the content for the field into the CMS item
   Using variables to connect the Link field to the CMS page

Q. What if field items differ for each page?

Let's assume some posts have a Link field, while others do not. If the button continues to appear on posts without a Link, it would be meaningless and look awkward. In such cases, use the Conditional Visibility function, which displays an element only when there is data in the CMS item.

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

2. Click the + button for Visible in the properties panel

3. Select Set Variable > Link field

4. Click is set

Choosing the is set option makes the element visible only when the field exists; otherwise, it automatically hides.

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