ACTION SECTION

"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."