"In this episode, we're going to choose your header. Now, it really is one of the most simple episodes, but there's three things I just want you to keep in mind. Okay. Number one is don't spend more than five minutes on this episode. You're just going to choose a header of which there's hundreds to choose from, and then I'm going to show you how to customize it. And I'll be racing through that customized header bit because it really is quite simple stuff and the UI is fairly intuitive enough for you to work it out yourself. So use the timestamps if you want to skip ahead or maybe even play this episode on double time. The second thing I want you to understand here is that I do need, you have to chosen the header before we move on to day two, episode one, where we build out your menus in navigation.

So think of this episode as a precursor, as a quick setup before we get to day two. So definitely just jump ahead, choose a header, and maybe choose some of the customised header preferences. You'll be flipping between the menus, the navigation area, and the header area tomorrow in episode one. Okay. And the third thing to realise is, although we've got a 100 pre-formatted headers here, and we'll always add in more, you can actually go and customise your own headers with HTML, CSS and JavaScript if you know code but that's not part of the five-day challenge, so stay tuned for later masterclass episodes, where we'll focus on that. And if you don't know code, you might be able to learn code quite quickly when you watch these masterclass sessions because the coding here is not so complicated. So without further ado, let's get on with it. Let's pick your header and then race through it and we'll move on to the next episode.

Okay. So here we are in the headers area, which you can access by the main menu, go to styles as you know, and then in the top bar we can click the headers tab, which will bring you through to the headers area where you can see we've got hundreds of headers and we're always adding more. But right now I've got header 17 as my default, which has got a logo on the left, it's got the menu and it's got search, it's got the Action Section, a shop, and the menu icon as you can see here in the preview. Well, with there being so many headers, I can actually filter those. So I've got, you can see here, a horizontal header. I could also have a vertical header with a vertical on the left that could also filter via logo position. So left center and right, you can see here I'm on left, which is the default, and you can also choose what you want in the header. You can have basically a header menu, which also is a multi menu.

Okay. And you could have a menu icon, which is the menu icon which rolls out a Drawer or a Menu Section, which we're going to be explaining that in this episode. You can have an Action Section, which is your main call to action that rolls down a form as you can see here. And you can have a shop. Of course when you add items to a cart that will display and it opens up what we call a cart Drawer, and you can have a search which opens up a quick search by default, or you can use to link it to a full search page. Okay. So we'll be covering more of that as we go."

"Okay, so header menu. Header menu quite simply is the main heading navigation that sits in your header and you can filter the headers with the header menu. Just click header menu and then click search. Okay. So if you want a header navigation, this will now show all the headers with that navigation. Now I can select here header two, and you can see I've got a very simple header with just a logo and the header navigation. Okay. Well, if I hit customize, I can go and tailor that. I could decide even to hide or show that. So I'll click hide and you can see now I've got header two, which is hiding the header navigation. Okay. I can click back, click show, and now I've even put it into the center and now that will show my header navigation and in the center. Okay. I click back, I could also put it on the right, click save, and now it's going to show my header navigation over to the right. Pretty simple stuff."

"Okay. Now I'm going to choose a header with a menu icon. Well, in the filter here, if I choose menu icon and header menu, it's going to show me all the headers that have got both the header menu and a menu icon. Hit search, and those are all the headers. Okay. So if I jump over to my preview and I can now see it rolls down what we call a Menu Section. This is a custom page that we can design however we like with a menu in it. That's what we call a Menu Section, which you're going to learn more about that in forthcoming episodes. Okay. Now if I hit the mobile, I can also see... Click my menu icon, I can also see my Menu Section there. Okay. So Menu Section is one thing that we can choose. I'll just pop back into desktop. Now we're going to have a look at a Drawer menu.

So to look at that, I'm going to go back to the customised header button, and here I'm going to select Drawer menu. You see there's two types, I've got a Menu Section and a Drawer menu. So I'll select Drawer and click save. Now if I jump back to my preview, you can see it rolls out a Drawer. Now this is a multi menu, it builds it automatically. We don't have to customise or build anything, that just works. So if you're a newbie, you might select Drawer menu. You don't have to do any work, it just works. Okay. So there you can see that in mobile and desktop.

