Designing with Collection Lists – Webflow CMS tutorial


Collection lists are one of the two main ways we can design and develop with content from a collection. Here’s a sample collection we created for
a group of team members. From any page in our project, we can access
the Collection List right from the Elements panel, and drag it right onto the Canvas. We want to quickly cover three aspects of
a collection list: the basic layout, binding to a collection (this is super powerful),
and collection list settings. Let’s do basic layout. We’re dragging the collection list and dropping
it right on the Canvas. So we have a bunch of empty purple boxes. And though we’re just getting started, we
can choose our collection from the dropdown, and we can play around with layout options. Regardless of the layout we choose, if we
go to Preview, we’ll see the current design: literally nothing’s there. Let’s go back out of Preview. There’s nothing there because we haven’t referenced
any of our content. Since our collection list gives us access
to anything from a collection, we can drop an element right into any collection item
in our collection list. Let’s make this heading an H3, but it could
be any text element. And we can bind that element right to a specific
field from our collection. This is just getting the name from our team
members. And that’s it. We’re looking at the content — we have an
H3 for each of our items in the collection list. Let’s keep going. We can drag in an image element. And when we’re dropping these elements in,
they’re static. They’re static until we bind them to something
from a collection. And when we do? Each item in our collection list is referencing
the relevant field. All we’re doing is dragging in normal elements
(static elements) and binding them to specific fields in our collection. We can, of course, add styles to any of these. And as we’re adjusting here, we can see that
changes in a collection list are done in lockstep. That is: changing anything in one collection
item affects the others. That’s by design. If we drag in a div block to wrap and style
the content in each item? Those changes are happening in all our collection
items. There’s still a major advantage to using classes
— that is: while everything’s done in lockstep in this collection list, we might want other
collection lists on other pages throughout our project. Of course, classes will empower us make style
changes project-wide. And we’re accelerating here (quite a bit)
so you don’t have to sit through each and every frame, but the idea here is that you
can bind dynamic content to static elements in a collection list. That’s binding. Let’s look at our settings. We can select our Collection List Wrapper
element (or our Collection List element) and adjust our layout at any time. Our collection list settings also let us add
filters. Filters empower us to show only the collection
items we want — collection items that match one or more criteria. We can also choose all sorts of options related
to sort order — how we want the collection items to be sorted. Maybe based on when the collection item was
updated: newest to oldest. If we go back into the CMS and into our collection? And we go inside one of our items to make
a change? Of course, we know that’ll affect how recently
this item has been updated. Which means back in our collection list, we’ll
see that Dale is displayed first. We’re sorting based on when the collection
list was updated. Newest to oldest. We can also put limits on the number of collection
items displayed. This will only display the number of items
specified here. So. Collection lists. We can drop them in anywhere. They give us access to anything from a collection. We can choose our layout, we can bind collection
content to elements inside the list, and we can, of course, configure our settings to
tell the collection list how to sort and display the items in our design.

6 Comments

Add a Comment

Your email address will not be published. Required fields are marked *