0
1
00:00:02,850 --> 00:00:09,360
Now, one last page our blog needs is this blog home page, that grid, that we have designed. Blog home page
1

2
00:00:09,390 --> 00:00:15,690
is going to be a combination of static page with dynamic content. Unlike the blog post page, which is
2

3
00:00:15,690 --> 00:00:17,160
fully dynamic page.
3

4
00:00:17,160 --> 00:00:22,800
What we're going to do is create a regular static page and then insert CMS items inside.
4

5
00:00:22,920 --> 00:00:31,360
So, to get started, create a new page. We will name it Blog. And make sure that URL slug is blog.
5

6
00:00:36,020 --> 00:00:41,720
Starting with navbar. It's exactly the same as the one on our blog post page, so we can copy that one. But
6

7
00:00:41,720 --> 00:00:44,720
instead of copying it's better to create a symbol out of it.
7

8
00:00:44,720 --> 00:00:45,700
Remember the symbols?
8

9
00:00:48,310 --> 00:00:52,660
Right-click on the navbar and select create Symbol. Name it
9

10
00:00:52,660 --> 00:00:54,030
Navbar and we good.
10

11
00:00:57,200 --> 00:01:07,720
Now we can track that symbol right on our blog page.
11

12
00:01:07,730 --> 00:01:27,210
Next we need the usual section and container.
12

13
00:01:27,450 --> 00:01:32,640
We have a little issue with a navbar's background color here. Because we need it to be grey. We could
13

14
00:01:32,640 --> 00:01:38,160
drag it inside a section, but then we would need to change paddings and all that stuff. We could create
14

15
00:01:38,160 --> 00:01:40,680
a combo class and give it a gray background.
15

16
00:01:40,680 --> 00:01:45,870
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

17
00:01:45,870 --> 00:01:47,110
be linked to the symbol.
17

18
00:01:47,130 --> 00:01:50,700
The best option is to wrap the navbar inside another
18

19
00:01:50,700 --> 00:01:53,220
div block and give that div block a background color.
19

20
00:02:16,760 --> 00:02:18,970
All of these options are appropriate and valid.
20

21
00:02:19,100 --> 00:02:25,930
But this one was the best, because I didn't have to alter any of the default elements or the symbols.
21

22
00:02:25,940 --> 00:02:29,030
Now, let's add a headline and subhead. Pretty straightforward.
22

23
00:02:45,010 --> 00:02:46,990
And nothing needs to be tweaked in this case.
23

24
00:02:49,680 --> 00:02:53,180
Now, for the fun part. First, we're going to design a static card,
24

25
00:02:53,280 --> 00:02:58,580
then we will figure it out, how to turn it into a dynamic item that pulls content from CMS.
25

26
00:02:58,620 --> 00:02:59,640
Let's add a new
26

27
00:02:59,640 --> 00:03:10,230
div block and give it a class of blog grid.
27

28
00:03:10,390 --> 00:03:16,600
That's where we'll keep all the blog cards. With a top margin of 60 pixels. Next,
28

29
00:03:16,600 --> 00:03:19,150
we need a new div block named blog card.
29

30
00:03:26,000 --> 00:03:27,470
Let's make this white background.
30

31
00:03:35,150 --> 00:03:37,480
Give the rounded corners and some width.
31

32
00:03:42,980 --> 00:03:48,230
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

33
00:03:48,230 --> 00:03:50,800
going to arrange this in a 3 column layout.
33

34
00:03:50,900 --> 00:03:52,370
But for now, let's do it
34

35
00:03:52,370 --> 00:03:58,040
so we can see properly what we are designing. It disappears when we give it a width. It's empty,
35

36
00:03:58,040 --> 00:03:59,540
that's why. No worries.
36

37
00:03:59,540 --> 00:04:01,130
Next, we need a thumbnail.
37

38
00:04:01,190 --> 00:04:06,050
Your first thought might be to add an image. But think again. If we add an image element, then the shape
38

39
00:04:06,050 --> 00:04:08,420
of the image will be controlled by the image itself.
39

40
00:04:08,420 --> 00:04:12,850
We won't be able to cover a certain part and have the image crop inside as necessary.
40

41
00:04:12,860 --> 00:04:17,150
We've already dealt with this obstacle in previous cases. Just like the last times,
41

42
00:04:17,150 --> 00:04:20,230
the answer is to use a regular div block with a background image.
42

43
00:04:31,570 --> 00:04:34,100
This needs a height. The exact height from the designs
43

44
00:04:34,100 --> 00:04:34,600
will do.
44

45
00:04:44,540 --> 00:04:46,940
No need to replace the place holder image.
45

46
00:04:46,940 --> 00:04:50,180
We'll see live images once we connect this to the CMS.
46

47
00:04:53,850 --> 00:04:59,520
There's just one thing. The block card has rounded corners, but this thumbnail doesn't. It's going outside
47

48
00:04:59,520 --> 00:05:01,650
of the corners with its pointy edges.
48

49
00:05:01,650 --> 00:05:06,310
This happens because by default, overflow is visible on any div block.
49

50
00:05:06,540 --> 00:05:11,640
But if we change the overflow to hidden, on the block card, then that will clip anything that's going
50

51
00:05:11,700 --> 00:05:13,200
outside the boundaries.
51

52
00:05:13,200 --> 00:05:15,740
Hence, rounding the corners on the thumbnail.
52

53
00:05:15,870 --> 00:05:16,860
And there we go.
53

