0
1
00:00:02,610 --> 00:00:08,190
Before we start designing and building our master blog post page. We have to first create a database
1

2
00:00:08,190 --> 00:00:09,000
for our blog.
2

3
00:00:09,000 --> 00:00:13,680
That happens from Webflow CMS, which we can access right here.
3

4
00:00:13,710 --> 00:00:15,780
There is a link to video tutorials by Webflow.
4

5
00:00:15,780 --> 00:00:18,810
They have this place on the website called Webflow University.
5

6
00:00:18,810 --> 00:00:22,520
There is great content there and they cover every aspect of Webflow.
6

7
00:00:22,530 --> 00:00:24,690
I'd definitely recommend to get familiar with it.
7

8
00:00:27,630 --> 00:00:32,480
So, the CMS or the content database of our website is broken down in what's called collections.
8

9
00:00:32,490 --> 00:00:35,070
Imagine a collection as an independent spreadsheet.
9

10
00:00:35,190 --> 00:00:40,920
Let's say if we had a very large website like Udemy, we would have one spreadsheet for all the courses.
10

11
00:00:40,920 --> 00:00:46,650
One spreadsheet for all the blog posts, one spreadsheet for all the help and support pages and so on.
11

12
00:00:46,650 --> 00:00:50,490
Let's create our first collection and see what happens. In our project,
12

13
00:00:50,490 --> 00:00:52,470
we need a collection for blog posts.
13

14
00:00:52,470 --> 00:00:57,530
That's where we will keep our blog posts, with their headlines, images, text etc.
14

15
00:00:57,540 --> 00:01:02,550
Here we have some options to name the collection, some settings, and important part, creating fields that
15

16
00:01:02,550 --> 00:01:03,970
will be part of this collection.
16

17
00:01:03,990 --> 00:01:05,760
Again, think of this as a spreadsheet.
17

18
00:01:05,820 --> 00:01:07,660
When you create a new one it's empty.
18

19
00:01:07,680 --> 00:01:13,320
So, you have to add new columns, right? And you will title these columns like headline, body tags, URL
19

20
00:01:13,320 --> 00:01:14,930
to the image, etc.
20

21
00:01:14,970 --> 00:01:19,920
That's basically what this is. And each row is part of one group, that makes a particular blog post.
21

22
00:01:22,820 --> 00:01:24,910
Webflow here has collection templates.
22

23
00:01:24,940 --> 00:01:28,440
It's to help us get started on some common collections that we might create.
23

24
00:01:28,490 --> 00:01:30,830
Needless to say first one is blog posts.
24

25
00:01:30,860 --> 00:01:34,100
Probably the most common collection for everyone. Once you click on it,
25

26
00:01:34,100 --> 00:01:38,210
Webflow will create new collection, with some needed items to get us started.
26

27
00:01:38,210 --> 00:01:42,380
Let's go through each one and edit them as we need for our blog.
27

28
00:01:42,380 --> 00:01:43,870
First, we have a collection name.
28

29
00:01:43,880 --> 00:01:44,870
This isn't a big deal
29

30
00:01:44,870 --> 00:01:48,180
what you name, it's internal and not visible to the public.
30

31
00:01:48,290 --> 00:01:50,810
Webflow named it blog posts, which we can keep.
31

32
00:01:50,810 --> 00:01:52,220
Next, is collection URL.
32

33
00:01:52,220 --> 00:01:57,320
This is how the URL of each blog post will be structured, just like it's showing in the example below.
33

34
00:01:57,380 --> 00:02:00,200
It's the word that comes right after the domain.
34

35
00:02:00,230 --> 00:02:02,310
Here I prefer using the word "blog".
35

36
00:02:02,450 --> 00:02:05,010
It's much more specific than the word "post".
36

37
00:02:05,050 --> 00:02:07,490
It's a bit more common to use blog rather than a post.
37

38
00:02:07,610 --> 00:02:09,080
And now the important stuff.
38

39
00:02:09,080 --> 00:02:11,220
This is what each of our blog posts are made of.
39

40
00:02:11,240 --> 00:02:13,250
Each field is a type of content.
40

41
00:02:13,250 --> 00:02:14,860
There are many different types of content.
41

42
00:02:14,860 --> 00:02:16,700
For example, there is plain text,
42

43
00:02:16,760 --> 00:02:19,440
there is rich text- more about that later,
43

44
00:02:19,460 --> 00:02:21,110
there is image, there is a color,
44

45
00:02:21,110 --> 00:02:24,120
there is a switch - to turn something on or off.
45

46
00:02:24,140 --> 00:02:27,400
Let's actually look at our blog post and see what sort of fields we need.
46

47
00:02:30,460 --> 00:02:36,110
So, first, we have a headline, right? That in Webflow is same as the name of the blog post.
47

