Now, one last page our blog needs is this blog home page, that grid, that we have designed. Blog home page 1
is going to be a combination of static page with dynamic content. Unlike the blog post page, which is 2
fully dynamic page. 3
What we're going to do is create a regular static page and then insert CMS items inside. 4
So, to get started, create a new page. We will name it Blog. And make sure that URL slug is blog. 5
Starting with navbar. It's exactly the same as the one on our blog post page, so we can copy that one. But 6
instead of copying it's better to create a symbol out of it. 7
Remember the symbols? 8
Right-click on the navbar and select create Symbol. Name it 9
Navbar and we good. 10
Now we can track that symbol right on our blog page. 11
Next we need the usual section and container. 12
We have a little issue with a navbar's background color here. Because we need it to be grey. We could 13
drag it inside a section, but then we would need to change paddings and all that stuff. We could create 14
a combo class and give it a gray background. 15
But that means, we'll need to unlink it from the symbol. Which is not a problem, but it's nice for it to 16
be linked to the symbol. 17
The best option is to wrap the navbar inside another 18
div block and give that div block a background color. 19
All of these options are appropriate and valid. 20
But this one was the best, because I didn't have to alter any of the default elements or the symbols. 21
Now, let's add a headline and subhead. Pretty straightforward. 22
And nothing needs to be tweaked in this case. 23
Now, for the fun part. First, we're going to design a static card, 24
then we will figure it out, how to turn it into a dynamic item that pulls content from CMS. 25
Let's add a new 26
div block and give it a class of blog grid. 27
That's where we'll keep all the blog cards. With a top margin of 60 pixels. Next, 28
we need a new div block named blog card. 29
Let's make this white background. 30
Give the rounded corners and some width. 31
For now, let's give this card a fixed width. We're not going to use a fixed width in the end, because we're 32
going to arrange this in a 3 column layout. 33
But for now, let's do it 34
so we can see properly what we are designing. It disappears when we give it a width. It's empty, 35
that's why. No worries. 36
Next, we need a thumbnail. 37
Your first thought might be to add an image. But think again. If we add an image element, then the shape 38
of the image will be controlled by the image itself. 39
We won't be able to cover a certain part and have the image crop inside as necessary. 40
We've already dealt with this obstacle in previous cases. Just like the last times, 41
the answer is to use a regular div block with a background image. 42
This needs a height. The exact height from the designs 43
will do. 44
No need to replace the place holder image. 45
We'll see live images once we connect this to the CMS. 46
There's just one thing. The block card has rounded corners, but this thumbnail doesn't. It's going outside 47
of the corners with its pointy edges. 48
This happens because by default, overflow is visible on any div block. 49
But if we change the overflow to hidden, on the block card, then that will clip anything that's going 50
outside the boundaries. 51
Hence, rounding the corners on the thumbnail. 52
And there we go. 53
Next, we need content, which we're going to wrap in a div block. 54
Give it a padding of 20 pixels. 55
Let's style the heading and paragraph. For the heading, we can create one of the tags, maybe H2 or H3. 56
Remember, how to style heading tags? Change the tag from the settings, then go to the selector and on the 57
bottom of the dropdown you'll get an ability to select that particular tag. 58
And apply all the according styles from the designs, 22 pixels and Semi Bold and so on. 59
And one last thing, remove the top margin from it. 60
Now, for the author and date block. We'll need a new div block for this. 61
We already have exactly the same block on the post page. So I'm going to try to reuse the same class 62
here. 63
It will need tweaking though. Let's check the classes that we have used there. 64
If we apply these classes, we should get the same results. 65
Copying would be an easier option, but it doesn't work with dynamic items since they are linked. 66
♫ 67
♫ 68
Alright. Now, let's tweak the style by using combo classes. 69
Avatar is 30 pixel in size, instead of 40. 70
Text is 12 pixels. 71
And has different spacing on the side, so let's adjust that too. 72
And finally, the top margin. 73
One thing, I would like to add to this card is a hover effect. 74
One thing we can do is we can add a background shadow on it on the hover. 75
That will be nice interaction. 76
We already know how to create the shadow, right? On the cards, 77
we've done it on the testimonial cards. And we can do exactly the same here. And we can just reuse the 78
same values for the shadow. 79
And let's add a transition of effect, so it's not that abrupt and jerky. 80
There 81
is one more hover effect we can add. 82
We could make the card move a little. 83
This with a shadow will create an effect of card being lifted in the air. 84
Very simple to do in the hover state, add the Transform effect. 85
And on the vertical axis, move about 2 pixels. 86
We need negative two pixels to lift it up. Positive values will move it down. 87
We don't have to add the transition effect, because we have added one for all properties. So that's taken 88
care of the transition for the move as well. 89
That's why I like using all properties transition instead of individual one for each attribute. 90
Excellent the card is ready. But we're not going to connect it to the CMS just yet. 91
We'll do that in the next video. 92
Right now, let's just finish up the page. 93
We need to add the footer. Which is easy, since we just need to drag a footer symbol on the page. 94
And done. Super easy. 95
Now, let's link to this blog page. So people can access this blog page through the navbar or through 96
the footer. 97
Then select the link and go to Settings panel. 98
Connect it to the block page, which now shows up in a dropdown. And same thing in the footer. 99
And let's not forget the home page navbar, because the navigation bar there isn't connected to a symbol. 100
And that's all. 101
Now the blog page can be accessed from anywhere on the site. 102
All right. 103
Up next. We'll connect the grid to the CMS. 104
Stick around.