CMS

Utilizing Collection Lists in Framer (CMS Lesson 4)

Utilizing Collection Lists in Framer (CMS Lesson 4)

Utilizing Collection Lists in Framer (CMS Lesson 4)

Justin

·

9:17

·

28K views

·

About this lesson

Learn how to take full control of your dynamic content using Collection Lists in Framer CMS. In this video, we’ll show you how to add and style Collection Lists, connect them to your CMS using variables, filter and sort content, and customize link behavior within list items. Perfect for building flexible, content-driven sites that scale with ease.

https://www.youtube.com/watch?v=R4bmumHGekw&t=0s Introduction

https://www.youtube.com/watch?v=R4bmumHGekw&t=40s What is a Collection List?

https://www.youtube.com/watch?v=R4bmumHGekw&t=69s Adding an Index Page

https://www.youtube.com/watch?v=R4bmumHGekw&t=122s Adding a Collection List to Another Page

https://www.youtube.com/watch?v=R4bmumHGekw&t=286s Content Properties, Filters, and Sorting CMS Content

https://www.youtube.com/watch?v=R4bmumHGekw&t=428s Customizing Links in a Collection List

https://www.youtube.com/watch?v=R4bmumHGekw&t=514s Wrap Up

Check out the full course here: https://www.framer.com/academy/courses/getting-started-with-framer-cms

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00Collection lists are one of the most0:02flexible ways to bring CMS content into0:05any part of your site. Whether it's a0:07hero section to highlight your latest0:09post, a testimonial slider on your0:11homepage, or a custom callout in your0:13footer, collection lists let you reuse0:16content from your CMS in any layout on0:19any page without duplicating your work.0:22In this lesson, we'll walk you through0:24how to add a collection list to a page,0:26insert custom components, and use0:28variables to connect those components to0:30your CMS fields, giving you full control0:33over how your content looks and0:40behaves. Collection lists let you0:42display CMS items in a repeating layout.0:45So, anytime you need to show a set of0:47dynamic content, collection lists are0:49the way to go. They're connected to your0:51CMS collection, but unlike CMS detail0:54pages, they don't create new pages.0:57Instead, they live on any page on your0:59site and pull in the content you choose1:02automatically. And just like anything1:04else in Framer, you can style and1:06customize each one to fit your design.1:09So, let's walk through how to add a1:11collection list to a page, starting with1:14a common use case, index pages. As we1:17covered in the last lesson, when you1:19create a new CMS page, you'll have the1:21option to choose an index page.1:23Selecting this automatically adds a1:25collection list to the page, pulling in1:27every item from the selected collection.1:30Checking the layers panel, we'll see a1:32new frame with a CMS icon next to it.1:35That's our collection list. If we open1:37up this frame and click on an element1:39within, we can see that it's already1:41connected to a field from our list. For1:44example, the image is connected to our1:46banner field. Title is connected to our1:49title and so on. The best part, it works1:52like a template. So, we only need to1:55design out the first item, and Framer1:57will automatically apply those changes2:00to every item in the list. Collection2:03lists aren't limited to index pages.2:05Like I mentioned before, you can use2:07them on any page of your site. To add2:10one, we'll navigate to a page I've2:12previously designed, then head over to2:14the insert panel, head down to2:16collections, and then drag in any2:19collection we want to include on our2:20page. It's that easy. Now, let's say2:23we've already designed a card with2:25placeholder elements like an image and2:27some text that we'd like to use, but2:29populate it with content from the CMS2:31collection. It's important to know that2:34any element placed within our collection2:36list will automatically have access to2:39content from that collection. So to2:41connect them, we'll use variables. To2:45start, I'll drag my already designed2:47card into the collection list in the2:49layers panel. As soon as I do, you'll2:51see the card automatically repeat, one2:54for each item in the collection. From2:57here, we can delete the layers that were2:59automatically added when we dragged in3:01our collection list. You can move them3:03into the card and replace the3:04placeholder elements, but I prefer to3:06delete them and start with a clean3:08slate. It's totally up to you. Next, we3:11can start binding our cards elements to3:13the CMS. I'll begin with the image.3:16Select it, click the plus icon next to3:18fill in the styles panel, choose set3:20variable, and select the banner field.3:23Just like that, each card is now3:26displaying its own banner image from the3:28collection. We can repeat the same3:30process for the rest of the elements3:32like text, links, and anything else we3:35want to pull from the items in our3:37collection. We can even drop in a3:39component into a collection list and3:41have each instance pull in unique data3:44from your CMS. I've already created a3:47pill component to display different3:48categories for my items and have added a3:51plain text field to display those3:53categories within my CMS collection. So3:56to connect my pill component to the CMS3:58data, I need to first make sure the4:01property I want to connect like the text4:03field is set up as a variable inside the4:06component. Just open the component,4:09select the text, click the plus icon4:11next to the content property, and set4:14variable. Once that's in place, we can4:17go back to our canvas, and drag the4:19component into our collection list.4:21It'll repeat just like the card did4:23before. Now with the component selected,4:26go to the component properties to bind4:28our new variable to the appropriate CMS4:31field. For this, I'll set the variable4:34to category so that it's pulling that4:36information from my collection. And as4:39you can see, each instance of my4:41component is displaying different4:43information based on the CMS field it's4:45pulling data from. Now that we've got4:47our collection list added and styled,4:49let's take a bit more control over what4:51shows up and how it's displayed. That's4:54where the content properties of a4:55collection list come in. I'll select my4:58collection list from my layers panel and5:00head over to the properties where I'll5:01find content which opens up a few5:04options for my list. Source, sorting,5:08filters, pageionation, limit to, and5:11start5:13offset. Source is the CMS collection5:16your list is pulling from. Changing this5:18will change the data being displayed to5:20a different collection that you select.5:23Sorting controls the order of items. You5:26can sort by fields like date, title, or5:29even a custom number field to manually5:31set the display order. If you want to5:33sort things manually, you can go right5:35into the CMS collection and change the5:37order by dragging items up or down. This5:40order will reflect on the5:42canvas. Filters let you narrow down5:45which items appear in the list. For5:47example, if I only want to show the5:49three most recent blog posts marked as5:51featured, I would add a toggle to my5:54collection that allows me to choose5:56which content to label as featured. Set5:59the default to no so that it doesn't6:01make all of my items featured by6:03default. Then choose an item and turn6:06featured to6:08yes. Now, if I look at my filter6:10options, featured or not featured will6:13be in the drop- down list. I'll select6:15featured. And now any item that isn't6:18listed as featured in my collection6:20won't display in my collection list.6:23There are so many other options when it6:25comes to filtering. So we'll cover more6:27advanced filtering techniques in a6:29future lesson. Pageionation is helpful6:32if you're working with a larger6:34collection. It lets you break your6:35collection lists into smaller chunks.6:38Limit two lets you cap how many items6:41appear in the list. It's great if you6:43just want to show the latest three posts6:45or even highlight your top five. And6:48finally, start offset. This lets you6:51skip a set number of items at the6:52beginning of a collection list. Perfect6:55for avoiding duplicates or creating6:57staggered layouts when combining with6:59filters and sorting. These options give7:01you full control over content7:03visibility, even with large or growing7:06CMS collections. Before we wrap up,7:09let's quickly talk about how links work7:11inside a collection list. By default,7:14Framer automatically links the entire7:16collection list item to its7:18corresponding CMS detail page, but only7:21if detail pages have been set up for our7:23collection. This is great for simple7:25setups, but if you want more control7:27over which elements are clickable,7:29you'll need to make a quick adjustment.7:32If you try to add a link to a specific7:34element inside the collection list7:35without changing anything, you'll run7:37into an error because the parent frame7:39already has a link attached. To fix7:42this, we'll simply remove the link from7:44the parent frame first. Now, we're free7:46to add links to any element inside the7:49list item. If you want a specific7:51element like the title or image to link7:53to a CMS detail page, you'll add a link7:56to that element and then set the link to7:58field to the item slug which is8:01automatically pulled in from the CMS8:03collection. This setup also gives you8:05the flexibility to add multiple links8:07within a single collection list item,8:10all connected to different CMS fields if8:13needed. And as we've mentioned in8:15previous lessons, the biggest thing to8:17remember out of all of this is if you8:20change something inside the CMS, like8:22updating a link or changing a headline,8:25that update will automatically appear8:27everywhere that item is used across the8:30site, whether it's a collection list or8:33a detail page. At this point, you've8:35seen just how powerful and flexible the8:37Framer CMS really is. You've learned how8:40to set up collections, items, and8:42fields, build dynamic CMS detail pages8:45using a single reusable layout, and use8:48collection lists to display content8:50anywhere on your site with full control8:53over how it appears. That wraps up the8:56getting started with the framer CMS8:57course. You've now got the tools to8:59create dynamic, scalable sites powered9:02by real content, and now it's time to9:04bring that into your next project. Thank9:07you so much for watching and as always9:09see you in the next one.

