In this video, we're going to add the pagination. Without splitting blog cards on different pages, 1
every single block card would load. 2
And when we have a lot of blog post, that would make the page load very slowly and wouldn't be optimal. 3
For 20 cards, 4
that's alright. 5
But for 50, 60 and more, that is going to slow down the page considerably. Creating a pagination on collection 6
list. is as easy as ticking a box in the settings panel. 7
So, here we decide how many items should there be displayed per page. 8
We want a number that is suitable for our 3 column grid. 9
So something that is dividable by 3, like 9, 12 etc. 10
10 isn't good, because then you will have empty slots. 11
I'd say anything between nine and 30 is appropriate. Maybe for a small blog, 12
you would want to go on a small side of the scale, to create an impression that there is, you know, more blog 13
posts out there. 14
But for a larger blog, you would want to display a bit more, so users find something interesting without 15
needing to go to the next page. You know, because clicking the next page is an obstacle. 16
It's a little checkpoint, reminding us that we need to go on with our day and stop scrolling. 17
So, besides pagination, there are some other settings for collection lists. 18
Let's quickly have a look at them. 19
Filters are cool and very handy. 20
For example, we could filter post by author. 21
Or posts created this month. 22
Or we could add extra fields for such filtering in our collection fields. 23
Then those fields will show up here and we would be able to filter items based on them. 24
So for example, one way you can do is category filter. 25
So every time we create a blog posts, we would choose a category of the blog, 26
Right? 27
So, we would say maybe this is about cooking. 28
Maybe this is Spanish cuisine, Italian cuisine, French cooking whatever. And then we would have dedicated 29
pages for each category, 30
Right? 31
So, all the blog posts about French cooking, all the blog posts about Chinese food. And on each of this 32
page, then we would create this filter. 33
So show only those that are categorized and have a category of French. And those that have a category 34
of Chinese food and so on. Similar options apply to sorting. 35
We can stort the order of post by many different criteria and rules. And again we can create separate 36
pages for different sort orders and then include those links on top. 37
So users can navigate there. 38
There is one last setting, limiting number of items shown. 39
This is similar to pagination, although, it limits number of items altogether. And adds no extra 40
pages to display other items. 41
A practical example of this would be, similar blog post suggestions underneath an actual blog post. 42
To do this, we would add another dynamic list underneath. We would populate it with blog posts and then limit 43
items to 2 or 3. 44
So it only shows a few posts suggestions. 45
That's how simple and powerful this collection lists settings can be. 46
Possibilities are immense. 47
Once you enable pagination, you get these next and previous buttons to move between the pages. As of 48
now Webflow only has these Next/Previous buttons. 49
They will soon launch support for numbering pages, if they haven't already done that. 50
But this is enough for most cases. 51
In the past, I have used those workarounds because they didn't even have the pagination support at 52
all. 53
The tool is still improving and growing in its capacity. 54
Don't underestimate the challenge these guys are tackling here. 55
Until today no other website builder has even come close to Webflow's capabilities. So styling is quite 56
easy. 57
Just select the button. 58
Give it a background color. 59
Change the text 60
color. 61
Add some more spacing. 62
Add some hover effect. 63
♫ 64
Always add hover effects to buttons and links. 65
It's important for users to understand what's an interactive object and what's not. 66
And hover effect is the best way to do that. 67
I was recently reading a biography of Steve Jobs and I read this line when he was saying that, "Technology 68
has to make you feel like, that you can dominate them". And this is so freaking true. 69
That's why simple minimalistic technology and products are always better than complicated products that 70
have a bunch of buttons and dials on them. 71
So, whenever you build your websites and design your websites, never forget usability and never forget 72
how the user is going to interact with it. 73
So make sure, if there is a button make sure the button has a hover effect or some sort of interaction 74
with it, so we can understand that this thing is clickable, right? 75
Or if there is a link, does the link change the color? Does it, 76
is there some sort of indicator, that this is the link and you can click on this and it's going to take 77
us somewhere and so on? 78
It's not that difficult but it does take some paying attention and not being lazy. Because you know, 79
a lot of web designers are quite lazy. Because if they weren't, we wouldn't have so many bad websites 80
that drives us crazy sometimes. 81
Anyway, back to pagination. 82
So, back to styling our button. 83
We can apply the same class to the previous button. 84
The class name doesn't make sense, but I couldn't think of anything that would be better. 85
Maybe I should use pagination button. 86
Yeah, that's a little better. 87
When you select some element of the pagination, you'll get this extra option in the settings. 88
This will show the page count, which is sometimes a useful thing to display. We could style this as well, 89
if you want it. But I think this is enough. And that's it. 90
Our blog grid is done. 91
We just need to make it responsive. And we'll do that in the next video. 92
Stick around.