And the very last section of this page, the footer. The layout is quite simple. 1
We used our twelve-point grid to divide the footer in six equal blocks. Each block is made of two columns. 2
And one block is reserved for the space between the logo and the footer links. 3
The most obvious option here is to use flexbox. 4
Of course, there is an option of using columns element from Webflow, it would fit our layout just right. 5
Because it's based on 12-point grid too. But you know how much I love those columns. 6
So we're not going to use them. 7
Instead, we will make our own columns using flexbox. As usual, 8
let's add the section and a container inside. 9
Add another block and apply our usual flexbox class to it. 10
Now let's add another div block inside, which we will name as footer column. 11
I'm gonna give it a temporary background and height, just to see what we are doing. 12
Just like in our designs, 13
we're going to use 6 columns. These are going to be equal width columns, so the entire flexbox will be 14
divided in six equal parts. 15
We can do that using percentage points. 16
100% divided by 6 gives us 16,666... 17
and so on. 18
Instead of doing the math on our own, we can actually have Webflow 19
do the math for us. Just like Figma. Inside the width field type 20
100% divided by 6. 21
If we duplicate this six times, you can see how it fills up the entire space. Let's add the margins on 22
the side, just like we have in our designs. 23
They are separated by 30 pixel space. 24
So here we should add half of that on each side. 15 pixel left and right margin. 25
This way margins from adjacent columns will add up to 30 pixels. 26
However, we shouldn't have margins on the first and last columns. Because these margins will add extra 27
space to already existing padding, 28
that's part of the section div. 29
This might not be that big of a deal, but it's a great habit to be consistent. 30
We can do this easily by using combo classes. 31
Just create a combo class first and remove the left margin. And same thing on the last column. 32
All right now let's put the content in the corresponding columns. 33
Instead of using paragraph for regular text, we have another option for text called Text Block. Which 34
is what we are going to use for this tag line under the logo. Text block is basically a regular div with 35
text inside it. 36
It works the same way as a paragraph element, but they have different purposes. 37
You should use paragraph for multi-line, longer texts and main content of the page. And text blocks for 38
everything else, 39
that is not a heading, paragraph or a link. You can use these 2 interchangeably. 40
The result is the same. But it's a good habit to use them purposefully because search engines and screen 41
readers can identify how your content is structured on the page. 42
Another way to create a text blog is just by double-clicking inside a regular div blog and start typing. 43
It will turn it into a text block. 44
For the footer links, we are going to add regular link elements. 45
Let's style the link before duplicating, that way duplicates 46
will carry the class. 47
The font color already shows the grey color. But for some reason it's still blue on the canvas. 48
This is a little odd behavior that seems like a bug on Webflow's side. 49
It is correct that it's blue. Because the grey color from the body tag is being overridden by more specific 50
All Links tag, which has a blue color by default. 51
So, in reality, the properties panel should be showing blue, not grey. But there might be one reason why 52
that's not happening. 53
Which I'm not gonna go into right now, because it's not really adding value to this lesson. 54
So to fix this, just select some other color and select the grey again. 55
We don't need it to be underlined. That we can remove by selecting None under Text Decoration. 56
We need some hover effect for this link. 57
Otherwise they're not gonna look like links. 58
We can simply turn it into blue color on the hover state. 59
That's a simple and effective option. 60
We could add a hover transition effect here. 61
Just like we did with buttons. 62
But it's not really necessary. 63
It's not a lot of change, so let's keep it without a transition. 64
Now let's duplicate. But oops. 65
It puts them side by side. 66
Why is that? 67
Can you guess? Because display for links is set to inline. 68
That means it flows like text, which it is. 69
So they are going to go one next to each other. 70
If we apply display block instead, we know what's gonna happen. It will occupy an entire width and 71
stack on top of each other. 72
But this method has one little issue. Not really an issue, 73
more like not an ideal user experience. Since it's a link and it's a full width, 74
that means it's a clickable even on the empty space. Unlike our navbar, where a similar thing is happening. 75
The links interact even on the empty space. 76
But here the border on the bottom is a good representation that the entire thing is a link. 77
If we were just highlighting the text, then it would be odd 78
on the navbar too. 79
So how can we make them stack on top of each other, without using display block function? By using 80
flexbox. 81
We can give the parent flex layout and give it the vertical direction instead of horizontal. Then left 82
align. 83
Make sure to give this left align. 84
Otherwise, it will stretch edge to edge by default. Just like a block. And there, now is stack on top of 85
each other and empty space isn't part of the link. 86
Okay, let's style our headline. Instead of applying a class to these footer headlines, lets style one of 87
the headings tags. Say H3 maybe. It might be the right level. 88
H2 we could use for something bigger. 89
A mid-level headline. 90
Do you remember how to style the tags? 91
We need to select the tag from the selector. And now we are able to style all the H3 tags. 92
Let's remove the top margin and add a 20-pixel bottom margin, just like we have it in the designs. 93
And there we go. Now all H3 tags will be styled like this by default. 94
One thing you'll notice, that columns don't align on top like we have in design. 95
Let's have a look at our flexbox settings. You see it says Align Center. 96
What we want, is align top instead. 97
As usual, 98
let's add a combo class to this flexbox before we make any changes. To not mess up other instances. 99
And now that's a correct alignment. 100
Let's finish up the links. 101
In this practice project, we're not going to link these pages. Because we don't have other pages. But we 102
could connect the Contact Us link. For example, to link the email address, so it opens up a new email window 103
when the user clicks on it. 104
We just need to put the email address inside this field. We can skip the subject line. And we can 105
do the similar thing for the phone link. 106
And also for the office address. 107
We could link a Google Maps URL. 108
Check open in new window, so that Google Maps doesn't open up right inside this window, forcing the users 109
to leave the site. 110
And finally lets add the copyright text on the bottom. 111
We're going to use Text Block again, instead of the paragraph element. 112
I've added the text block inside the container, 113
but outside of the flexbox. 114
And we can add 180-pixel margin on top, just like our designs. 115
In our designs, the copyright text is quite close to the bottom of the page, 30-pixel away from the bottom. 116
But in Webflow it's much higher, because our section block has a 90-pixel padding. 117
We need to change that 90 padding to those 30-pixels. 118
But before we do that, we gotta add a combo class. 119
And there you go, we're done with our desktop version of our page. 120
Let's go to the preview mode and check how it all looks. 121
So to recap. We have built the footer using a flexbox layout. 122
We have given footer columns percentage width, so they shrink and expand equally. And we have left 123
one of the columns empty to create space between the logo in the footer links. 124
We have learned about a new element Text Block, how it's used for non-paragraph text in more of a general 125
use. This concludes the current section. In the upcoming section, we will learn how to make our page responsive. 126
So it looks beautiful and user friendly on any device.