Intro To The Framer CMS

Introduction

Using the CMS feature in Framer makes your life so much easier. You can create the design once and then scale it with how many pages you want. Cool right?

Think about the article you’re reading. Do you think I recreate the page's design every time and change the content? Or do you think I set it up once using the CMS and only paste the new article every time?

I think you already know the answer.

So, in this crash course, I’ll teach you:

✅ What exactly is a CMS

✅ How to create a CMS in Framer

✅ Intro to CMS fields

✅ How to add/edit/delete CMS elements

✅ How to add an Index and detail page to your project

✅ How to filter CMS elements

✅ How to set up limits and offsets

✅ How to link frames to fields

✅ How to edit the page settings of a CMS page

That’s a lot to cover, isn’t it? To help you better understand how to set up a CMS collection in a real-world project, I’ve decided to guide you step-by-step through creating a simple blog (the one in the cover image).

If you want to follow along, make sure the remix the project here.

Ready? Let’s get started!

What Exactly Is A CMS

CMS is short for Content Management System. I don’t want to annoy you with boring theory, so let’s look at an example to understand what we’re talking about.

Usually, when creating a website, every page has its layout and specific features. However, sometimes you know you’ll make a bunch of pages that are basically identical but differ in content.

Think about blog articles, case studies, product pages, job listings…

What do you do in this case? Of course, copying and pasting the layout repeatedly is not the best solution. And that’s where the CMS feature becomes handy.

Thanks to the CMS, you can design the page once and re-use it whenever you want. On top of that, once set up, the CMS makes it incredibly easy (even for those unfamiliar with Framer) to add, edit, or delete elements.

You can have multiple collections based on your needs. For example, I have three collections on my website: one for the blog, one for the templates, and one for the free resources I share.

Now that we understand what a CMS is, let’s look at how you can create one in Framer.

How To Create A CMS In Framer

Let's start by creating our CMS collection. Within the Framer designer, click on CMS in the top-right corner and click "Add Blog”.

Framer automatically generates a sample blog for you. Now, let’s familiarise ourselves a bit with the new interface.

On the left sidebar, you can see all the collections available on your project. Each collection is basically a set of related items with the same design and properties.

On the top bar, there are three main buttons:

• New Item

  → This button allows you to create a new entry in the collection, such as a new blog article.

• Select

  → This allows you to select and bulk-delete CMS items.

• Edit Fields

  → This button allows you to edit the fields that make up every article (more on this in the next section).

• Import

  → The import button lets you import a CSV file into the Framer CMS.

If you click on any of the default articles, a window will open showing you the details of that article.

As you can see, every article is made up of different fields. Some of them are intuitive, like the title. Some of them are not, like the :slug.

Intro To CMS Fields

Let’s quickly go over each field:

• Title (plain text)

  → The title of the article.

  
  

• Slug

  → The last portion of the URL that identifies the particular page on the website. In our example, the slug is based on the title, so each URL will end with: "blog/name-of-the-article”.

  
  

• Date

  → The date on which you published the article.

  
  

• Image

  → An image shown both in the preview and on the actual article page.

  
  

• Content (formatted text)

  → The actual blog article.

  
  

As highlighted in the list, the title and the content have two different field types. The title is "plain text," while the content is "formatted text." But what's the difference?

Plain text is simply a string of text displayed without any formatting. You can't add line breaks, italic text, bold text, etc.

Formatted text, as the name suggests, can be formatted. Think of it like a Word document. You can perform simple formatting like making a word bold, creating a link, embedding an image, etc.

For the sake of this project, the default fields are almost enough. I'll only add a short description as plain text (you'll later understand why).

Now, let's see how you can perform simple actions on this collection.

How To Add/Edit/Delete CMS Elements

Adding a CMS element is super easy. Just follow these steps:

1. Click on the "New Item" button.

2. Fill all the fields (the :slug will be automatically generated based on the title).

3. Save your new article.

   
   

And voilà! You now have a fresh new article. (Note: This article will not be visible on the final website until you publish your changes.)

To edit or delete an element, right-click on the target element and choose the action you want to perform.

How To Add An Index And Detail Page To Your Project

Now that we’ve finished the project setup let’s look at how to add an index and a detail page to your project.

But what do these terms mean in the first place?

Think about the index page as the hub of your blog, where you can quickly scan the articles and choose which one interests you. Clicking on a preview redirects you to a details page where you can read the entire article.

