In this lesson, we’re going to take a look at getting started with the header and footer blocks. Now the header block is a special block that has some extra functionality. So, let’s start there, let’s go ahead and take a look at the predefined blocks that we have and use that as a starting point. Let’s add a new block in we’re simply going to come down to the header section on the left hand, side – and this will show us all the header options that we have. We can switch between light and dark mode.

So we have various different design options to choose from we’ll stick to the dark mode. For this example and we’ll choose this first option, we’ll select it and that will insert it into our page. All we need to do now is reposition this. Let’s open the reorder blocks panel and let’s position this where we need it right at the top. Okay, the first thing we’re going to do is set the menu to be used now, we’ll cover the menus in their own video a little later.

But for now let me just quickly show you how to activate a menu. We simply come to the menu widget, we’ll select it and we’ll choose the first icon. This allows us to choose the menu, so let’s just set this to our normal main menu and we’ll leave it there. Okay, so now we’ve created our header section, we put a menu inside there, but it’s still just a normal header. How do we go about setting up some of these more advanced options?

Well, let’s open up the settings panel and inside there we’re going to choose the very first option. We can do a couple of things inside here. We can set the header to be sticky. We can set it to be static or we can set it to be fixed. So let’s take a look at the different versions: let’s set it to static.

So now our header section is stuck right at the top of the page. You can see, as we scroll up it scrolls alongside the page, pretty cool, let’s go ahead and choose the next option. So this time we’ll set this to be fixed and now this will lock it to the top of the page. So, as we scroll up, you can see our page scrolls behind it with the navigation. The header section set right at the top and locked in place.

The third and final option gives us a little bit more visual control over this. So, in other words, it’s now locked at the top of the page, but as we scroll up, you see it scrolls with the page until it then gets replaced with a slightly different version of our header. In this example, it’s a little bit slimmer, so pretty cool to see we can set up various different kinds of header sections, we’ll leave it as it is right now, let’s take a look at what other options we have. Let’s open this back up and take a look at the first set of options, we can now go ahead and make this global.

Now in lesson 15 we talked a lot more about making things global. So if you haven’t checked that out and you want a little bit more detail, go and check out lesson: 15 but for now we can make this a global header which will apply to every single page on our entire site, or we can set up conditions for where we want this to be displayed. So once we’ve made it global, you can see it pops up the little global symbol in the top corner and also, if we come back in, we can now set of display conditions providing you have Brizy Pro installed. So if we click the display conditions, we can now go and share exactly where we want this to display. So for our example, we’re going to set this to be the header on all of our pages.

We click save and that now becomes a global header and then we’ll display on every single page on our entire website. Even when we add new pages in the future, now add in the footer, it works in exactly the same way. Let’s close this down, we’ll scroll to the bottom of our design, we’ll add a new block, we’ll choose footers and we’ll simply find a design that we want to use. So I’m going to choose this one we’ll select that to insert it into a design. The same again, we can choose the menu we want to use in this particular design.

So we’ll just choose our main menu one more time and there’s our footer section all done. If we want to add more elements to this, we can do exactly that and then, when we’re finished, we can go ahead and make this another global item. So we’ll click we’ll choose the first icon, we’ll say make this global will come back up and if you have Brizy Pro installed, we can set our display conditions to be a little bit more granular. But for this example, we’re going to set this to be all in exactly the same way as we did with the header hit, save and we’ve now inserted a footer throughout an entire website. Simple