In this video, we're going to add a footer to the page. 2
Nothing's easier than that. 3
We can copy the footer from the home page and paste it right here. It's ready, 4
nothing to change and it's already responsive. But there is even a better way to do this. 5
Now imagine, we have a website and it has a lot of pages especially a lot of static pages. On each of 6
this page 7
we're gonna have same navigation bar and same footer usually, right? 8
And sometimes we will have some sections, like a call to action section maybe, repeated as well. 9
So, we'll have let's say 20 or 10 pages and on all of these pages, 10
same component like a footer, repeats over and over again. 11
Now when we want to edit this, right? We want to edit the footer. 12
We would have to go edit one of the footers, right? 13
Then take that footer copy it and then replace it on every other single page. 14
Now when it comes to styles, we can easily take care of that, 15
right? 16
We already learned we have CSS styles we have HTML tags. 17
We can just go in one place and change one instance and across the entire site, everything will be updated. 18
But how about content? 19
How about the entire skeleton and structure of footer? Let's say we decided one column has to go, or we 20
have to replace the text of, 21
maybe just a little headline needs fixing and changing something. In Figma, 22
we have something that solves that problem. 23
The components. We can create a component and then any other instance of that component can be updated 24
everywhere. 25
Right? 26
Until it's overridden 27
obviously. We have something similar in Webflow as well. Enter symbols. Next to elements tab, 28
there is a tab for symbols. 29
Symbols work sort of like components in Figma. How making any sort of change 30
to the master component, even on the content, is going to update every other instance of that component. 31
Symbols in Webflow work in a similar way. 32
We can create a symbol out of anything. And then reuse it across the website. Except, in case of Webflow, 33
every instance of a symbol is a master. 34
So update to any one of them, will update all of them. 35
So, we are going to create a symbol out of the footer. 36
I'm going to delete this one, and create a symbol from the one on the home page. 37
To create the symbol just right click on the element. 38
In this case, the entire section that holds all the footer stuff, and click Create symbol. Give it a name 39
and create. It's going to turn green. 40
This means it's a symbol. 41
You'll see a different indicator inside the navigator too. With the name of the symbol. 42
Now let's go back to the blog post. If you go to the add panel and Symbols tab, you'll see now there's 43
a footer symbol in there. 44
You can drag this symbol on the page, 45
make sure to drop it inside the body element. 46
And there, the entire footer is here. 47
To edit elements inside a symbol, 48
you need to double click on it. And you'll see that rest of their content will fade white. 49
That's showing you that we are inside the symbol and only editing elements in there. And then, make changes 50
the way you would usually do and work with any other element. 51
If we change text here, these changes going to reflect on the footer on the home page. To exit the edit 52
mode, 53
press X on the top, or anywhere on that canvas, or escape button. 54
Let's see the home page. 55
There the change was instantly reflected on this footer as well. To edit it again just repeat the process. 56
Doesn't matter which instance you edit, changes will be effected to all of them. 57
But let's say we do want to have one of the footers to be different. 58
No problem, you can unlink the symbol. Just right-click on it and select Unlink from symbol. 59
Now it's independent footer, in no way connected to the footer on the home page. So any content edits 60
to this one, are not going to affect the footer on the home page and vice versa. 61
Although keep one thing in mind, this is just about the symbol itself, not about the classes. 62
Because if we change something about the class, or if we change the style, and if we change the background 63
of this footer, it's going to be reflected back on the original footer, because we are using the same 64
class. 65
So classes and symbols they are independent. Symbol is just groups all the elements together, and whatever 66
you change inside will be reflected to anywhere. 67
So for example, if you decide to change a class inside the simple, right? To apply a new class, that new 68
class will be reflected on every other instance of that symbol. 69
It's okay if you unlink all instances, the symbol isn't going to disappear. It's still going to be available 70
inside the symbols panel. 71
If there are no instances, underneath will say 0 instances. Meaning it's not used anywhere on the 72
site, but still can be added without a problem. 73
This is a great way to save some components for later. And it doesn't have to be a section. It can be 74
anything. A form block or even just a text block. To delete a symbol, first, you'll need to remove every instance 75
of it from the website. It won't let you delete otherwise. So those are symbols. Reusable, connected components. 76
Super useful. 77
You can create a symbol out of anything, just by right-clicking on the element. 78
Edit anything on any of the instances and see changes reflected on all of them instantly. Almost always 79
used for footers and navigation bars. 80
Other good uses can be a call to action sections, sidebars, forum blocks, etc.. 81
As for our page, it's nearly done. 82
We just need to optimize for responsive versions. 83
But this time it's quite simple. 84
Most of it is ready. So, stick around.