Imagine this…
You’re running a gardening blog, passionate about sharing insights on your favorite tools. Each week, you diligently craft a new blog post and prepare to publish it.
But here’s the catch: every time you want to post something new, you’re stuck duplicating page designs, deleting old text, and formatting the new content.
That's not scalable and is time consuming, right?
That's why a CMS exists.
Imagine simply writing your blog post (like you would on a notepad) and hitting publish…
Voila! A dedicated page for your content is created automatically, saving you valuable time and resources without the hassle of manual copying.
That's the beauty of a CMS.
And Framer has its own powerful CMS tool designed to streamline your workflow.
This guide will cover everything you need to know about the Framer CMS, from setting up collections and items to advanced SEO optimization tips. Let’s get started!
What is CMS on Framer?
A CMS, or Content Management System, on Framer is your made up of 2 things:
Collections
Items
Think of it as a sophisticated filing cabinet where collections are the drawers, and items are the individual files.
This structure makes organizing, editing, and publishing content a breeze.
What Can You Create with the Framer CMS?
The possibilities with Framer CMS are virtually endless. Anything that would need to be repeated over a long run is possible with the Framer CMS, such as:
Blogs: Regularly publish articles without designing each page.
Portfolios: Showcase your projects with ease.
Product Listings: Maintain and update product information dynamically.
Event Schedules: Manage and display upcoming events.
Team Pages: Highlight team members with individual profiles.
Recipe Collections: Share culinary masterpieces with a structured layout.
Job board: Advertise any new job openings
Each of these examples benefits from the CMS's ability to handle repetitive tasks efficiently, allowing you to focus on content creation rather than design logistics.
Benefits of CMS
Now that you've understood the true power of the Framer CMS, the benefits of using the Framer CMS goes a long way!
No need to design each page from scratch. Just input your content, and the CMS does the rest.
Easily grow your website as your content library expands.
Perfect for teams lacking in design skills. Create stunning content without the risk of breaking the design.
What Fields Can You Add in the CMS?
Framer CMS allows for a variety of fields to suit your content needs. You can add:
Framer CMS supports various field types, including text, date, media, link, color, toggle, multi select option, number, and file upload
Text fields for titles and descriptions.
Image fields for visual content.
URL fields for links.
Date fields for events.
Color fields to set a color.
Boolean fields for true/false conditions.
Number fields for numbers only.
File upload to allow users to download a file through your CMS.
Rich text fields for more detailed content.
These fields provide flexibility, ensuring that your content is as rich and dynamic as you need it to be.
How to Add a CMS in Framer
Now that we’ve covered the basics of the Framer CMS, let’s explore how to integrate it into your own website.
Adding a CMS Collection To Your Framer Project
Head over to the "CMS" menu from the top menu bar.
From here you have 2 options:
Import CSV: Use this to convert a CSV file into a CMS collection, ideal for migrating existing data to Framer.
Add Blogs: This adds sample blogs that you can customize, perfect for quick setup without starting from scratch.
To create an empty collection without predefined fields, click the “+” icon in the top right corner.
Adding Fields To Your CMS Collection
With your CMS collection set up you'll see 5 sample blogs (items) added. This will allow you to give and idea of how the CMS looks and works like.
From here you can go into each item and read the post itself. Pretty neat.
You will also notice an "Edit Fields" button. Clicking on this brings up a range of option.
Let's make changes to this and add a few more fields.
Let's say at the end of the blog post we want to add an author. This should include an image, name, title, and a link to the authors LinkedIn profile.
To create this we need to add fields for each of those titles mentioned above.
In this case we added an Image field for the author's picture, two text fields (one for name and the other for the title), and a Link field for the LinkedIn profile.
This is what your fields section should look like.
Similarly, you can add as many fields as you like to optimize and categorize your CMS items!
Adding Items To Your CMS Collection
Once you've set up your collection it's time to add your items. To add a new item (in this case a new blog) you can hit the "New Item" from the top menu bar.
This will give you an empty template to add your content. One thing to keep in mind here is the Slug.
The slug is the URL that's created when you publish the blog. This is usually auto-generated using your title.
Click “Save” to create the page for this specific blog post.
Mapping & Linking Your CMS Fields
When you head back into your canvas you'll notice the following pop-up. Here's what it means:
The first time you add a CMS to a website 2 pages will be created for you:
Index page: Displays all items in a grid format, similar to browsing products on Amazon.
Detailed page: Accessed by clicking on an item, providing detailed information.
Note: If you add a new collection then you can create an index and detailed page by hitting the "+" icon on the Pages tab and going to the "New CMS Page" option.
In this case Framer has already generated a design for the index and detailed page. Usually you would need to create a design from scratch and map the fields.
What does that mean?
Think of it like this - you've added the fields in the CMS. Now you need to create a design for where those fields will be displayed and their style.
You can watch this video by Framer which gives a detailed rundown.
Adding Your Collection To Other Parts Of Your Websites
Well, you have a index and a detailed page, but what if you want to show your CMS collection on the home page too?
For example if you've created a blog and want to show the latest blogs on the homepagee with a button saying "Read all blogs" that takes you to the index page.
You can do that by heading over to the "insert" menu and going over the "Collection Lists". From here you can drag the collection you want to display.
Applying Filters and Limitations
There might be certain cases when you want to add filters to only show specific items. For example, like this website you have different pages for different categories, therefore you want to show certain items in the right category.
This is where the filter option comes in. You can read a detailed guide on creating an efficient filtering system in Framer here.
Similarly, let's say you want to add a blog collection on your homepage but only want to show the the top 3 latest blogs instead of your whole collection you can add a "limit" to limit how many blog posts are shown.
Setting Your CMS Up for Success with SEO
With your CMS ready to go, there's only one thing left to do!
And that is to optimize your CMS for SEO. Think of it this way - you may have the best content but if no one can find your content then it's all going to waste.
You can read a detailed guide on SEO here, but there are a few additional steps you can take to optimize your CMS.
Navigate to page settings > CMS Pages (this might be whatever you named it as).
The title is typically set to match your article’s title. Add the description (previously set up in your CMS) using double curly brackets, like this: {{Description}}.
Below, preview how your snippet will appear in search engines to ensure everything is correctly configured.
Finally you can also choose an image that will appear when a user shares your website with others.
Other key tips:
Meta Description Field: Add a meta description field in your CMS collection to provide search engines with a summary of your page content.
Page Titles: Set up clear and descriptive page titles.
Images and Alt Texts: Optimize images with relevant alt texts.
Conclusion
Framer CMS is a powerful tool that simplifies content management, making it easier for you to create and maintain dynamic websites.
By utilizing collections and items, applying filters and conditions, and optimizing for SEO, you can ensure your website is not only visually appealing but also highly functional and discoverable.
FAQs
What is CMS on Framer? Framer CMS is a content management system integrated with Framer, focusing on collections and items to manage and organize content.
What can I create with Framer CMS? You can create blogs, product listings, portfolios, event schedules, testimonials, and team member profiles.
What are the benefits of using Framer CMS? Benefits include not needing to redesign pages for new content, easy scalability, and user-friendliness for non-designers.
What fields can I add in Framer CMS? You can add text, images, links, rich text, numbers, booleans, dates, and colors.
How do I add CMS content in Framer? Navigate to the CMS panel, create a new collection, add fields, and input content. Map fields to design templates and create lists and detailed pages.
How do I apply filters and limitations in Framer CMS? You can add filters, limits, and conditions to show specific items based on your criteria.
How can I optimize my CMS for SEO? Ensure you have meta description fields, set up page titles and meta descriptions, and optimize images with relevant alt texts.
