A footer is the bottom section of your website homepage where you typically add your company’s logo, social links, navigation links, and copyright information. In this lesson, we’ll optimize our site’s navigation — and social media promotion — by building a fully responsive footer section.
00:00 — Introduction 00:20 — Structure 00:42 — Content 02:58 — Styling 03:53 — Container (Make sure everything on the site is even and consistent) 07:30 — Recap 07:55 — CTA: Share your footer designs using the #webflow101 on Twitter
[McGuire] Footer.
[Sara] Footer. The word sounds more strange the more you say it.
[McGuire] That's accurate. It's also where we can link out to provide more context, navigation, information, all of it. We'll break this lesson down into four sections: structure, content, styling, and finally, we'll adjust the alignment on our container using a combo class.
Let's start with structure. We're getting really good at this. Let's collapse what we have, and let's add a section. Now we can place a section anywhere. The footer traditionally goes on the bottom, so that's our section. Let's add, of course, our selector. Let's go ahead and add that class, which is section.
[Sara] Section.
[McGuire] Of course, inside that section, we're getting good at this too, let's Command + E for Quick find, and let's put a container inside, and that's our primary structure.
Let's switch from structure to content. Few things inside here. First, let's add a logo. So we'll go to our assets, and we'll grab our calendar logo. Strike that right inside. The default size is okay, but depending on the logo we're using, we might want to add a class to that to control it. Let's go and add a selector. Let's call it footer logo. Let's say the width should be 110 pixels, so that's fine. We can always change this later.
So what else do we want in the footer? Well, we want some links. Let's put some links. Command + E for Quick find. Let's do text link. And because we'll be using multiple, let's add a class. Let's call this footer link so we can style it later. And we'll want to place all of these links. Let's actually create a div just to wrap these. So let's create a div. We'll call it footer link block, and can drag one of these text links inside. The reason is now we can hit command+C, command+V and just copy a bunch of them. Let's say, we'll call it, let's do YouTube. We can do that. Let's do ...
[Sara] LinkedIn.
[McGuire] ... LinkedIn.
[Sara] Twitter.
[McGuire] Let's do Twitter. Let's do Facebook, Instagram ...
[Sara] ... and ummm Dribbble.
[McGuire] Were you actually struggling to remember that, or were you, for dramatic effect, were you ...
[Sara] A dramatic effect.
[McGuire] Dramatic effect?
[Sara] Yeah.
[McGuire] That's good. It's dramatic. Three Bs in Dribbble?
[Sara] Yeah.
[McGuire] Okay, so we have all of those.
[Sara] No.
[McGuire] No.
[Sara] It's two, right?
[McGuire] In Dribbble, it's three.
[Sara] Is it three?
[McGuire] It's like awwwards.com, there's three Ws. Dribbble is three Bs, right?
[Sara] Okay. Yeah, you're right.
[McGuire] Were you asking that question because you were curious or was it dramatic effect?
[Sara] Maybe dramatic effect.
[McGuire] Dramatic effect. Okay. There's one more piece of content before we move into styling, and that of course is our copyright. Command + E one more time, and let's make sure - let's close this - let's make sure we're in our container. So Command + E, and we'll type "text block". We just need a text block for this. It drops right in the container. So in the container, three things: logo, footer link block, and, of course, text block. Let's call this copyright option G. On Windows, this can be Control + Alt + C, and we'll do 2040 Calendar... All rights reserved. That's it for structure and content.
Let's move into styling, starting with these footer links because they don't look great as is. Let's see. First off, two things. With any link that we don't want looking like this, let's turn off that text decoration. By default, it's an underline. Let's turn it to none. The color by default is pulling in that blue color. We can set it to whatever we want, probably a bold red.
[Sara]
Maybe a dark gray.
[McGuire]
Maybe a dark gray. And of course, one more change we can make. Right now, it's a little cluttered. We could take that footer link block, the thing that's holding all of these and make some changes on that. So we could turn on flexbox. And by default, horizontal is fine. That's the direction we want to use, but we can add some space in between our columns. So just holding down option or alt, we're going to get some space, maybe 20 pixels.
[Sara]
That looks good.
[McGuire]
We can justify our content to the center. That looks pretty good. We can also use this div, this footer link block to add some top and bottom margin. Just add some space outside of it between that and other things, maybe 15 or 20 pixels there too.
But how do we center everything else? There's a lot of ways to do this. Let's move on from styling to container, because this is where we're going to get into our combo class, but we're going to do a bonus. We're going to make sure everything in this site is even and matched and consistent. So there's one thing that's unlike other things, and that's this container. We created a class by styling it way back in the hero section. Let's actually call this hero container. It's just for this one because there's some special properties, some flexbox settings applied to this. But let's just demonstrate by setting the maximum width on this to 1100 pixels. When we do, of course, it only affects that container. It's the only one we applied that class to. We created that now hero container class.
But what about this? There's a container up here. Let's add a new class called container. This is just the container in our nav bar. We're going to create a class called container. Maximum width, let's set it to 1100 pixels as well. What we'll do with this container is really keep it simple. It's only going to be a max width of 1100 pixels. So if we go over here to our, let's select that container inside this section. Let's select container here as the class.
Same thing down here in this kind of feature grid section. We'll select that container, go over to selector, and add container, keeping these even and matched. Same thing in the form. Let's select container. And of course, same thing in the footer. Select the container. Select container. When we do, that maximum width we can see is affecting all instances of container. The only one it's not is the hero, and the hero has some special settings applied to it.
But for our container in the footer, we want to do some special stuff down here. So with container selected, with this container selected, we know we have the container class, let's create a combo class called footer. We're going to add some special stuff on this. So there's a couple ways to do this. We could just set flex and we could go to vertical and we could go to center. That's one way to get everything centered. Let's undo a couple times and take a look at what other options we have. So we undid flex. It's back to where it was. We could also just select the alignment, the text alignment. That will align all that content that way. It's really up to you. That's the thing about CSS and HTML, sometimes there's eight different ways to do the same thing, and that's good. We have options depending on the styles we're looking for, depending on the content we have. In this case, maybe remove that alignment and use flexbox. It's a little more versatile for down the road if we're wanting to stack multiple things next to each other that might have different properties applied.
Okay, one more bonus thing, because this will be a pain if we're making adjustments on the container and it works on everything except for the hero section. Let's go to that hero, because remember, we only added really this set of flex controls to it. Let's remove hero container. Let's put back on our container so it's now matching the same container as everything else. Let's use the same technique there. Let's go and say ...
[Sara]
You can actually use the footer there.
[McGuire]
Hero? What?
[Sara]
You can use the class...
[McGuire]
That's absolutely right. Actually, this is a great way of doing this in real time, which is ... Sara just said we could use the footer there because it has the properties we need. It has those flex properties. Of course, the missing one, it might be ... No, that's it. That's absolutely it. So we could use that. Just rename this to centered. So now we have container centered on the hero container and the container at the bottom.
Of course, if we select any of our containers that don't have that combo class, that are just container, we can change their styles, just the container class. So if we increase the max width to maybe 1200 pixels, we can see it's matched on all the containers, including the container in the hero section. We decrease it once, it decreases the container on all of these for us back to 1100 pixels. And That is all for the footer.
Simple design. We did our structure, we added our content, we styled it, and, of course, we adjusted that container using a combo class, which we later renamed container centered. So it's even and matched not only in the hero, but throughout everything.
And up next, we're going into one of the most powerful tools we have, which is using breakpoints to turn this full design into something that responds perfectly on different displays.
[Grimur]
It’s called a footer because it’s at the foot (at the bottom) of the site. Down near my feet, I got something special. Pizzicato strings. Another iteration of the Grimur Webflow 101 plushie. Here’s the thing, these are a limited-edition run. And this year, every month, we’ll be picking our favorite footer designs shared using #webflow101 on Twitter. Not only will the winners get a plushie of this devilishly handsome Nordic firecracker, this guy, but we’ll be using our vast reach to share your footer designs with the world, right? I love him.