All right. 1
We're gonna build our call to action section in this video. 2
What do we need here? 3
Let's do a quick planning in our head. 4
So we've got image on the left, content on the side. 5
Pretty much same as our hero section. 6
Let's start with the basics. 7
We're going to add a new section and give it a class Section that we created. 8
Then we're going to put a div block inside and give it a class container. 9
And then we'll take it from there. 10
We need a background color for this section. 11
It's actually the same blue, but we have it at 10% opacity. 12
We'll do the same thing in Webflow. 13
But the question is, how are we going to edit our sections background without altering same sections 14
on our page? 15
Well, if you paid attention to the previous lesson, then you'll know that we can apply a combo class to 16
the section without needing to duplicate it. 17
There. 18
Now the change is only reflected on this new section. 19
Since we have the similar layout as the hero section, maybe we can do the same thing? 20
Let's have a look. 21
We have a flexbox inside a container. And this flexbox has two blocks - left and right, that sit next 22
to each other. 23
Let's build this out in a similar way. 24
So, we've added a div block and applied the flexbox class to it. And put another boxes inside, that are 25
glued to the edges. 26
Why? 27
Because if you check the properties of the Flexbox, you'll see that it has Justify: "Space between" applied. 28
This pushes those children boxes to the side. 29
So whatever we put inside them, will be pushed as well. 30
Okay on the left, let's put the image. 31
We need to export it first. 32
The thing with this image, is that it's too big. And 2X export, 33
even after a compression is too large of the file. 34
Ideally, we would want to export a JPEG in such a case, but let's try one 1.5X and see if it's 35
going to be small enough. 36
Okay. 37
It's still a bit large. 38
We could go 1X, but it's all right. 39
Also, it's not in the top part of the page, which means it's going to load in the background until 40
user scrolls down. 41
Now, because we exported it in one 1,5X, the HiDPI option doesn't do a good job. 42
This means we need to set the width manually. 43
So, we just need to check the width in Figma and apply that exact width here. 44
We're going to need to find a way how to make this image stick on the left edge, like we have it in our 45
designs. 46
But let's first put some content inside the right block. 47
Okay, so what's happening here? The left and right boxes are flex children. 48
So they have a flexibility to shrink and grow to make space for each other. 49
So in this case, paragraph is pushing things and making the left block shrink. 50
What we can do here is to apply a maximum width to the right block, so it doesn't go wild. 51
We can check the width in Figma and put that as max width, which is 467 pixels. Now, do you wonder why not 52
fixed width instead of maximum width? Because on smaller screens we want it to shrink. 53
We want to design responsively. 54
Is that a word? There is responsibly. 55
Well both, 56
we want to design responsibly and responsively. 57
So mostly consider using max and min sizes instead of exact sizes. 58
I have to point out here. Because this block is a flex child, it would still shrink even if we gave it 59
in an exact width. 60
This happens because that's what flexbox does. It rules 61
their children as it wants. 62
They don't get a lot of say. Let's give this block some margin on the left, so it's not so close to the 63
image. 64
OK. 65
Now, what to do with our image? 66
How do we push it onto the side? 67
I know, we can add a negative margin. Yep. 68
That's the thing. 69
Negative margins. 70
And there you go. 71
But this has a small issue, on a wider screen the negative margin that we have added, is not going to 72
be enough. To fix this issue, 73
we can do two things. First, 74
we can use the VW units instead of pixel units. 75
Remember what VW stands for? 76
That's right. 77
Volkswagen. 78
But it also stands for Viewport Width. 79
So when we put something like 10 VW, it means the margin will be 10% of the browsers width. 80
So as browser increases, this will increase too. 81
It's still not enough. 82
We could add a few extra points and crop the image on smaller screens. 83
But there is one more thing we can do, is that we can widen the image itself. Which means we can export 84
more of the image. When we made this graphic, 85
we have actually cropped the image. So we can reveal more of it and export the wider version. 86
This way we will have more flexibility. Move the image in the middle, so the entire thing is visible and 87
frame isn't cropping it. 88
Otherwise, if we export it, then it's going to clip the content, based on the frame. And enlarge the image 89
or basically reveal more of it. 90
Then again we go through the same export and compression and all that stuff. 91
Just make sure to adjust the width one more time. 92
It's not 660 pixel wide anymore, it's 816 instead. 93
And now we have more flexibility on how much of the image we can clip from the page. 94
By the way this is not a hack, 95
this is a valid way of doing things in web design. 96
What matters at the end of the day is not the method, but the result. 97
All right let's finish up the content. 98
Remember, what we did with the button when playing with a combo classes? 99
We'll give this button a combo class of blue and style it. 100
The same thing we can do with a ghost button. 101
And let's use our paragraph to add spacing. 102
30 pixel on top and 60 pixel bottom. 103
It actually doesn't matter where you add your spacing. 104
You could even use headline and buttons, but that would need me to add edit two elements. By using a 105
middle guy, I can add space on top and bottom. 106
It's less work and less amount of classes. 107
So, what do we have here? 108
There is a line and then there is image of stars and text next to it. 109
Based on this side by side layout, we know that we're going to need an extra div block, just for those 110
two. 111
This time we're going to export stars in SVG format. Because they don't have any photography inside, they are 112
vector based, so perfect for SVG. 113
As I mentioned before, SVGs usually don't need to be compressed, they are quite small already. 114
Also, SVGs don't need to have HiDPI option checked, because they export from Figma 1X size, 115
so there is no need to shrink them. 116
They will look perfectly crisp in their original 1X size. 117
And even if you enlarge them as much as you want. 118
OK. 119
So, how do we put these stars and text side by side? Every time you want to put something side by side, 120
start with flexbox. 121
There are other options too, but flexbox will give you the most flexibility most of the time. 122
This flexbox that we created in the hero section, has a center alignment. 123
In our case, we want it to have a top alignment, like our design. But we can't change it here, because that's 124
gonna mess up the original flexbox. And it's going to mess up all the other instances of this same 125
flexbox. 126
Okay. 127
So, we can create a combo class and name it CTA or whatever you want. And then change the alignment 128
to the top. 129
Two things still need to be fixed: the spacing between them and also it's still not nicely aligned 130
on the top. 131
The text is sitting a little too low. So let's take the paragraph and style it a bit. 20 pixel 132
margin on the side, just like we have it in the design. And some negative margin on the top, to move it 133
up and align it nicely with the stars. 134
And also let's give it a maximum width, so the text jumps and cuts where we want. Oops, what happened 135
here? Check the flexbox. 136
Of course, it has Justify applied that pushes them to the sides. To switch it to left align and that's 137
it. 138
Okay. 139
Now, let's add that horizontal divider. Oh wait, 140
there is no such thing as a line in Webflow. Lines in web are made of... as usual... 141
div blocks. Line is just a div that has a 1-pixel height or something small like that. Add a background, 142
black with 15% opacity. 143
Give it a width. 144
And let's add top-bottom margins to space out the content. 145
Easy-peezy! 146
One thing you might have noticed, that sometimes I name classes myself and sometimes I just let 147
Webflow automatically create a class for me. 148
The thing is, we should always name our own classes, but in the beginning that's OK. 149
Right now we're just practising and we're learning Webflow. 150
So we don't want to torture ourselves by new extra decisions that we have to make, on how to name classes 151
and all of that. 152
For now, we're just gonna name important classes like flexbox, or container, or section, something 153
that we're definitely going to use and we need to know what we are naming them. And everything else like 154
these small paragraphs so whatever, we can just let the Webflow automatically decide it for us. 155
OK. 156
So to recap. 157
Actually, there is nothing to recap as we haven't learned new concepts in this video. But we have learned 158
how to use what we already know in different ways. Like adding a negative margin on the image to push 159
it to the side. Or using a 1 pixel height div block to create a line. And a little more practice with 160
flexbox.