In this video, we're going to build that author and date row below the headline. 1
I think the simplest approach would be to use a flexbox for this. Let's add a new empty div block and 2
give it a class - 3
author and date. 4
Then let's add an image. 5
Next, we need a name for the author. 6
Add a regular text block, give it a new class. 7
Style it just like Figma. 8
We need to change the Justify property to something like 9
Center. 10
Next, we have this divider. 11
We could use like a line bracket for this. Or just style a div block with width and a background color. 12
But I think line bracket is easier. 13
I think that's what we are doing inside Figma anyways. 14
We just need a different color for it. 15
And then the date. Let's just reuse the same author text block and even keep the same class. The date is 16
the published date of this particular blog post. 17
We can already bind this to the CMS. We didn't have to create the date field, because every CMS item 18
comes with it. We even have three different date options here. 19
In this case, Published On, is what we need. 20
But as you can see, it disappears. 21
That's because we haven't published our website or any of the blog posts yet. 22
So that date field is empty. 23
Let's use a different date field. Maybe created on or updated on. And later we can switch it back to 24
publish. Or keep it that way. 25
Updated on is a pretty decent date indicated too. With dates 26
we even have an ability to change the date format. 27
This will matter based on where our target audience lives. 28
All right. 29
The distance between divider and text block is 30 pixels. 30
We can adjust that on the divider itself. 31
Actually, on the right side, we only need 15 pixels, because there is already a 15 pixel margin on the left 32
of the date. 33
And lastly, let's add a margin on top of the whole thing to separate it from the headline. 34
All right. All that's looking great. 35
Now here's the thing. 36
This author that we just created, this the static content. When we publish our blog posts, all of them will 37
have the same author. 38
But that's not right, 39
is it? For an independent blogger, 40
sure. 41
It's always the same author. But for a company website, there is always going to be more than one person 42
creating blogs for the website. 43
We need this author information to be dynamic as well. But we haven't created CMS fields for this, 44
so we cannot bind it to the database yet. We're going to do that in the next video.