0
1
00:00:02,970 --> 00:00:07,020
So, we've created a database for our blog. And that's all cool, but where
1

2
00:00:07,020 --> 00:00:08,620
on our website is that visible?
2

3
00:00:08,640 --> 00:00:13,740
Where are those blog posts, besides it being tucked away somewhere inside Webflow? Well, right now,
3

4
00:00:13,740 --> 00:00:18,780
nowhere. But in upcoming videos, we're going to bring them to light. The moment we create a new collection
4

5
00:00:18,780 --> 00:00:19,840
inside CMS,
5

6
00:00:19,860 --> 00:00:24,180
a new page is automatically created under pages panel. On the top,
6

7
00:00:24,180 --> 00:00:25,560
there are static pages,
7

8
00:00:25,560 --> 00:00:30,900
that's where our home page is and any other page that we created, that is not part of the CMS. On
8

9
00:00:30,900 --> 00:00:31,350
the bottom,
9

10
00:00:31,350 --> 00:00:34,780
we have this page called CMS collection pages.
10

11
00:00:34,800 --> 00:00:40,190
These are master pages, that can be populated by dynamic content from the database.
11

12
00:00:40,200 --> 00:00:42,440
Right now we have one page, blog post template.
12

13
00:00:42,450 --> 00:00:45,320
I call it the master page, Webflow calls it a template.
13

14
00:00:45,330 --> 00:00:47,130
I somehow prefer a master page.
14

15
00:00:47,130 --> 00:00:48,600
Kind of makes more sense.
15

16
00:00:48,600 --> 00:00:51,210
Each CMS collection gets one such page.
16

17
00:00:51,210 --> 00:00:52,800
Right now it's completely blank.
17

18
00:00:52,800 --> 00:00:58,050
Just like any other new page we create. But this page is going to turn into a blog post page from
18

19
00:00:58,050 --> 00:00:59,010
our designs.
19

20
00:00:59,010 --> 00:01:02,850
It works the same way as any other static page, with only one difference.
20

21
00:01:02,940 --> 00:01:05,880
We can bind elements to the database items.
21

22
00:01:05,880 --> 00:01:06,750
Let me demonstrate.
22

23
00:01:09,470 --> 00:01:12,590
For example, we have a headline on our blog post, right?
23

24
00:01:12,590 --> 00:01:18,350
Let's add a headline. If we write text ourselves inside this headline, then this content is going
24

25
00:01:18,350 --> 00:01:20,660
to be static, just like any other page.
25

26
00:01:20,720 --> 00:01:27,650
But because this is a CMS page, we have an extra option under the settings of this headline. Get text
26

27
00:01:27,650 --> 00:01:28,930
from blog posts.
27

28
00:01:29,060 --> 00:01:32,710
If we check this and click on the dropdown, you'll see something familiar.
28

29
00:01:32,870 --> 00:01:37,070
Some of the fields from the collection settings. Headline, Post summary and some dates.
29

30
00:01:37,070 --> 00:01:40,490
Since this is the headline, we can select the headline and voila.
30

31
00:01:40,490 --> 00:01:46,520
Now this headline element isn't static anymore. It's dynamic. And it's pulling content from the database.
31

32
00:01:46,520 --> 00:01:47,800
It's not editable anymore.
32

33
00:01:47,810 --> 00:01:52,040
If you double click nothing happens. We can't put custom text inside this headline.
33

34
00:01:52,040 --> 00:01:56,780
Let me add the other two fields. The image and the post body. Just like we did for the headline, for the
34

35
00:01:56,780 --> 00:02:02,450
image we have to add an image element. We cannot populate a headline element with an image. Or a div block
35

36
00:02:02,450 --> 00:02:06,150
with a headline. The field types and element types have to match.
36

37
00:02:06,260 --> 00:02:08,960
Well not exactly match, but be compatible.
37

38
00:02:08,960 --> 00:02:12,380
For example, headline field inside our CMS is plain text.
38

39
00:02:12,440 --> 00:02:17,610
Wich is compatible with any sort of text element, be it headline, text block or paragraph.
39

40
00:02:17,730 --> 00:02:22,850
Okay, so the same thing we're going to do with image. Click image settings, then get image from the blog
40

41
00:02:22,850 --> 00:02:25,260
posts. Here we only have one option.
41

42
00:02:25,260 --> 00:02:25,920
Main image.
42

43
00:02:25,930 --> 00:02:30,560
Because that's the only field in our database, that is compatible with the image element. Which makes
43

44
00:02:30,560 --> 00:02:31,120
sense.
44

45
00:02:31,140 --> 00:02:36,250
Moment I select the main image field, it will bind and pull the content from the database.
45

46
00:02:36,320 --> 00:02:37,520
Let me just shrink this a bit.
46

47
00:02:40,770 --> 00:02:47,550
Let's add last CMS item - post body. This field in CMS is a rich text field, we never had to use rich
47

48
00:02:47,550 --> 00:02:56,020
text elements so far. And now I can bind this rich text element to the post body field in our database. And
48

49
00:02:56,020 --> 00:03:00,670
there you go it instantly gets populated with a content that is inside the CMS.
49

50
00:03:03,440 --> 00:03:09,620
Now this headline image and text is part of the same blog post. We have 6 in total. Which one shows here
50

51
00:03:09,620 --> 00:03:10,760
it doesn't really matter.
51

52
00:03:10,790 --> 00:03:17,000
Once republished this page, all those 6 blog posts will go live and each one of them will pull their
52

53
00:03:17,000 --> 00:03:23,870
own headline, their own image and their own text. On the top toolbar, we have this option to go through
53

54
00:03:24,350 --> 00:03:30,610
different blog posts and see how they look like. Remember this one? It's the one I create and manually.
54

55
00:03:30,850 --> 00:03:36,430
Right now it's all quite ugly, but we're going to style and build our page, as we usually do. Dynamic content
55

56
00:03:36,460 --> 00:03:39,110
doesn't affect the way we do the designing of the page.
56

57
00:03:39,340 --> 00:03:44,800
So to recap. For each collection that we create inside CMS database, Webflow automatically creates
57

58
00:03:44,800 --> 00:03:45,580
a page for it.
58

59
00:03:45,580 --> 00:03:48,320
This page, unlike other pages, is a dynamic page.
59

60
00:03:48,370 --> 00:03:54,100
It has an ability to bind with fields in the database and pull content from there. Only compatible fields
60

61
00:03:54,130 --> 00:03:56,430
and elements can be bound together.
61

62
00:03:56,470 --> 00:04:01,930
For example, image fields with image elements. Or plain text fields with any type of text element, like
62

63
00:04:01,930 --> 00:04:08,020
headline, text block, link etc. In the next video, we're going to start building and styling this blog post
63

64
00:04:08,020 --> 00:04:08,440
page.