Customizing the Header & Footer | Wix Tutorial

hey what’s up guys this is Spencer from pixel & bracket in this tutorial we’re going to look at how to customize headers and footers on a Wix website from resizing and adjusting the design to attaching elements and even freezing or pinning it to the top and bottom of the page let’s go ahead and dive right in so I’ve got this sample site and this this site is kind of like based on an architect really so there’s a header at the top and then
there’s a footer at the bottom see this stay in touch so the first thing we’re going to look at is how to resize the header and the footer all you have to do is click in the area of the header and you you’ll see that by this orange block that says header when you hover over the top of it once we click on that we’ll get a little dialog box here of things that we can adjust with the header but we also get this little arrow button stretch we can use
the stretch handle to lengthen or shorten the element while maintaining the design of the page aka when we drag this up or down it moves the rest of the page up or down with it so while we’re resizing the header it actually adjust everything else which is really nice and then from there we could just grab the items in our header shift-click to select them both and we can adjust those just by moving them up or down and they’ve got these really
cool smart guys that let you know that you got it right in line with the center of the header if we scroll down the page and go to the footer we can actually do the same thing just click on the footer and then we can use the adjust page height to adjust the page height which changes sort of where that footer is located like how much blank space is at the bottom of the page we can also click the same sort of stretch icon down here which allows us
to stretch that footer down and it’s got a little bit of this extra space down here that doesn’t actually show up in your final design just kind of lets you stretch that footer further and we can select by shift-clicking the items in our footer and just align those once again to make sure they’re in the center of the footer so that’s how you can sort of resize each of those next up let’s take a look at how to customize the design of our headers
and footers so if we just click back on that header we can actually go to header design weeks has a bunch of themes already pre-made and we’re going to use one of them but you can also hit customize design to customize the border the corners the shadow that you have the fill color and opacity and how the header appears whether it’s sort of popped out or you have no header but there’s also these preset designs there’s one that I liked it’s like a
paper texture right here so as soon as that’s check marked you can click the X button and you’re out of that and now I have this paper texture and if I hit my preview button in the upper right hand corner of my editor I can actually preview the page as is so I can see that paper texture up top where that header starts now we can go back to the editor by clicking the big green button we scroll back down to the bottom of the page we’re gonna find
the footer let’s customize the footer design I think I’m gonna go with the color on this one so I’m going to click on footer change footer design that’s gonna pop up in this dialog box I can actually move it around if I click in the blue area and drag same thing there are tons of pre-made footer designs if I want to I could just find a color that’s sort of dark this blue color right here this kind of dark blue color and that’s a premade design
but once again we could go to customize design and we can start adjusting the fill color and the opacity just by scaling these different tools on the opacity clicking on the color changing the color to whatever I want it to be I’m gonna go with this even darker blue and you can do so many different customizations to this while you’re editing instead of just using the pre set designs once you’re done all you have to do is click the X button and
we’ve adjusted that footer okay so we’ve looked at resizing we looked at redesigning how about adding elements to the header and the footer now these little buttons over here there’s one that’s called add if I click on that I have this option of a million different things that I can add to my header or footer I’m actually going to go with some vector art because this is an architecture site I’m gonna find this little house icon and if I click and
drag it out here first off I could just drop it on my page somewhere but if I click and drag it on to the header notice this little orange block that says at hatched a header as long as I see that I know it’s going to actually attach to the header and then I could line it up with my little smart guides drop it in there now the cool thing about this real quick is I can change this artwork so I want to make that dark to match my design I don’t want
that color so let’s go with a just a dark you know a black color and I can X out of this so I’ve changed that I could drag it over here to the left of architects let’s sort of pretend like this is a logo we’re gonna line that up there in the center and then we can bring this text box out here what we could actually do with these is just grab the side of this when I see the double arrows and I can extend it out and then I can drop this down just
like that adding elements to the footer is a little bit different but not but but it’s pretty much the same so let’s say I want to add like some social media icons down here I could go back to that plus button add go to social and I’ve got social media icons a little social bar ready set up I want to pick this one this sort of grayed tone here the click and I drag it I could even drop it down here on the footer notice that attached to footer
button could drop it there I’m gonna show you though if you don’t have the element on your footer yet and it’s actually outside of your footer you need to drag it down close to the footer let go and then you can move it to the footer so that’s how you sort of move elements to your footer or attach them to your footer now that it’s in there it is set and one thing I want to do with this I’m gonna make it a little bit smaller so I’m gonna go to the
layouts button and then adjust the size of those icons just make them a little bit smaller so they fit in there I could adjust spacing if I want to if they’re horizontal vertical I could drag this down here use my smart guides there to line it up and there now we have some social icons down in this footer so what if I want to remove an item from my header or my footer well to remove it all I have to do is click it and drag it outside of the
footer now it’s no longer in the footer pretty simple I could also right-click and go to delete or drag it outside of the header or footer to remove it from the header or footer now the last thing I’m going to show you is how to freeze or pin the header or footer to the top or bottom of the page and I’ll actually show you a couple more elements to that all you have to do is click on your header again and go to this little Settings icon from there
there’s lots of different options for when your visitor Scrolls what it does so you could click this freeze icon then we can exit out of it it doesn’t look like anything changed but remember that preview button just click that and you’re previewing your website and now we can see that it’s frozen to the top of the page or sort of pinned to the top of the page now like I said there are some other elements to this if I click on this again click the
Settings icon there’s some other cool things like where it disappears where it fades out so play around with some of those options let’s scroll down to the footer I’ll show you how to freeze this to the bottom of the page so right now the footer is just all the way down here at the bottom if we click on this and we click on the Settings icon we can freeze the footer now what does that look like because it doesn’t look like it did anything in the
editor if I go to preview the footer is actually gonna stay at the bottom of the page no matter where I’m at so as I scroll the footer and the header in this case are frozen so that just means they’re locked in they’re pinned to the bottom or the top that’s it for this tutorial if you guys like this video make sure you like this video subscribe for more tips and tutorials and I’ll see you guys next time