54
00:05:16,860 --> 00:05:30,770
Next, we need content, which we're going to wrap in a div block.
54

55
00:05:31,110 --> 00:05:32,820
Give it a padding of 20 pixels.
55

56
00:06:00,100 --> 00:06:07,720
Let's style the heading and paragraph. For the heading, we can create one of the tags, maybe H2 or H3.
56

57
00:06:07,810 --> 00:06:13,120
Remember, how to style heading tags? Change the tag from the settings, then go to the selector and on the
57

58
00:06:13,120 --> 00:06:17,040
bottom of the dropdown you'll get an ability to select that particular tag.
58

59
00:06:22,500 --> 00:06:37,140
And apply all the according styles from the designs, 22 pixels and Semi Bold and so on.
59

60
00:06:43,440 --> 00:06:51,810
And one last thing, remove the top margin from it.
60

61
00:07:19,180 --> 00:07:25,170
Now, for the author and date block. We'll need a new div block for this.
61

62
00:07:25,190 --> 00:07:29,900
We already have exactly the same block on the post page. So I'm going to try to reuse the same class
62

63
00:07:29,900 --> 00:07:30,460
here.
63

64
00:07:30,470 --> 00:07:33,740
It will need tweaking though. Let's check the classes that we have used there.
64

65
00:07:41,080 --> 00:07:43,780
If we apply these classes, we should get the same results.
65

66
00:07:43,780 --> 00:07:49,980
Copying would be an easier option, but it doesn't work with dynamic items since they are linked.
66

67
00:08:40,780 --> 00:08:40,980
♫
67

68
00:08:44,160 --> 00:08:50,540
♫
68

69
00:08:52,970 --> 00:09:05,560
Alright. Now, let's tweak the style by using combo classes.
69

70
00:09:05,620 --> 00:09:12,980
Avatar is 30 pixel in size, instead of 40.
70

71
00:09:17,210 --> 00:09:18,530
Text is 12 pixels.
71

72
00:09:21,280 --> 00:09:24,790
And has different spacing on the side, so let's adjust that too.
72

73
00:09:54,720 --> 00:10:09,650
And finally, the top margin.
73

74
00:10:09,750 --> 00:10:13,140
One thing, I would like to add to this card is a hover effect.
74

75
00:10:13,140 --> 00:10:16,660
One thing we can do is we can add a background shadow on it on the hover.
75

76
00:10:16,690 --> 00:10:18,690
That will be nice interaction.
76

77
00:10:18,690 --> 00:10:21,160
We already know how to create the shadow, right? On the cards,
77

78
00:10:21,160 --> 00:10:26,160
we've done it on the testimonial cards. And we can do exactly the same here. And we can just reuse the
78

79
00:10:26,160 --> 00:10:33,030
same values for the shadow.
79

80
00:11:04,850 --> 00:11:16,430
And let's add a transition of effect, so it's not that abrupt and jerky.
80

81
00:11:16,730 --> 00:11:16,830
There
81

82
00:11:20,630 --> 00:11:22,340
is one more hover effect we can add.
82

83
00:11:22,760 --> 00:11:24,780
We could make the card move a little.
83

84
00:11:24,860 --> 00:11:29,390
This with a shadow will create an effect of card being lifted in the air.
84

85
00:11:29,390 --> 00:11:32,940
Very simple to do in the hover state, add the Transform effect.
85

86
00:11:33,020 --> 00:11:37,010
And on the vertical axis, move about 2 pixels.
86

87
00:11:37,010 --> 00:11:41,530
We need negative two pixels to lift it up. Positive values will move it down.
87

88
00:11:41,570 --> 00:11:46,550
We don't have to add the transition effect, because we have added one for all properties. So that's taken
88

89
00:11:46,550 --> 00:11:48,830
care of the transition for the move as well.
89

90
00:11:48,830 --> 00:11:53,870
That's why I like using all properties transition instead of individual one for each attribute.
90

91
00:11:54,290 --> 00:11:58,840
Excellent the card is ready. But we're not going to connect it to the CMS just yet.
91

92
00:11:58,880 --> 00:12:00,700
We'll do that in the next video.
92

93
00:12:00,740 --> 00:12:03,090
Right now, let's just finish up the page.
93

94
00:12:03,110 --> 00:12:08,140
We need to add the footer. Which is easy, since we just need to drag a footer symbol on the page.
94

95
00:12:16,480 --> 00:12:20,670
And done. Super easy.
95

96
00:12:20,680 --> 00:12:25,840
Now, let's link to this blog page. So people can access this blog page through the navbar or through
96

97
00:12:25,840 --> 00:12:26,350
the footer.
97

98
00:12:32,470 --> 00:12:35,090
Then select the link and go to Settings panel.
98

99
00:12:38,250 --> 00:12:45,430
Connect it to the block page, which now shows up in a dropdown. And same thing in the footer.
99

100
00:12:58,960 --> 00:13:03,920
And let's not forget the home page navbar, because the navigation bar there isn't connected to a symbol.
100

101
00:13:17,760 --> 00:13:18,360
And that's all.
101

102
00:13:18,360 --> 00:13:24,590
Now the blog page can be accessed from anywhere on the site.
102

103
00:13:24,610 --> 00:13:24,940
All right.
103

104
00:13:24,940 --> 00:13:27,630
Up next. We'll connect the grid to the CMS.
104

105
00:13:27,640 --> 00:13:28,180
Stick around.