Let’s start by adding the collection to the project. To do that, go back to the Framer designer and, in the left sidebar, click on the small “CMS +” button. Choose "Blog" > "Detail Page.”

As you can see, it will automatically create a default design for your page. You can completely customise the layout, but for the sake of brevity, we’ll leave it this way.

Now, you could potentially make Framer create the Index page for you, but I want to show you how you can incorporate the blog into any page you want.

To do that, select the desired page, click "Insert," then "Collection Lists," and drag the blog wherever you want.

As you can see, you now have a fully functional index on your home page. You can customise the design as needed, but that's beyond the scope of this post.

After some styling, here’s how it looks:

The blog works almost perfectly fine. The only basic functionality missing is a way to return from a blog article to the index page.

To do that, you can simply add some text to the index page and link it back to the homepage.

Now that we've covered the basics let's explore something more advanced.

How To Filter CMS Elements

Suppose I only want to show elements published before March 1, 2022. To achieve this, I need to apply a filter to our collection.

Starting from our homepage, I'll select the Collection List we added earlier. On the right sidebar, under the 'CMS Content' area, I'll add a new filter.

I need to specify the field, which, in this case, is the publication date. Then, I'll set the condition to include only articles published before the selected date. Finally, I'll type the date.

And voilà! Our collection list now only displays the three articles published before March 1, 2022.

This exact framework can be applied to any other filtering condition you can think of.

How To Set Up Limits And Offsets

Now, let's consider a scenario similar to the previous one (assuming we've removed the filter we applied). Suppose we want to display only the last three elements in the collection list, regardless of their order.

Just as we did when applying a filter, we need to select the collection list, navigate to “CMS Content” on the right sidebar, and set a new limit.

What about offsets? An offset is essentially a number serving as the starting point for our collection list. For instance, if we initially displayed articles 0, 1, 2; applying an offset of 1 would result in displaying articles 1, 2, and 3.”

How To Link Frames To Fields

Remember the description I’ve added to our blog posts. How would you go about adding it to our detail pages?

Firstly, you’d have to add a place in the detail page where you would display the description. In our case, I'll position it just below the title.

Now that we have the container for our field, we have to link it. Here’s how you can do it:

1. Select the frame.

2. Navigate to “Text” > “Content” on the right sidebar.

3. Click on the small “+” sign > “Set Variable” > “Description.”

How To Edit The Page Settings Of A CMS Page

Before publishing your new blog, there's one final step - editing the page settings for the CMS pages.

Don’t worry; this doesn't involve anything technical; it's simply about adjusting the title and description that will appear in search results.

To do that, navigate to your page settings > Blog pages. As you can see, the title is already set to match the article title. The only thing left is to add the description (which we included when creating the CMS).

To add the description, just type the CMS variable name in double curly brackets in the 'Page Description' area. For example: {{Description}}.

Below this area, a preview lets you see how your snippet will appear in search engines. You can use it to check that everything is set up correctly.

And… Congratulations! You can now consider yourself a Framer CMS pro! You’ve just built a publish-ready blog from scratch, even incorporating more advanced features such as filters, limits, and offsets!

Start With A Template

If you prefer not to build your blog from scratch or want to go online more quickly, we've created three templates to help you speed up the development process:

• TechWriter Template (Free)

  → This template is entirely free and includes advanced functionalities not covered in this article, such as a search feature and a 'Related Articles' section at the end of each post. To learn more or grab it for free, visit this link.

  
  

  
  

  

• Rivista Template (Paid)

  → Rivista is a modern and versatile Framer template tailored specifically for online magazines and large blogs. It has everything a blog could ever need, from articles, to category pages, to author pages with their related items, and so much more! If you want to learn more or purchase it, check out this link.

  
  

• Essentialism Template (Paid)

  → As the name suggests, this template embraces a more minimalistic look. Despite its simplicity, it offers advanced functionalities like category pages, a category-based filter, sleek page transitions, and much more! If you want to learn more or purchase it, check out this link.

  
  

  

Conclusion

If you’ve read this whole guide, you can now consider yourself a true Framer CMS pro!

From understanding CMS basics to implementing advanced features like filtering and dynamic content display, you can now create a collection list for any situation!

Thanks for reading and happy designing!

P.S. Don’t forget to grab the free project for a hands-on reference.

- Luca