So, we've created a database for our blog. And that's all cool, but where 1
on our website is that visible? 2
Where are those blog posts, besides it being tucked away somewhere inside Webflow? Well, right now, 3
nowhere. But in upcoming videos, we're going to bring them to light. The moment we create a new collection 4
inside CMS, 5
a new page is automatically created under pages panel. On the top, 6
there are static pages, 7
that's where our home page is and any other page that we created, that is not part of the CMS. On 8
the bottom, 9
we have this page called CMS collection pages. 10
These are master pages, that can be populated by dynamic content from the database. 11
Right now we have one page, blog post template. 12
I call it the master page, Webflow calls it a template. 13
I somehow prefer a master page. 14
Kind of makes more sense. 15
Each CMS collection gets one such page. 16
Right now it's completely blank. 17
Just like any other new page we create. But this page is going to turn into a blog post page from 18
our designs. 19
It works the same way as any other static page, with only one difference. 20
We can bind elements to the database items. 21
Let me demonstrate. 22
For example, we have a headline on our blog post, right? 23
Let's add a headline. If we write text ourselves inside this headline, then this content is going 24
to be static, just like any other page. 25
But because this is a CMS page, we have an extra option under the settings of this headline. Get text 26
from blog posts. 27
If we check this and click on the dropdown, you'll see something familiar. 28
Some of the fields from the collection settings. Headline, Post summary and some dates. 29
Since this is the headline, we can select the headline and voila. 30
Now this headline element isn't static anymore. It's dynamic. And it's pulling content from the database. 31
It's not editable anymore. 32
If you double click nothing happens. We can't put custom text inside this headline. 33
Let me add the other two fields. The image and the post body. Just like we did for the headline, for the 34
image we have to add an image element. We cannot populate a headline element with an image. Or a div block 35
with a headline. The field types and element types have to match. 36
Well not exactly match, but be compatible. 37
For example, headline field inside our CMS is plain text. 38
Wich is compatible with any sort of text element, be it headline, text block or paragraph. 39
Okay, so the same thing we're going to do with image. Click image settings, then get image from the blog 40
posts. Here we only have one option. 41
Main image. 42
Because that's the only field in our database, that is compatible with the image element. Which makes 43
sense. 44
Moment I select the main image field, it will bind and pull the content from the database. 45
Let me just shrink this a bit. 46
Let's add last CMS item - post body. This field in CMS is a rich text field, we never had to use rich 47
text elements so far. And now I can bind this rich text element to the post body field in our database. And 48
there you go it instantly gets populated with a content that is inside the CMS. 49
Now this headline image and text is part of the same blog post. We have 6 in total. Which one shows here 50
it doesn't really matter. 51
Once republished this page, all those 6 blog posts will go live and each one of them will pull their 52
own headline, their own image and their own text. On the top toolbar, we have this option to go through 53
different blog posts and see how they look like. Remember this one? It's the one I create and manually. 54
Right now it's all quite ugly, but we're going to style and build our page, as we usually do. Dynamic content 55
doesn't affect the way we do the designing of the page. 56
So to recap. For each collection that we create inside CMS database, Webflow automatically creates 57
a page for it. 58
This page, unlike other pages, is a dynamic page. 59
It has an ability to bind with fields in the database and pull content from there. Only compatible fields 60
and elements can be bound together. 61
For example, image fields with image elements. Or plain text fields with any type of text element, like 62
headline, text block, link etc. In the next video, we're going to start building and styling this blog post 63
page.