On this Webflow lesson we take a look at the collection list filter and sort settings. How to sort Webflow data like a pro and how to use collection list filters correctly using Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
okay now that we have listed some of our
movies let's take a look at how we can
start filtering some of these
based on the genre so if we go over to
our properties panel
click on the plus filters we can choose
from several types of
fields that we have created to filter
our content
so if i click on genre some of the
settings that it gives us is equals to
or does not equal to is set or it's not
set
so it's set means is there an existing
value on that field
and then equals it's just whatever the
value we put in here
so if we were to put in here drama and
save this filter
now we're only going to see the the
movies that are of
course tagged as drama so just about
three of them right now
another option for us to filter is that
it gives
us if we let's remove this filter
and it gives us the option to sort the
listings by
specific order we could filter by the
year
typically this works really well with
numbers
so if if it's filtered by year or if
it's filtered by the score
so maybe if we want to show only the top
rated we can show it like this
and so just like that we can see this
the lowest score over here
actually we don't have the score yet so
let's add in that
text field so let's add in here i'm
going to add a quote
and this quote is gonna pull the field
for
score so you can see this score number
is eight
and we can select the settings again
go from smaller smallest to largest or
largest to smallest
just like that and now this one is the
highest rated
so goes from nine and as you scroll down
you're going to see the numbers going
down
so that's pretty cool one thing to to
note is that the collection list
settings gives us the ability to limit
the amount of items we want to display
right so in this case going back to our
example we only want to show
four items even if the listing has a lot
we can show only four and just like that
just like that we can see that it's
limited to
our four value again let me put this in
four blocks right away you can see these
four movies laid out like that
and let's use an h5 like an h4
there we go that looks a little bit
better we're doing all these settings
and updates directly without creating a
class this is just for us to practice
and understand the different types of
settings
another interesting way that we could do
this is we could have
let's say we want to have maybe 16
items and instead of having those 16
items laid out like this in columns
we could add a paginate and what the
paginate does it it shows it limits the
amount of elements so we can turn this
into
four i'm going to remove this paragraph
because
it's getting a little bit busy but over
here we can see the covers
all right we have the four pages and
then preview
two out of four as you can use these
arrows to kind of swipe between these
pages
and this is something we're going to be
doing on one of our
templates as we see here there's a
pagination tool
all right pretty cool one thing to note
is that when you create
a collection what what webflow does
automatically is create a template
whatever the name of that collection you
created so if we open up our entries
template
this entries template is a dynamic
template
what this means is that whatever value
that we put in here let's say we have a
heading for example the h1
i can call this right away like that
without having to create a collection
list
because the collection list component is
to pull
data on other type on other pages that
we create
but the actual template the dynamic
template
allows us to preview all the movies
and have this work as the place where
users would come and play the movie
itself so think about it like the
preview page
this exact same template is what webflow
has created for us
already but it's empty so in this case
we would have to start
applying all the different styles
in order for this to start looking like
our wireframe so i've already gone ahead
and done that
so that we can see how to interact with
these types of dynamic pages so let's
jump into that
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS