0
1
00:00:02,890 --> 00:00:07,450
In this video, we're going to add the pagination. Without splitting blog cards on different pages,
1

2
00:00:07,480 --> 00:00:09,620
every single block card would load.
2

3
00:00:09,630 --> 00:00:15,460
And when we have a lot of blog post, that would make the page load very slowly and wouldn't be optimal.
3

4
00:00:15,790 --> 00:00:16,600
For 20 cards,
4

5
00:00:16,600 --> 00:00:17,190
that's alright.
5

6
00:00:17,200 --> 00:00:22,840
But for 50, 60 and more, that is going to slow down the page considerably. Creating a pagination on collection
6

7
00:00:22,840 --> 00:00:31,840
list. is as easy as ticking a box in the settings panel.
7

8
00:00:31,890 --> 00:00:35,670
So, here we decide how many items should there be displayed per page.
8

9
00:00:35,670 --> 00:00:38,390
We want a number that is suitable for our 3 column grid.
9

10
00:00:38,460 --> 00:00:42,710
So something that is dividable by 3, like 9, 12 etc.
10

11
00:00:42,740 --> 00:00:45,570
10 isn't good, because then you will have empty slots.
11

12
00:00:45,570 --> 00:00:49,920
I'd say anything between nine and 30 is appropriate. Maybe for a small blog,
12

13
00:00:49,920 --> 00:00:54,570
you would want to go on a small side of the scale, to create an impression that there is, you know, more blog
13

14
00:00:54,570 --> 00:00:55,520
posts out there.
14

15
00:00:55,560 --> 00:01:00,240
But for a larger blog, you would want to display a bit more, so users find something interesting without
15

16
00:01:00,240 --> 00:01:04,590
needing to go to the next page. You know, because clicking the next page is an obstacle.
16

17
00:01:04,590 --> 00:01:08,820
It's a little checkpoint, reminding us that we need to go on with our day and stop scrolling.
17

18
00:01:16,330 --> 00:01:19,970
So, besides pagination, there are some other settings for collection lists.
18

19
00:01:19,970 --> 00:01:21,400
Let's quickly have a look at them.
19

20
00:01:21,410 --> 00:01:23,860
Filters are cool and very handy.
20

21
00:01:23,900 --> 00:01:26,360
For example, we could filter post by author.
21

22
00:01:44,700 --> 00:01:46,430
Or posts created this month.
22

23
00:01:53,920 --> 00:01:58,140
Or we could add extra fields for such filtering in our collection fields.
23

24
00:01:58,240 --> 00:02:02,680
Then those fields will show up here and we would be able to filter items based on them.
24

25
00:02:03,070 --> 00:02:05,930
So for example, one way you can do is category filter.
25

26
00:02:05,950 --> 00:02:10,860
So every time we create a blog posts, we would choose a category of the blog,
26

27
00:02:10,870 --> 00:02:11,200
Right?
27

28
00:02:11,230 --> 00:02:13,510
So, we would say maybe this is about cooking.
28

29
00:02:13,510 --> 00:02:21,360
Maybe this is Spanish cuisine, Italian cuisine, French cooking whatever. And then we would have dedicated
29

30
00:02:21,360 --> 00:02:22,920
pages for each category,
30

31
00:02:22,920 --> 00:02:23,220
Right?
31

32
00:02:23,220 --> 00:02:29,370
So, all the blog posts about French cooking, all the blog posts about Chinese food. And on each of this
32

33
00:02:29,370 --> 00:02:31,090
page, then we would create this filter.
33

34
00:02:31,120 --> 00:02:37,890
So show only those that are categorized and have a category of French. And those that have a category
34

35
00:02:37,890 --> 00:02:43,820
of Chinese food and so on. Similar options apply to sorting.
35

36
00:02:43,820 --> 00:02:49,490
We can stort the order of post by many different criteria and rules. And again we can create separate
36

37
00:02:49,490 --> 00:02:53,030
pages for different sort orders and then include those links on top.
37

38
00:02:53,030 --> 00:02:54,590
So users can navigate there.
38

39
00:03:01,110 --> 00:03:03,960
There is one last setting, limiting number of items shown.
39

40
00:03:03,960 --> 00:03:10,700
This is similar to pagination, although, it limits number of items altogether. And adds no extra
40

41
00:03:10,700 --> 00:03:12,860
pages to display other items.
41

42
00:03:12,860 --> 00:03:18,920
A practical example of this would be, similar blog post suggestions underneath an actual blog post.
42

43
00:03:18,920 --> 00:03:24,530
To do this, we would add another dynamic list underneath. We would populate it with blog posts and then limit
43

44
00:03:24,560 --> 00:03:26,030
items to 2 or 3.
44

45
00:03:26,060 --> 00:03:28,590
So it only shows a few posts suggestions.
45

46
00:03:28,610 --> 00:03:31,910
That's how simple and powerful this collection lists settings can be.
46

47
00:03:31,910 --> 00:03:33,350
Possibilities are immense.
47

48
00:03:36,300 --> 00:03:41,520
Once you enable pagination, you get these next and previous buttons to move between the pages. As of
48

49
00:03:41,520 --> 00:03:45,090
now Webflow only has these Next/Previous buttons.
49

50
00:03:45,090 --> 00:03:49,650
They will soon launch support for numbering pages, if they haven't already done that.
50

51
00:03:49,680 --> 00:03:51,420
But this is enough for most cases.
51

52
00:03:51,420 --> 00:03:55,770
In the past, I have used those workarounds because they didn't even have the pagination support at
52

53
00:03:55,770 --> 00:03:56,250
all.
53

54
00:03:56,250 --> 00:03:58,950
The tool is still improving and growing in its capacity.
54

55
00:03:58,950 --> 00:04:01,830
Don't underestimate the challenge these guys are tackling here.
55

56
00:04:01,890 --> 00:04:07,860
Until today no other website builder has even come close to Webflow's capabilities. So styling is quite
56

57
00:04:07,890 --> 00:04:08,280
easy.
57

58
00:04:08,280 --> 00:04:09,420
Just select the button.
58

59
00:04:12,280 --> 00:04:13,540
Give it a background color.
59

60
00:04:29,000 --> 00:04:29,820
Change the text
60

61
00:04:29,810 --> 00:04:30,240
color.
61

62
00:04:48,830 --> 00:04:50,180
Add some more spacing.
62

63
00:05:03,440 --> 00:05:04,710
Add some hover effect.
63

64
00:05:14,370 --> 00:05:22,300
♫
64

65
00:05:32,160 --> 00:05:34,830
Always add hover effects to buttons and links.
65

66
00:05:34,830 --> 00:05:38,930
It's important for users to understand what's an interactive object and what's not.
66

67
00:05:39,030 --> 00:05:41,760
And hover effect is the best way to do that.
67

68
00:05:41,760 --> 00:05:48,090
I was recently reading a biography of Steve Jobs and I read this line when he was saying that, "Technology
68

69
00:05:48,120 --> 00:05:52,320
has to make you feel like, that you can dominate them". And this is so freaking true.
69

70
00:05:52,320 --> 00:05:59,490
That's why simple minimalistic technology and products are always better than complicated products that
70

71
00:05:59,490 --> 00:06:01,550
have a bunch of buttons and dials on them.
71

72
00:06:01,620 --> 00:06:07,260
So, whenever you build your websites and design your websites, never forget usability and never forget
72

73
00:06:07,500 --> 00:06:09,830
how the user is going to interact with it.
73

74
00:06:09,870 --> 00:06:14,880
So make sure, if there is a button make sure the button has a hover effect or some sort of interaction
74

75
00:06:14,880 --> 00:06:18,570
with it, so we can understand that this thing is clickable, right?
75

76
00:06:18,690 --> 00:06:23,010
Or if there is a link, does the link change the color? Does it,
76

77
00:06:23,010 --> 00:06:27,990
is there some sort of indicator, that this is the link and you can click on this and it's going to take
77

78
00:06:27,990 --> 00:06:29,490
us somewhere and so on?
78

79
00:06:29,490 --> 00:06:36,060
It's not that difficult but it does take some paying attention and not being lazy. Because you know,
79

80
00:06:36,060 --> 00:06:40,480
a lot of web designers are quite lazy. Because if they weren't, we wouldn't have so many bad websites
80

81
00:06:40,650 --> 00:06:42,510
that drives us crazy sometimes.
81

82
00:06:42,510 --> 00:06:44,340
Anyway, back to pagination.
82

83
00:06:45,000 --> 00:06:46,730
So, back to styling our button.
83

84
00:06:52,610 --> 00:06:54,940
We can apply the same class to the previous button.
84

85
00:06:59,690 --> 00:07:03,890
The class name doesn't make sense, but I couldn't think of anything that would be better.
85

86
00:07:03,890 --> 00:07:06,110
Maybe I should use pagination button.
86

87
00:07:06,130 --> 00:07:07,220
Yeah, that's a little better.
87

88
00:07:12,040 --> 00:07:16,370
When you select some element of the pagination, you'll get this extra option in the settings.
88

89
00:07:16,390 --> 00:07:21,310
This will show the page count, which is sometimes a useful thing to display. We could style this as well,
89

90
00:07:21,310 --> 00:07:24,490
if you want it. But I think this is enough. And that's it.
90

91
00:07:24,490 --> 00:07:25,680
Our blog grid is done.
91

92
00:07:25,680 --> 00:07:28,900
We just need to make it responsive. And we'll do that in the next video.
92

93
00:07:28,900 --> 00:07:29,370
Stick around.