So now I'm going to show you a Menu Section. So back to the customised header. I'm going to click section. And you can see the direction. I might want this to roll from the top. In this place, I'll show you what it looks like from the right. So I'm going to click here and it slides in from the right. Okay, you're getting what's happening, I choose top. Obviously what's going to happen is the Menu Section is going to roll down from the top as you can see here. Okay, so that's what we call our menu icon.

Now if I go here, I could actually add some text. We used to always have the word menu because people didn't know what an icon was, so I could write any text there such as the word menu, and it's going to include that. If I delete it and leave it blank, then it's going to remove it and resize it so it's just a menu icon. Okay. If I want to edit this custom menu, I can click here to the Menu Section, go into the Editor, and that's going to take me to the page Editor where I can update everything. You can see it's got the merge tags there that I talked about in the first episode, which you can control in the my account area. So I'd leave those merge tags there. When you save on the front end, they're going to appear.

Now in the Layouts' Drawer here, there's a quick introduction, there's lots of Menu Sections pre-made in the type. I'll just scroll through the list of Themes. Let's see what we should have, let's choose this one from Enki. Okay. There's all of the Layouts, but if I want to filter that down and only see the Menu Section, if I could type here, then you can see there's two Menu Sections on this Theme. I'll hold shift and click that, and then it's going to drop it in.

Now, I could go and customise that menu just like any other page, so we'll explore that a little bit further, but I could go right in here and tailor anything I want to. In this case, I'm going to change the background Colour. I've got my space cadet here with this more blue, and I like it on a gradient angle of which you'll see. I like it, this particular design, around 130, I could change this here to say home, and I could actually put a link back home in here manually, which I could just link in the link list here to the homepage, and that will populate that to, what we call our index page. I could put in some SEO title in there as well. Okay. So this is how we build custom Menu Sections just by dropping them onto the page.

And on day three, we'll also show you how we build these out from absolute scratch as well. So you can use the Layouts or build them from scratch. When you hit preview now you can see that our Menu Section is updated, so it can be that quick. There's hundreds of these Menu Sections to choose from, so you're either going to choose a menu Drawer or a Menu Section, and then you can see here that Menu Section also updates on mobile with our accordion."

"Okay, so that's a quick introduction to Layouts there, starting to see a bit of the power about what's coming. Okay. So now we'll move on to our Action Section. So an Action Section is perhaps one of the most important elements of your entire website. This is the area of your website that gets the most form completions because it sits in a header, which is also sticky, so as people scroll, the header is always there and the action button is always there on mobile and on desktop. So wherever they go on any page, they're always looking at this button. It's why mobile websites always work and always convert well, because there's this big call to action button that's always there. And as you saw in previous episodes, in the Colours' episode, even when you scroll, we can make that change Colour to really Drawer attention to people as they go deeper down the page.

So this is what we call your Action Section. Now, just like the Menu Section, you can actually customize this build from scratch, which we'll learn on day three or just tweak this to customize your own. So in here I'll go with that same Colour. I'll keep it 126 just for now. And then I could go back to the Layouts' Drawer and I could search all of the different Action Sections as well. So in here I could look for Action Sections by Theme. So I'll choose Alphonso in here. Okay. And then that showed me all the Layouts but if I want the Action Section, I'll just choose Action Section, and there's that one. Hold shift to drop it onto the page, save me having to drag and then delete the one that I don't want or go and customize whatever.

In this case, I'm happy with the one that I've already got there, but I could go to type as well and search. Again, let's go and have a look through all of these different types of Layouts. I'll just filter here, Action Section, and you can see all of the Action Sections that we've got to choose from. There's loads here. We're always adding more, and so let's say I'll choose this one. Hold shift to drop it on the page again, to save me having to drag, and I can then go and customise whatever I want to with this particular one. I could change back to the blue. This one's got a background image. Okay. So in this case, I'll just have a gradient going over the top of it. We're going to learn all about that in forthcoming episodes.

