0
1
00:00:03,160 --> 00:00:04,840
So that's the slider component.
1

2
00:00:05,050 --> 00:00:10,030
But that Webflow slider looks very different from our designs. Arrows are different,
2

3
00:00:10,030 --> 00:00:11,440
their placement is different.
3

4
00:00:11,440 --> 00:00:16,410
There are no navigation dots and we are seeing multiple cards at once.
4

5
00:00:16,510 --> 00:00:22,660
When on this slider element, we only see one slide at a time. But not to worry, we can actually style the slider
5

6
00:00:22,660 --> 00:00:25,740
in a way, to make it look exactly like our designs.
6

7
00:00:25,780 --> 00:00:31,270
First, let's add a space between the slider and the headline. Just like anything else we can style the
7

8
00:00:31,270 --> 00:00:36,990
entire slider element. Which again is a good old div block with bunch of other elements inside.
8

9
00:00:37,090 --> 00:00:38,570
Select the slider element,
9

10
00:00:38,590 --> 00:00:42,550
give it a class and a top margin of 120 pixels.
10

11
00:00:48,900 --> 00:00:50,750
And let's get rid of this grey background.
11

12
00:00:50,780 --> 00:00:55,370
It's part of the slider element too. Go to the background settings and change it to transparent.
12

13
00:00:59,900 --> 00:01:03,080
And let's change the color of the arrows so we can see them.
13

14
00:01:03,200 --> 00:01:05,420
The icons here are text based.
14

15
00:01:05,420 --> 00:01:15,470
So if we change the text color, it's going to update the colour of the icons.
15

16
00:01:15,530 --> 00:01:18,320
We don't need those navigation dots, so let's get rid of it.
16

17
00:01:19,130 --> 00:01:24,440
But deleting doesn't work. Webflow thinks we don't need the slider and deletes the whole thing with it.
17

18
00:01:24,440 --> 00:01:26,910
So there is another way to remove something.
18

19
00:01:26,960 --> 00:01:28,360
Select display none.
19

20
00:01:28,370 --> 00:01:33,030
And it's gone from this space time continuum, floating somewhere in a different dimension.
20

21
00:01:35,790 --> 00:01:40,170
Next, we need to build a testimonial card. This should be quite straightforward.
21

22
00:01:40,170 --> 00:01:45,450
We're going to drop a new div block inside one of the slides. And build all the necessary parts.
22

23
00:01:45,450 --> 00:01:51,600
Give it a class of testimonial card, a white background and the same dimensions as in our designs.
23

24
00:01:56,550 --> 00:01:58,020
And round the corners.
24

25
00:02:00,050 --> 00:02:04,490
Now we're gonna add a box shadow, just like in Figma. To see the settings of the shadow,
25

26
00:02:04,490 --> 00:02:08,450
make sure to select a correct object that has a shadow applied to it.
26

27
00:02:08,450 --> 00:02:12,790
In my case, the shadow is on the entire group, not on the white card itself.
27

28
00:02:12,800 --> 00:02:17,060
Once you have the correct object selected, and you will know this when a box shadow style appears in
28

29
00:02:17,060 --> 00:02:23,920
the panel. Either go to the code tab and select a table view, or check the values right from the properties
29

30
00:02:23,930 --> 00:02:24,680
panel.
30

31
00:02:24,680 --> 00:02:29,930
If you are using a shadow style, like I am here, you can unlink it from the style so you are able to see
31

32
00:02:29,930 --> 00:02:31,480
exactly what's going on inside.
32

33
00:02:31,490 --> 00:02:36,110
These are all the values we need to recreate the shadow inside Webflow. Figma and Webflow have
33

34
00:02:36,110 --> 00:02:41,030
their own ways of creating a shadow. Blur is the same value.
34

35
00:02:41,030 --> 00:02:44,240
And of course color is same, so we can easily match those
35

36
00:03:02,160 --> 00:03:07,390
Figma has X and Y, which aren't present in Webflow. These are X and Y offset.
36

37
00:03:07,410 --> 00:03:13,530
Basically how shadow offsets from horizontal and vertical axis. Our value for X is 0. It means that
37

38
00:03:13,530 --> 00:03:16,350
the shadow doesn't offset on the horizontal axis.
38

39
00:03:16,350 --> 00:03:20,670
In other words, shadow drops on a straight line without an angle, from top towards bottom.
39

40
00:03:20,670 --> 00:03:27,990
We can define that inside Webflow, under the Angle property. 0 offset is as same as 180 degrees
40

41
00:03:28,020 --> 00:03:28,590
angle.
41

42
00:03:28,740 --> 00:03:31,540
The dot on the round dial shows the position we need.
42

43
00:03:31,560 --> 00:03:32,890
So, bottom center.
43

44
00:03:32,940 --> 00:03:34,120
As for Y offset.
44

