CMS collections, items & fields
In this Framer tutorial, you will learn CMS collections, items & fields. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
What is the difference between a collection, an item, and a field in Framer’s CMS?
In the Framer CMS, a collection is a database that stores a specific type of content, like blog posts or help center articles. Inside the collection are CMS items that follow the same structure defined by a set of fields. Fields are the building blocks of content entries, determining what data is stored and how it appears in the published post. Examples of fields include the title, author, and date of publication.
How do I add custom fields to a collection item?
Navigate to the CMS and hover over the collection you want to update. Click the three dots, then select Edit Fields. In the panel that opens, choose any property from the left side to edit its fields. From there, you can rename fields, add helper text, toggle required fields, and make other adjustments. The changes you make will apply to all items in that collection.
How do I connect videos to the CMS in Framer?
You can either add a video as a field in your CMS collection or you can add videos within formatted text fields. To add a video as a field in your CMS, open your collection in the CMS and click Edit Fields. Add a new File field, then open the field settings and include the .mp4 extension to enable video uploads. After saving, a + icon will appear next to the field. Click it to upload your video file and connect it to your CMS item. Alternatively, you can add a Link field, add in the link of a video, and then use an embedded video player on the canvas to stream the video from sites like Youtube and Vimeo. To add a video within a formatted text field, open a CMS item and scroll to the given formatted text input area. From there, you can select the image button to upload an .mp4 or press the play button to embed a video.[a][b]
Lesson details