Cool. Okay. So if I can just delete the one that I don't want, I prefer this one, and then I can save and exit and we've now got a brilliant call to action that's on brand very quickly without really too many design skills. Now I could change the words that are in the call to action here. It says quick quote, so clicking that customised button here. Got the close that's uppercase as well. I could change the icon that we use, maybe I'll choose the paper airplane, whatever icon I want there.

And sometimes I just want to click to a different page. Sometimes it's... Use this button to click to a page on another website, maybe some ticketing system that you're using. So I can type in as long as I put in https:// and the whole URL, it will link away and open that in a new window so your website stays open, so top tip there for if you're not using a roll down Action Section. You can see here it's updated with the plane saying quick quote, and as I click it, it rolls down our Action Section in this case, one with a testimonial."

"So if you've got an online shop, it's absolutely essential that you have a header with a shop button. That's going to show people the number of items that are in the cart, but it's also going to roll out the cart Drawer so that they can see all of the items explicitly what's in their cart. Okay. So the key thing about this is that in the filters, obviously you can filter to show only headers that have the shop button as you can see here. But also at the moment, just be aware that I've highlighted everything so I could remove things from the filters and it's going to show me more with the shop button. Okay.

Here we've got what we call the cart Drawer. Very simple stuff. So I can go and customise this and I can change the label. Now if my cart has got nothing in it, I can choose to show the word cart. Okay. Now, I can also change the icon that appears there. I'm using the user icon because I like to show people that this is my cart because they can see the dollar value there, but also they can know that people have got a user account. So I find that works really nicely because people... The user now knows they can click that, go to their profile and see everything in their profile, so past orders. They might want to change their billing information, update the card, the shipping information, how they want to receive notifications.

So I recommend that you have a my account, but more traditionally, even if you have got my account, people like to have a shopping cart icon as well. So you can choose a shopping cart icon or a user icon in there, and when you're happy with that, just press save. I'm actually going to put mine back to user icon. It makes more sense for the site I'm actually building, which I like. So there you can see my information. Now, I've already added things to my cart before, so it's got $0. I'm going to show you how to change the preferences of that later. But out the box, it's going to say $0 and it's going to fall back to cart, the word cart, if it needs it. Okay. Don't have to worry about that right now. It just works. Okay. So that's an introduction to the shop button, but of course, we're going to cover a lot more than that if you actually have got a shop in Day Four."

"So if you've got an online shop, it's absolutely essential that you have a header with a shop button. That's going to show people the number of items that are in the cart, but it's also going to roll out the cart Drawer so that they can see all of the items explicitly what's in their cart. Okay. So the key thing about this is that in the filters, obviously you can filter to show only headers that have the shop button as you can see here. But also at the moment, just be aware that I've highlighted everything so I could remove things from the filters and it's going to show me more with the shop button. Okay.

Here we've got what we call the cart Drawer. Very simple stuff. So I can go and customise this and I can change the label. Now if my cart has got nothing in it, I can choose to show the word cart. Okay. Now, I can also change the icon that appears there. I'm using the user icon because I like to show people that this is my cart because they can see the dollar value there, but also they can know that people have got a user account. So I find that works really nicely because people... The user now knows they can click that, go to their profile and see everything in their profile, so past orders. They might want to change their billing information, update the card, the shipping information, how they want to receive notifications.

So I recommend that you have a my account, but more traditionally, even if you have got my account, people like to have a shopping cart icon as well. So you can choose a shopping cart icon or a user icon in there, and when you're happy with that, just press save. I'm actually going to put mine back to user icon. It makes more sense for the site I'm actually building, which I like. So there you can see my information. Now, I've already added things to my cart before, so it's got $0. I'm going to show you how to change the preferences of that later. But out the box, it's going to say $0 and it's going to fall back to cart, the word cart, if it needs it. Okay. Don't have to worry about that right now. It just works. Okay. So that's an introduction to the shop button, but of course, we're going to cover a lot more than that if you actually have got a shop in Day Four."