CMS pages & dynamic content in Framer
In this Framer tutorial, you will learn CMS pages & dynamic content in Framer. 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.
How do I create dynamic CMS pages in Framer that update automatically for each collection item?
In Framer, CMS detail pages combine a single reusable layout with the content of a CMS collection, automatically generating individual pages for each item, populated with the right content. You design one flexible template and Framer uses it to generate a separate page for every item in the collection, each automatically pulling in the unique content from the CMS. To add a CMS page, go to the canvas, click the pages tab, then the plus icon, and select ’new CMS page.’ Choose your collection and select ’detail page’ to create a dynamic layout that updates based on each item’s content.
How can I display new fields, like a button with a link, on my CMS detail pages?
To display a new field such as a button with a link, first go to your CMS collection and add a new field (e.g. a link field). Populate this field with the desired URL for each item. Then, on your CMS detail page, create a button or text layer, go to its link property, click the plus icon, choose ’set variable,’ and select your new link field. This connects the button to the CMS data, so it dynamically updates for each item.
How do I show or hide elements on a CMS page based on whether a field has content?
You can use conditional visibility to show or hide elements based on your CMS content. For example, if you have a button linked to a field that might be empty, set a variable on the visible property in the styles panel by choosing the relevant field and setting the variable to ’is set.’ This ensures the element only appears if the field contains data, keeping your design clean and flexible.
Lesson details
