In this video, we're going to start building our blog post page. To access this page, 1
you go to the pages panel and on the bottom, you have this page with the purple icon. 2
That's the one. I've previously added all this content here, but I'm gonna completely get rid of it 3
and start from scratch. 4
So based on our designs, first thing we need is a navigation bar. 5
We're not going to build it from scratch 6
obviously. We will copy it from our home page and take it from there. 7
So, switch back to the home page, select the entire navbar element. 8
Make sure you're selecting the whole thing and not just the container. Click CTRL+C. Then go back to the 9
blog page. And paste it there. When you paste an object click on the canvas first or you'll get this 10
error message. Webflow needs to know where exactly are you pasting your element. 11
There we go. 12
Well, nothing's visible right now. Because our navbar is white. 13
So let's just style the elements inside our navbar, just like in our designs. Starting with links. Right 14
now they're white. 15
So, we need to have them dark. To do so, we need to apply a combo class first and then style it. 16
Otherwise, it's going to change the original too on the home page. 17
And then apply the combo class to the rest of the links. 18
Same for the nav button, we need an extra combo class. 19
I know, I usually recommend to not have more than one, but it's okay 20
every once in a while. From technological standpoint, there is nothing wrong with it. 21
It's just for us, so that things don't get confusing and cluttered. The button's background is our primary 22
blue with 15% opacity, you can see that in Figma. 23
Lastly the logo. Which we need to export from Figma. 24
Let's check the responsiveness. It's glued to the edges. On our home page 25
navbar is sitting inside the hero section, which has padding. That's why it's not glued to the edges there. 26
But here it's outside of the section. 27
We could put it inside the section here too, but a better option is to just create a combo class for 28
the navbar and add padding directly on it. 29
And that's all, the navigation bar is ready. 30
Moving on to the rest of the block page. 31
We have a headline, image, the content. 32
As usual, we're going to start with a section and a container. 33
The section is gray. 34
That's what we are using on a home page. 35
But for the blog post, we've decided to go with plain white. 36
The thing with the blog post is that you want maximum readability. 37
It's a lengthy content. 38
And if the contrast isn't enough or there is some sort of decreased readability for some other reason, 39
is really going to hurt us. Making a white section is simple, just a new combo class and that's all. 40
Make sure to use some other name, preferably something specific to the base class, like "white section". 41
That says a lot more than just "white". And we make sure it doesn't conflict with any other class. 42
All right now let's add a headline. 43
We already know what to do with this headline, right? 44
We're going to bind it to the CMS item. Excellent. 45
The boundaries of our blog posts in the designs is a little different. 46
We're using a more narrow layout. With a maximum width of 700 pixels. And the maximum width of our generic 47
container here is 1160 pixels. 48
That means, we need to create a different container for our blog post. 49
So, let's give it a combo class or maybe even duplicate the class and give it a maximum width of 700 pixels. 50
All right. 51
That's looking good. 52
Next, we have author and date segment. But we're going to do that in the next video. 53
Stick around.