So that's the slider component. 1
But that Webflow slider looks very different from our designs. Arrows are different, 2
their placement is different. 3
There are no navigation dots and we are seeing multiple cards at once. 4
When on this slider element, we only see one slide at a time. But not to worry, we can actually style the slider 5
in a way, to make it look exactly like our designs. 6
First, let's add a space between the slider and the headline. Just like anything else we can style the 7
entire slider element. Which again is a good old div block with bunch of other elements inside. 8
Select the slider element, 9
give it a class and a top margin of 120 pixels. 10
And let's get rid of this grey background. 11
It's part of the slider element too. Go to the background settings and change it to transparent. 12
And let's change the color of the arrows so we can see them. 13
The icons here are text based. 14
So if we change the text color, it's going to update the colour of the icons. 15
We don't need those navigation dots, so let's get rid of it. 16
But deleting doesn't work. Webflow thinks we don't need the slider and deletes the whole thing with it. 17
So there is another way to remove something. 18
Select display none. 19
And it's gone from this space time continuum, floating somewhere in a different dimension. 20
Next, we need to build a testimonial card. This should be quite straightforward. 21
We're going to drop a new div block inside one of the slides. And build all the necessary parts. 22
Give it a class of testimonial card, a white background and the same dimensions as in our designs. 23
And round the corners. 24
Now we're gonna add a box shadow, just like in Figma. To see the settings of the shadow, 25
make sure to select a correct object that has a shadow applied to it. 26
In my case, the shadow is on the entire group, not on the white card itself. 27
Once you have the correct object selected, and you will know this when a box shadow style appears in 28
the panel. Either go to the code tab and select a table view, or check the values right from the properties 29
panel. 30
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
exactly what's going on inside. 32
These are all the values we need to recreate the shadow inside Webflow. Figma and Webflow have 33
their own ways of creating a shadow. Blur is the same value. 34
And of course color is same, so we can easily match those 35
Figma has X and Y, which aren't present in Webflow. These are X and Y offset. 36
Basically how shadow offsets from horizontal and vertical axis. Our value for X is 0. It means that 37
the shadow doesn't offset on the horizontal axis. 38
In other words, shadow drops on a straight line without an angle, from top towards bottom. 39
We can define that inside Webflow, under the Angle property. 0 offset is as same as 180 degrees 40
angle. 41
The dot on the round dial shows the position we need. 42
So, bottom center. 43
As for Y offset. 44
That's if shadow distributes from the center, or if it's nudged upwards or downwards a little. 45
In our case it is, it's nudged 15 pixel downwards. 46
Negative value would make it go upwards, but you never want a shadow that is falling upwards. 47
It's unnatural. 48
So, that's same as distance inside Webflow. 49
I know this can be a little confusing, so just take a note or a screenshot of this. 50
There is an extra value inside Webflow, the size, but you can ignore that one. As you can see, the 51
card isn't fully visible, the slider is clipping it. 52
That's because slider has some default height to it. Yes it does say height auto, which means it should 53
expand based on its content, but it doesn't. 54
That's another case of default values not being true. 55
So type by hand "auto" 56
one more time and hit enter, there. 57
Okay, now for the content inside that card. We have stars and the paragraph. We will need to export the star 58
icons from Figma. Export all 5 stars as one, group them, 59
if it's not a single group for you and export as SVG. 60
We need to apply padding to the card. 61
We have 40 pixels on all sides, except the top, which has 60 pixels. 62
We need distance from the stars, which is 30 pixels 63
And we need the Author block. Export 64
this avatar as 2X PNG. 65
Let's add a new div block. And organize author details inside. 66
First, the image then the 2 text blocks. 67
Give each text block some class and style, the same way as in Figma. 68
Now we need to move the text on the side of the avatar. 69
How can we do that? 70
Of course, we could take the usual path of using a flexbox. But we would need an extra box for that, and 71
it takes more clicks. 72
A simpler option is to use float. 73
Remember float? Under position, 74
we have dropped down for Float and clear. 75
Open that up. 76
There are three options: none, left and right float. 77
The icons sort of show what it does. 78
Select left float, 79
This will position the image to the left of the text. And that's all. We need to adjust some spacing 80
now. First next to the image. 81
Then between image and the paragraph, which is 70 pixels. 82
And finally, we need to add a little margin on top of the author name, in order to center the text with 83
the avatar. 84
Now let's duplicate this first slide, and see where we stand. 85
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
as they fit, and slide between visible and invisible parts. 87
The reason we're seeing one slide at a time is to do with the width settings of the slide element. 88
It is set to auto, which means it's going to stretch 100% of its parent container. 89
If we give it a fixed width, then it will shrink accordingly. 90
So, let's give it a same width as our testimonial card. 91
If you notice the slide box has shrank 92
now. It's as wide as the card. And now let's duplicate it. 93
And there you go. 94
Now they're aligning, just like we want. 95
Let's add margin on the right, to create the separation. 96
OK. 97
Let's check the preview mode, to see where we stand. We have 4 slides and they slide exactly the way 98
we want them to. 99
Except for one thing, in our design, the page shows as many cards there are as possible and the rest go 100
off the page. 101
But here they don't, they only show inside the slider component. 102
So, how can we change that? If you select the mask element, another div block, where all the slides are 103
nested. 104
You'll notice that inside overflow settings, it's set to hidden. 105
This means all the slides that go off the boundaries of the mask, they are clipped. 106
Actually everything that goes beyond gets clipped. 107
Even the shadows on the cards, if you look closer. To show them, we simply need to change this to visible. 108
And there you go. 109
Now all the cards are visible. 110
But there is one issue. 111
They don't clip when the page ends. 112
They expand the boundaries of the page, but we already know how to fix this, don't we? 113
We just need to apply the same overflow hidden style to the section, just like we did with the image 114
of the dashboard. 115
We even have a class for this. 116
We don't need to change anything, just apply the same class as we already applied in one of the sections. 117
Excellent. 118
Let's populate the cards with our content and then we'll just have to take care of the arrows and that's 119
it. 120
We didn't create content for more than 4 testimonials. 121
So let's slack off a little this time and just duplicate the existing content. 122
There is just one thing we need to fix with the cards. 123
Right now we have content that is all equal height. 124
But what if we have testimonials with different lengths? 125
The card doesn't expand because it has a fixed height. 126
So let's change the height back to auto. 127
So it expands based on the content. 128
In a real project, you should try to control the length of testimonials. 129
This one is fine, but when the difference between long and short card is really big, then it doesn't 130
look very nice. 131
Testimonials can be truncated, meaning you can cut them short. But if your client doesn't want them to 132
be cut, then perhaps a different layout is needed. Something that stacks vertically. 133
One such option could be Masonry grid. OK. 134
All is looking good. If we check the responsiveness we can see that cards act exactly as we want them to. 135
The final thing that we should take care of are the arrows. For that, we need to learn a new concept, 136
which we're going to do in the next video. 137
Stick around.