48
00:02:36,110 --> 00:02:40,760
Well, it's not exact the same, but we can turn it into a headline. And making the name and headline
48

49
00:02:40,760 --> 00:02:41,830
the same thing.
49

50
00:02:41,840 --> 00:02:46,370
Help text underneath is for us and for the team members who are going to create new blog posts.
50

51
00:02:46,370 --> 00:02:49,460
No need to put in here anything, the title headline says it all.
51

52
00:02:50,730 --> 00:02:52,320
Then we have an author and a date.
52

53
00:02:52,320 --> 00:02:54,780
We'll worry about the author later. For the date,
53

54
00:02:54,780 --> 00:02:59,780
we actually don't need to add any extra field. Every new blog post that we create is going to come with
54

55
00:02:59,780 --> 00:03:00,720
a creation date.
55

56
00:03:00,720 --> 00:03:03,430
That's why it's not included inside this list of fields.
56

57
00:03:03,480 --> 00:03:04,450
Moving on to the next.
57

58
00:03:04,440 --> 00:03:11,630
We have a main image of a blog post. Webflow has already included such failed. We can move it on top
58

59
00:03:11,710 --> 00:03:13,790
up to the headline, to follow the order.
59

60
00:03:13,790 --> 00:03:15,760
The order doesn't really matter, it's just for us.
60

61
00:03:19,600 --> 00:03:22,450
Next in our blog, we have a body of the post.
61

62
00:03:22,460 --> 00:03:24,840
Webflow has included a field for that too.
62

63
00:03:24,850 --> 00:03:28,300
This field has 2 extra options, minimum and maximum characters.
63

64
00:03:28,300 --> 00:03:32,770
That's if we need to add some sort of limitation to the content of our blog.
64

65
00:03:32,800 --> 00:03:34,470
I'd say no need.
65

66
00:03:34,570 --> 00:03:39,110
And finally, again we have an author, which this time has little more information on it.
66

67
00:03:39,190 --> 00:03:40,660
We'll worry about the author later.
67

68
00:03:40,660 --> 00:03:47,560
We're going to create a separate collection for authors. Post summary isn't really on our blog page, but
68

69
00:03:47,560 --> 00:03:53,590
we will need it on our blog home page, where we show all of our blog posts in cards. In post summary,
69

70
00:03:53,590 --> 00:03:58,210
it's a good idea to limit the number of characters. Cards have a very strict layout, so we don't want
70

71
00:03:58,210 --> 00:04:01,120
a summary to be way too long. In our designs,
71

72
00:04:01,120 --> 00:04:09,650
we have used a summary that is maximum 3 lines. That is about 140 characters long.
72

73
00:04:09,660 --> 00:04:13,230
Now, as for the thumbnail image, that's something that goes on the blog card.
73

74
00:04:13,230 --> 00:04:17,610
We can have that as an independent field or we can just reuse the same main image.
74

75
00:04:17,700 --> 00:04:23,230
Will make it easier to create new blog posts. Less things to upload. Feature and color,
75

76
00:04:23,240 --> 00:04:28,870
we don't really need them, in this case. So let's get rid of them.
76

77
00:04:29,010 --> 00:04:29,520
And there you go.
77

78
00:04:29,520 --> 00:04:34,080
We have 4 fields that is going to make up each of our blog posts. On the right-hand side
78

79
00:04:34,080 --> 00:04:38,280
we have editor preview, that shows all these 4 fields that we have in our collection.
79

80
00:04:38,280 --> 00:04:42,270
This form is what we will fill out each time we want to create a new blog post.
80

81
00:04:42,290 --> 00:04:42,540
OK.
81

82
00:04:42,540 --> 00:04:48,590
Click create collection to finish this step. And that's all, our blog post database is now ready.
82

83
00:04:48,600 --> 00:04:52,250
So to recap, we have this ability to add a database to our website.
83

84
00:04:52,260 --> 00:04:53,700
In other words a CMS,
84

85
00:04:53,700 --> 00:04:56,180
a content management system. Within this database,
85

86
00:04:56,190 --> 00:04:58,800
we have an ability to create many different collections.
86

87
00:04:58,800 --> 00:05:02,520
Collections are sort of spreadsheets, that will hold all the content that is part of it.
87

88
00:05:02,520 --> 00:05:08,160
For example, blog posts. That's a collection. And all blog posts going to one spreadsheet. Each blog post
88

89
00:05:08,190 --> 00:05:12,560
is made of certain content, like headline, main image and body of the posts.
89

90
00:05:12,570 --> 00:05:16,500
These are called collection fields and we have full control over these.
90

91
00:05:16,500 --> 00:05:22,290
What we add and what we remove. In the next video, we're going to add new blog posts to our CMS stick around.