Hi everyone, this video we're going to take our...

this Hero section here and expand it, so it goes full width...

we'll do it to our portfolio site as well...

we'll make this navigation white box all the way to the edges...

whilst allowing a section in the middle, we retain for the navigation...

we'll upgrade this bottom chunk as well...

to have a section inside of it...

so let's look at making full width navigations and container boxes in Webflow.

All right, so first up let's look at the past project...

our kind of like Club, that we did...

everything is inside one container, I'm going to pin that there...

so I've got one container, and everything is inside of it...

and it feels like you should only have one container, that is not true...

can have lots and lots of containers...

it depends on whether you want everything to be restricted...

within the center part, or like our design...

where the header goes all the way across...

and so does this bottom gradient part.

So let's start with this navigation...

mainly-- what I want to do is--

actually, let's delete the navigation section that I made...

and I just want to show you, under the 'A' for add...

down here, under Components there's one called Nav Bar...

if I add that to my design, kind of try and get it in the right--

did I get it? Close...

it's in there, and if I drag it out of my container...

look what happens, by default it's actually...

comes structured with this full width section...

and inside of it is a container that contains the bit...

for my logo and all my text buttons...

so that's kind of already done for us in that structure.

So that's what we're going to rebuild...

we won't use this default Nav Bar...

because we only have like one button...

so we don't need all this complexity in here...

so I'm going to get rid of you...

I'm going to undo until my Nav section came back...

basically, all I want to do is grab this section...

and get it outside the container, which is great, now it's full width...

there's nothing really going on with this container...

it's got a style of some Box Shadow but nothing much is going on...

now I want to put a container inside of it...

so 'A', to go to add, grab the container...

see if you can get it in the inside, and there we go...

we've done that sort of section...

I'm going to add a button here for the moment...

I'm going to grab this one, copy that one, put it inside...

you can see, it's kind of contained inside this container, funnily enough.

So that allows you to push, you know...

do some styling for this whole width...

in our case, just background color...

but retain it in the center of the site...

really common web design practice.

This one here doesn't really need doing, because I have got...

I've got no Fill on this section here, called Section Hero, just no Fill...

so the background is showing through...

and that's the background color that I'm using...

so you can have sections first, and containers inside of them...

you can have lots of containers, let's look at Apple.

So this one here would be a Nav Section, with a container inside...

this one here, the same...

this one here probably doesn't need it, but could...

same here, you can see, they all stretch, they're using kind of the full width...

let's do another example of this bit down the bottom here...

because our design has these guys...

in our little thumbnails in the middle section.

So in here, I've just got this lower section...

now this brings up a good point.

So I could now just go throw a container, 'A' for container...

get in there, and I could start building my cards...

which we'll do in a second, and that's fine...

the only trouble is, I call this a section, and what do we know about sections...

what's one of the pains for sections?

If I go-- because at the moment my design doesn't have anything else...

I have not done a footer in this one...

just to keep the course a bit shorter...

but it's probably going to be a footer maybe in here, within this big chunk...

and if I want a footer section, so 'A' for section, put in here, big red lines...

you can't put sections inside of each other...

so what about this, what do we do?

So this thing here is probably better not called a Section...

because looking at my design, this is just ornamental...

this, you know, portfolio, thumbnails is a section...

then maybe there's a testimonial section and then a footer section...

all within here, so what do we do with it?

So what I'm going to do is I'm going to bin it...

I'm going to, remember, actually I'm going to rename this Class...

because I like it, I want to keep it...

because it's got my gradient in it, but it's no longer Section Lower...

this one's going to be called "Color Background Gradient"...

and I'm going to go, you, and delete that section, I don't need you...

what I do need though is, what's a generic thing that we can add...

okay, generic box, a generic division of space...

this thing here, Div Block, try and get it in the right place...

I got lucky so it's no longer--

it's not inside of my Hero container here, it's here, excellent.

So I'm going to say, you now have this Div Block...

just going to use my background color gradient...

