Before we start designing and building our master blog post page. We have to first create a database 1
for our blog. 2
That happens from Webflow CMS, which we can access right here. 3
There is a link to video tutorials by Webflow. 4
They have this place on the website called Webflow University. 5
There is great content there and they cover every aspect of Webflow. 6
I'd definitely recommend to get familiar with it. 7
So, the CMS or the content database of our website is broken down in what's called collections. 8
Imagine a collection as an independent spreadsheet. 9
Let's say if we had a very large website like Udemy, we would have one spreadsheet for all the courses. 10
One spreadsheet for all the blog posts, one spreadsheet for all the help and support pages and so on. 11
Let's create our first collection and see what happens. In our project, 12
we need a collection for blog posts. 13
That's where we will keep our blog posts, with their headlines, images, text etc. 14
Here we have some options to name the collection, some settings, and important part, creating fields that 15
will be part of this collection. 16
Again, think of this as a spreadsheet. 17
When you create a new one it's empty. 18
So, you have to add new columns, right? And you will title these columns like headline, body tags, URL 19
to the image, etc. 20
That's basically what this is. And each row is part of one group, that makes a particular blog post. 21
Webflow here has collection templates. 22
It's to help us get started on some common collections that we might create. 23
Needless to say first one is blog posts. 24
Probably the most common collection for everyone. Once you click on it, 25
Webflow will create new collection, with some needed items to get us started. 26
Let's go through each one and edit them as we need for our blog. 27
First, we have a collection name. 28
This isn't a big deal 29
what you name, it's internal and not visible to the public. 30
Webflow named it blog posts, which we can keep. 31
Next, is collection URL. 32
This is how the URL of each blog post will be structured, just like it's showing in the example below. 33
It's the word that comes right after the domain. 34
Here I prefer using the word "blog". 35
It's much more specific than the word "post". 36
It's a bit more common to use blog rather than a post. 37
And now the important stuff. 38
This is what each of our blog posts are made of. 39
Each field is a type of content. 40
There are many different types of content. 41
For example, there is plain text, 42
there is rich text- more about that later, 43
there is image, there is a color, 44
there is a switch - to turn something on or off. 45
Let's actually look at our blog post and see what sort of fields we need. 46
So, first, we have a headline, right? That in Webflow is same as the name of the blog post. 47
Well, it's not exact the same, but we can turn it into a headline. And making the name and headline 48
the same thing. 49
Help text underneath is for us and for the team members who are going to create new blog posts. 50
No need to put in here anything, the title headline says it all. 51
Then we have an author and a date. 52
We'll worry about the author later. For the date, 53
we actually don't need to add any extra field. Every new blog post that we create is going to come with 54
a creation date. 55
That's why it's not included inside this list of fields. 56
Moving on to the next. 57
We have a main image of a blog post. Webflow has already included such failed. We can move it on top 58
up to the headline, to follow the order. 59
The order doesn't really matter, it's just for us. 60
Next in our blog, we have a body of the post. 61
Webflow has included a field for that too. 62
This field has 2 extra options, minimum and maximum characters. 63
That's if we need to add some sort of limitation to the content of our blog. 64
I'd say no need. 65
And finally, again we have an author, which this time has little more information on it. 66
We'll worry about the author later. 67
We're going to create a separate collection for authors. Post summary isn't really on our blog page, but 68
we will need it on our blog home page, where we show all of our blog posts in cards. In post summary, 69
it's a good idea to limit the number of characters. Cards have a very strict layout, so we don't want 70
a summary to be way too long. In our designs, 71
we have used a summary that is maximum 3 lines. That is about 140 characters long. 72
Now, as for the thumbnail image, that's something that goes on the blog card. 73
We can have that as an independent field or we can just reuse the same main image. 74
Will make it easier to create new blog posts. Less things to upload. Feature and color, 75
we don't really need them, in this case. So let's get rid of them. 76
And there you go. 77
We have 4 fields that is going to make up each of our blog posts. On the right-hand side 78
we have editor preview, that shows all these 4 fields that we have in our collection. 79
This form is what we will fill out each time we want to create a new blog post. 80
OK. 81
Click create collection to finish this step. And that's all, our blog post database is now ready. 82
So to recap, we have this ability to add a database to our website. 83
In other words a CMS, 84
a content management system. Within this database, 85
we have an ability to create many different collections. 86
Collections are sort of spreadsheets, that will hold all the content that is part of it. 87
For example, blog posts. That's a collection. And all blog posts going to one spreadsheet. Each blog post 88
is made of certain content, like headline, main image and body of the posts. 89
These are called collection fields and we have full control over these. 90
What we add and what we remove. In the next video, we're going to add new blog posts to our CMS stick around.