Watch on YouTube ↗

‹ Framer Update: REM Sizing for Responsive Type

Site and Page Settings in Framer (Fundamentals Lesson 27) ›

More in this topic

Framer Update: CMS 3.04:13
Framer Update: CMS 3.0
Framer Update14K views · 1 month ago
Ship websites with enterprise needs, at startup speeds0:33
Ship websites with enterprise needs, at startup speeds
Announcement8.3M views · 3 months ago
Framer Update: CMS Dynamic Filters7:25
Framer Update: CMS Dynamic Filters
Framer Update14K views · 3 months ago
Framer Update: CMS Components5:04
Framer Update: CMS Components
Framer Update11K views · 4 months ago
Framer Update: Empty States in CMS Lists3:23
Framer Update: Empty States in CMS Lists
Framer Update4K views · 4 months ago
Wireframer: Blogs and Changelogs with CMS3:40
Wireframer: Blogs and Changelogs with CMS
Framer Update5K views · 8 months ago
On-Page Editing in Framer: A powerful new way to update Framer sites, right in the browser.5:12
On-Page Editing in Framer: A powerful new way to update Framer sites, right in the browser.
CMS10K views · 10 months ago
Framer Event — Introducing On-Page Editing7:29
Framer Event — Introducing On-Page Editing
Event12K views · 10 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.