it's the same thing except now I can go to 'A'...

and I can add a section, and then call this my "Thumbnail Section"...

I can add another section called "Footer"...

so yeah, sometimes you just have generic box...

which is just a Div Block, I want to finish it...

because now, does the section go in next or the container?

Looking at my design, if I had a footer here...

and it's going to be the same sort of width...

I'd have one container and my thumbnail section...

plus my, sorry, my thumbnails, plus my footer, plus the testimonials...

depends on what your-- you know, the structure you're trying to get.

So in my case a container is going to be good, 'A' for container...

you're getting sick of that, but you're getting good at it...

my container is working great...

it's actually not as white as that container...

remember, we added-- we wanted our website to be a bit wider...

so we added a Container Class of Container Width...

we did it the same for the Nav up here, so Container Width...

ah, reusable Classes, feels good.

So inside of here I'm going to add my section...

and inside of this section, this is going to be my section for my thumbnails...

and this particular one is going to have some spacing...

it's going to have some top margin...

I'm going to guess it for the moment...

and we're going to add a grid inside...

but that's kind of that sort of structure.

So there's an internal container, we've worked out that sometimes...

we have just an ornamental Div around the outside of the stuff...

because in the future I want this section...

plus I probably want a footer later on to go inside of there as well...

so two different sections, you get me.

Let's go and update this one, I want to show you this one...

so you can leave now if you've got the principle...

if you want one more example...

we're going to do it to this one, retrofit it...

we're going to push it all the way to the edges...

like we showed at the intro...

this one, not tricky, it's just, this, the Navigator is tricky to use...

so what do we do, how would you do it?

Pause it, have a think about how you do it...

go and do it, come back to it, see ya...

see if you got there, if you just want to watch...

so what I'm going to do is, I need this guy not to be in this container anymore...

because that container contains them, we want it to be free...

so the section needs to be free, so how do we do it?

I'm going to go 'A', I'm going to add...

actually, I'm not going to go Section, I'm not going to go to Add...

I'm just going to drag this guy out of the container...

and it's kind of hard, get them out, left, right, left, right...

so he's outside, and down the bottom here...

he already is full width, excellent.

What do we need to do now, while he's down here...

what we might do is put a container inside of it...

and try and lump all of this...

so 'A', container, I'm going to put it in there...

and I'm going to try and either do it...

we'll try and do it on the, on this, oh, it's working...

it's working...

kind of working...

so you get the idea.

You can try and do it on this, it's actually easy enough...

when they're all stacked on top, actually, just straight to the right...

drag you to the right, drag you to the right...

you can't select more than one at a time at the moment, as far as I know.

So here we go, we've got this section, which is perfect...

because it's my Hero Section...

and all the stuff is inside this container, here we go...

now we need to move him up in the list...

because he needs to be in between Nav and Sponsors still...

so what do we do with these guys, what I'm going to do is...

I'll probably put a container in first...

so I'm going to go 'A', container...

I'm going to drag it right to the bottom...

I'm not going to get it, so I'm going to try again...

'Container', you can't put containers inside of each other...

so there you go, he's outside the thing...

I want sponsors to be in it...

oh, that worked.

If you find this tricky to use, it is totally tricky to use...

they're getting better every time I seem to load this thing...

things work a little bit nicer in here...

so that container there contains all of these...

so now it's just the Layer Order...

I think I might have accidentally done it all...

so I've got this Top Container...

which has got my...

Nav in it, then I've got this Hero Section, which spreads out to the full width...

inside of that I have my container, that contains all the stuff in here...

sometimes the section goes inside the container...

if you want it to be inside, sometimes the container is inside this section...

it's like Inception...

"You're not helping, Dan," hope I'm helping.

So that's how we retrofit that site...

I don't like it because this probably needs to be full width as well...

but it's the exact same process as doing this last one here...

so if you want to do it, go do it...

if you don't, you just want to move on, "Come on, Dan, next video"...

okay, your wish is my command, let's go, next video.