HEADER COLOUR

"So I can navigate via this anchor bar, and you can see it scrolls me down to all the swatches of the header. So let's explore that just to get your eye in. Well, you can see this is the header background. And this is the header background. So this is the header text. This is the header text in white. When I hover over a text link, it goes to the sky blue, which is this swatch. And the active text is when, let's say, I'm on the about us page, that's going to light up in blue to say I'm on this page, so that's active. Well, I've just said that I didn't like this white on hover. Well, you can see here the background of the dropdowns are this blue, and when I hover over, they're this blue. So you can see here it's the background and the background hover.

Okay, so active is when I'm on that page. It will light up in that Colour in the menu. So we can see here the dropdown text is white and the hover over text is white. So the text is white, and when I hover it's also white. So first things first, let me go and change this to a darker more legible Colour. So if I do that, now I can just press save. And what that'll do at the same time there it will just update the preview for us, which now when I hover over, you can see that it lights up in blue. Well, let's have a look at that active page. Let's make this active a bit more pronounced. And we could do that as well with this one if we wanted to as well. So if I press save now, just jump over here and press save. Again, it's just going to refresh that preview for us so that we can see it.

And now if I go to one of the pages, let's just say I'll go to the product page. You can see the pages lights up, and now this lights up too. So if I just want to refresh the preview, I can just hit refresh and it will bring me back to our main preview. So I want you now to go and update your dropdown menu Colours and your header Colours. But the main one I also want you to play with immediately is your Action Section button. You can see here that mine is the sky blue with white, which I don't like that because it's not so legible. So what I can do now is just go through these swatches and find where it says action button.

Well, you can see here, here's my action button, background, which is blue, but my text is white. So let me make that our space cadet blue. And then you can see here the header scroll. So when I scroll, this can change this bar as well. So I could change this background to a completely different set of Colours when I scroll. But in this case, I don't want to do that. I want to bring attention to this action button. So what I'm going to do is actually make this one pink when I scroll. So at which point I can go and press save. And again, that's just going to save, update the preview for us, and now we can see our button. And when I scroll, it's nice.

So once you've added your primary Colours and hit sync and let our AI Website Bots go and update those right the way around the website, I'm actually happy for you to move on to episode four. So it's as simple as that for this episode. But what I'm going to show you now is that there's actually hundreds of swatches and the reason why we use the AI Website Bots, if you were to actually go and update all of these swatches, then this could take you a considerable amount of time, right? Because there's swatches for everything. So in the rest of the episode here, I'm just going to drill down to all these swatches and show you what they are.

Sometimes you might find that you've got a conflict where one Colour isn't quite working, but what you can do is then go and come back to that particular swatch, press save, and that will go and adjust that right the way around the website. So you've actually completed the episode at this point, but now the rest of it's just going to be more of an education of what these swatches are, should you need to go and change them. And then at the very end of the episode, like I say, if you don't have a full Colour palette at this stage, I'm going to show you a few little tricks and hacks of how to generate a really good Colour palette."