Justin
3:29
Create one reusable page for every CMS item
Learn how to create a CMS detail page in Framer that uses one reusable layout for every item in a collection. Connect text, images, links, and visibility to CMS fields, preview different items from the canvas, and add previous and next navigation with help from a the Agent.
Lesson details
To create a CMS detail page in Framer CMS, open Pages, choose New CMS Page, select a collection, then choose Detail Page. You can also ask a the Agent to create a page that matches the existing design. Each collection item uses this single layout while its fields supply the content.
CMS variables connect each layer or property to the current item. Bind text, images, and link controls to their matching fields. Switching items from the dropdown at the top of the canvas lets you preview the content while the layout stays the same, and a layout edit applies across the collection.
Use conditions when an element should appear only for items that contain a value, such as hiding a button when its URL is empty. Add previous and next links to help visitors move through the collection, then make final layout adjustments on the canvas.
Frequently asked questions
What is a CMS detail page in Framer?
A CMS detail page is one reusable layout for individual items in a collection. Framer keeps the layout consistent while loading the title, image, body, links, and other field values from the item a visitor opens.
How do I create a CMS detail page?
Open the Pages panel, choose New CMS Page, select the collection, and choose Detail Page. You can also ask a the Agent to create the detail page using the site’s existing design language.
How does a detail page display the correct CMS item?
Layers and Component properties connect to collection fields through CMS variables. Use the item dropdown above the canvas to preview different records. The values change for each item while the shared page layout remains the same.
Can I hide an element when a CMS field is empty?
Yes. Apply a visibility condition based on the relevant field. For example, hide a button when the current item has no URL. Items with a value show the control, while incomplete items keep it out of the layout.
How can visitors move between CMS detail pages?
Add previous and next links to the detail page and bind their labels to the neighboring item titles. Visitors can then move through the collection without returning to the index page after each item.
Continue watching
Load more