45
00:03:34,140 --> 00:03:39,660
That's if shadow distributes from the center, or if it's nudged upwards or downwards a little.
45

46
00:03:39,660 --> 00:03:42,920
In our case it is, it's nudged 15 pixel downwards.
46

47
00:03:42,930 --> 00:03:47,750
Negative value would make it go upwards, but you never want a shadow that is falling upwards.
47

48
00:03:47,760 --> 00:03:48,900
It's unnatural.
48

49
00:03:49,050 --> 00:03:51,390
So, that's same as distance inside Webflow.
49

50
00:03:54,400 --> 00:04:01,450
I know this can be a little confusing, so just take a note or a screenshot of this.
50

51
00:04:01,500 --> 00:04:08,430
There is an extra value inside Webflow, the size, but you can ignore that one. As you can see, the
51

52
00:04:08,430 --> 00:04:11,310
card isn't fully visible, the slider is clipping it.
52

53
00:04:11,310 --> 00:04:18,800
That's because slider has some default height to it. Yes it does say height auto, which means it should
53

54
00:04:18,800 --> 00:04:20,750
expand based on its content, but it doesn't.
54

55
00:04:21,200 --> 00:04:23,990
That's another case of default values not being true.
55

56
00:04:23,990 --> 00:04:26,090
So type by hand "auto"
56

57
00:04:26,090 --> 00:04:28,180
one more time and hit enter, there.
57

58
00:04:31,050 --> 00:04:37,320
Okay, now for the content inside that card. We have stars and the paragraph. We will need to export the star
58

59
00:04:37,350 --> 00:04:41,670
icons from Figma. Export all 5 stars as one, group them,
59

60
00:04:41,670 --> 00:04:45,120
if it's not a single group for you and export as SVG.
60

61
00:05:22,400 --> 00:05:24,170
We need to apply padding to the card.
61

62
00:05:24,170 --> 00:05:31,050
We have 40 pixels on all sides, except the top, which has 60 pixels.
62

63
00:05:31,320 --> 00:05:34,140
We need distance from the stars, which is 30 pixels
63

64
00:05:44,690 --> 00:05:49,780
And we need the Author block. Export
64

65
00:05:49,860 --> 00:05:51,870
this avatar as 2X PNG.
65

66
00:05:59,050 --> 00:06:06,090
Let's add a new div block. And organize author details inside.
66

67
00:06:07,030 --> 00:06:19,510
First, the image then the 2 text blocks.
67

68
00:06:44,210 --> 00:06:48,160
Give each text block some class and style, the same way as in Figma.
68

69
00:07:15,010 --> 00:07:17,380
Now we need to move the text on the side of the avatar.
69

70
00:07:17,380 --> 00:07:18,570
How can we do that?
70

71
00:07:18,580 --> 00:07:24,250
Of course, we could take the usual path of using a flexbox. But we would need an extra box for that, and
71

72
00:07:24,250 --> 00:07:25,950
it takes more clicks.
72

73
00:07:25,990 --> 00:07:28,180
A simpler option is to use float.
73

74
00:07:28,360 --> 00:07:30,300
Remember float? Under position,
74

75
00:07:30,310 --> 00:07:32,660
we have dropped down for Float and clear.
75

76
00:07:32,710 --> 00:07:33,530
Open that up.
76

77
00:07:33,550 --> 00:07:36,980
There are three options: none, left and right float.
77

78
00:07:37,030 --> 00:07:38,710
The icons sort of show what it does.
78

79
00:07:38,710 --> 00:07:39,880
Select left float,
79

80
00:07:39,910 --> 00:07:44,920
This will position the image to the left of the text. And that's all. We need to adjust some spacing
80

81
00:07:44,920 --> 00:07:46,750
now. First next to the image.
81

82
00:07:51,280 --> 00:07:54,790
Then between image and the paragraph, which is 70 pixels.
82

83
00:08:02,170 --> 00:08:07,570
And finally, we need to add a little margin on top of the author name, in order to center the text with
83

84
00:08:07,570 --> 00:08:08,460
the avatar.
84

85
00:08:14,290 --> 00:08:17,230
Now let's duplicate this first slide, and see where we stand.
85

86
00:08:27,550 --> 00:08:33,670
As you can see, we're only seeing one slide at a time. But we want them to display all next to each other
86

87
00:08:33,670 --> 00:08:37,890
as they fit, and slide between visible and invisible parts.
87

88
00:08:37,900 --> 00:08:43,420
The reason we're seeing one slide at a time is to do with the width settings of the slide element.
88

89
00:08:43,420 --> 00:08:48,590
It is set to auto, which means it's going to stretch 100% of its parent container.
89

90
00:08:48,640 --> 00:08:52,210
If we give it a fixed width, then it will shrink accordingly.
90

