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