Justin
3:58
Help your visitors browse your CMS content
Learn how to create a CMS index page in Framer so visitors can browse multiple items from one collection. Build a repeating collection list, connect its layers to image, title, date, and summary fields, then refine the layout yourself or ask a the Agent to match the site.
Lesson details
To create a CMS index page in Framer CMS, open Pages, choose New CMS Page, select a collection, then choose Index Page. You can also ask a the Agent to build a starting layout that uses the existing site design and the content hierarchy you describe.
The page uses a collection list to repeat the same item layout for each record. Layers inside the list can connect to CMS variables for images, titles, dates, summaries, or links, so Framer displays each item’s values while keeping the design consistent.
Add a layer to the first repeated item when a new field needs to appear, then bind its property to the corresponding variable. The layout change repeats across the list. Once the index works, connect its previews to a collection detail page so visitors can open each item in full.
Frequently asked questions
What is a CMS index page in Framer?
A CMS index page displays multiple items from one collection, such as a blog page with article previews. Each preview can show selected fields and later link to the item’s full CMS detail page.
How do I create a CMS index page?
Open the Pages panel, choose New CMS Page, select the collection, and choose Index Page. You can also ask a the Agent to create it and describe the hierarchy you want, such as a featured first item.
What does a collection list do on an index page?
A collection list repeats one item layout for the records in a collection. Framer fills each repeated item with its own CMS values, while layout and style changes to the template apply across the list.
How do I connect a layer to a CMS field?
Select a layer inside the repeated item, find the property you want to populate, click its plus icon, and choose Set Variable. Select the matching collection field, such as Image, Title, Date, Summary, or Link.
Can I add another field to every item in a collection list?
Yes. Add and style the layer inside the first repeated item, then bind it to the new CMS field. The collection list repeats that layer and connection for each record without requiring you to edit every preview.
Continue watching
Load more