91
00:08:52,240 --> 00:08:55,080
So, let's give it a same width as our testimonial card.
91

92
00:09:01,070 --> 00:09:03,050
If you notice the slide box has shrank
92

93
00:09:03,050 --> 00:09:14,730
now. It's as wide as the card. And now let's duplicate it.
93

94
00:09:14,880 --> 00:09:15,600
And there you go.
94

95
00:09:15,630 --> 00:09:18,150
Now they're aligning, just like we want.
95

96
00:09:18,150 --> 00:09:21,120
Let's add margin on the right, to create the separation.
96

97
00:09:33,280 --> 00:09:33,560
OK.
97

98
00:09:33,580 --> 00:09:40,120
Let's check the preview mode, to see where we stand. We have 4 slides and they slide exactly the way
98

99
00:09:40,120 --> 00:09:41,090
we want them to.
99

100
00:09:41,230 --> 00:09:47,410
Except for one thing, in our design, the page shows as many cards there are as possible and the rest go
100

101
00:09:47,410 --> 00:09:48,240
off the page.
101

102
00:09:48,460 --> 00:09:52,300
But here they don't, they only show inside the slider component.
102

103
00:09:52,300 --> 00:09:58,450
So, how can we change that? If you select the mask element, another div block, where all the slides are
103

104
00:09:58,450 --> 00:09:59,060
nested.
104

105
00:09:59,500 --> 00:10:03,280
You'll notice that inside overflow settings, it's set to hidden.
105

106
00:10:03,280 --> 00:10:07,870
This means all the slides that go off the boundaries of the mask, they are clipped.
106

107
00:10:07,870 --> 00:10:10,060
Actually everything that goes beyond gets clipped.
107

108
00:10:10,150 --> 00:10:14,800
Even the shadows on the cards, if you look closer. To show them, we simply need to change this to visible.
108

109
00:10:14,800 --> 00:10:15,880
And there you go.
109

110
00:10:15,880 --> 00:10:17,500
Now all the cards are visible.
110

111
00:10:27,210 --> 00:10:28,260
But there is one issue.
111

112
00:10:28,260 --> 00:10:30,150
They don't clip when the page ends.
112

113
00:10:30,150 --> 00:10:34,440
They expand the boundaries of the page, but we already know how to fix this, don't we?
113

114
00:10:34,440 --> 00:10:39,840
We just need to apply the same overflow hidden style to the section, just like we did with the image
114

115
00:10:39,840 --> 00:10:40,710
of the dashboard.
115

116
00:10:40,710 --> 00:10:42,350
We even have a class for this.
116

117
00:10:42,390 --> 00:10:47,160
We don't need to change anything, just apply the same class as we already applied in one of the sections.
117

118
00:10:47,760 --> 00:10:48,210
Excellent.
118

119
00:10:48,210 --> 00:10:53,200
Let's populate the cards with our content and then we'll just have to take care of the arrows and that's
119

120
00:10:53,200 --> 00:10:53,440
it.
120

121
00:11:20,320 --> 00:11:23,170
We didn't create content for more than 4 testimonials.
121

122
00:11:23,170 --> 00:11:27,360
So let's slack off a little this time and just duplicate the existing content.
122

123
00:11:33,140 --> 00:11:35,420
There is just one thing we need to fix with the cards.
123

124
00:11:35,420 --> 00:11:38,420
Right now we have content that is all equal height.
124

125
00:11:38,420 --> 00:11:41,220
But what if we have testimonials with different lengths?
125

126
00:11:41,270 --> 00:11:44,110
The card doesn't expand because it has a fixed height.
126

127
00:11:44,150 --> 00:11:45,860
So let's change the height back to auto.
127

128
00:11:45,920 --> 00:11:47,990
So it expands based on the content.
128

129
00:11:55,570 --> 00:11:58,900
In a real project, you should try to control the length of testimonials.
129

130
00:11:58,900 --> 00:12:04,090
This one is fine, but when the difference between long and short card is really big, then it doesn't
130

131
00:12:04,090 --> 00:12:05,150
look very nice.
131

132
00:12:05,170 --> 00:12:09,760
Testimonials can be truncated, meaning you can cut them short. But if your client doesn't want them to
132

133
00:12:09,760 --> 00:12:15,220
be cut, then perhaps a different layout is needed. Something that stacks vertically.
133

134
00:12:15,220 --> 00:12:19,790
One such option could be Masonry grid. OK.
134

135
00:12:19,800 --> 00:12:25,620
All is looking good. If we check the responsiveness we can see that cards act exactly as we want them to.
135

136
00:12:25,620 --> 00:12:32,200
The final thing that we should take care of are the arrows. For that, we need to learn a new concept,
136

137
00:12:32,260 --> 00:12:34,000
which we're going to do in the next video.
137

138
00:12:34,000 --> 00:12:34,570
Stick around.