How to design header & footer?

Hi, this is Sandra from GREYD and today I’d like to show you the many possibilities to build, create and design the template parts header and footer in GREYD.SUITE. As already mentioned, header and footer both are so-called template parts that can be edited in the site editor. Here in the patterns you will find the template parts. You can also have more than one header to display for example different headers and / or footers on different pages.

So let’s have a look at which blocks are important for the header. First of all, there’s the block “site logo” with which you can change and edit the logo of your website. Please be aware that if you change the logo here, it’s not only changed here in the header, but it changes for the entire website. So that’s very important to know. Here on the right you then have some settings for size, whether you want to link it and also to use as a site icon, which is this little symbol here. If not, you can also select a different one here. And you also have some design options: rounded, duotone, etc.

We also have the site title, which automatically inserts the website title. Here it’s the same thing. If you change the title of your website here, it means that you’re not only editing the header, but you’re editing the site title of your website. So please be aware of that. There’s also a different way to include the site title in GREYD.SUITE, for example by just using a headline and using GREYD.SUITE’s Dynamic Tags and insert the site title like that automatically and dynamically. So if you change the site title, this will automatically change in the frontend as well.

So, we need some space. I just removed it again, because I’m now going to show you the navigation block, which enables you to include and build menus for your website here. You can just add individually your page links, you can also work with custom links, which means external links, you can include social icons, you can also include an entire page list that automatically enters the list of all pages of your website. You can also work with spacers and any other elements here in the block. So lots of lots of options. And if you then click on the individual links, you can also edit the label, you can see the URL and have some additional options. And you can also have individual stylings, for example you could show that as a button as well, something like that, and have sizes here for the typography.

A very common use case for the header is also a sticky header. Right now my regular header disappears when scrolling and maybe I want it to stick to the top of the page and maybe change color and size when being scrolled. You can easily do that by putting all your header content into a pinned box, which is a variation of our content box block. I’ll just do some basics stylings, that it doesn’t look that bad, okay that should do it.

Now I can add an animation to that box that is dependent from scrolling, we can choose an absolute scroll point, like for example 50 pixels in both directions. And now we want to say we want the header, the box, to change its color maybe to white. In that case that’s a custom animation. Background white. And the animation is not only available to the box itself, but also to all its child elements. So for example we could say we want the logo to change its size. So we also add an animation here with the same trigger, 50 pixel, both directions, and in that case we want it to scale and become smaller.

So let’s save and have a look at the frontend. So it doesn’t look that different, but when I scroll, you can see that the header becomes white and the logo becomes smaller, bigger and smaller. So you can easily do that.

You can already see it here, another very common use case are dropdowns, overlays, off-canvas and burger menus. And for all that we have one block that’s called the popover block that’s available in various variations. Of course we have a detailed tutorial video on our popover block in the Helpcenter, so I’m now just going to show you some details that are relevant for the header. We already have the block here. It’s called popover and it always consists of two parts, which is the burger (or could also be a regular button – you can change that here) and the overlay or inline popup, off-canvas or dropdown.

So what you can do in general is say on which screen sizes you want this popover to appear. That way you can say for example I only want burger menus on mobile screens and not on desktop for example. We’ll just leave it like that. And then for the button or burger, you get various design options. The ones for the buttons are more or less exactly the same as you already know them from regular GREYD.Buttons. If you switch to burger here, you have various styles and shapes to choose from. So lots of possibilities. You have some color settings for the burger and its background, you can make that dependent from screen size and/or have an hover effect. And there are also some settings for size, border radius, etc.

And then we have the popover. Let’s start with the inline popup. If you want the burger to open a popover somewhere, you can also do that somewhere in your content, not only in the header, you can define where you want it to be positioned, from where the animation should get into the screen, you have some size settings, spaces, you can define whether or not you want to have a close button and of course also lots of design options, lots of color options, background, for the close button. You can even define how the backdrop, i.e. the page in the background, should behave. You could have a border and a border radius, work with shadows and there are also some design options for the close button, so I can change the size for example and you can also have different effects in the background.

So that would be the variation popup. You can also use the same block to create an off-canvas menu or an overlay menu. They’re more or less the same. Overlay as the name says lies above the website content and off-canvas just moves the content to the left. There are more or less the same design options. The only difference here in the settings is that the position is just left, top, bottom or right. And the other options are more or less the same. Same for dropdowns. I don’t have content in it, that’s why it looks like it. That’s the options.

With regards to the content that appears in your overlay, in your off-canvas, in your popup or in your dropdown, you’re completely free. You can put any menus, navigation blocks, you can have content here, whatever you like. There are lots of lots of possibilities. So, basically with that popover block you can build all imaginable use cases for your header. And the same applies to the header in general. We’ve only had a look now at some special blocks like logos, site title, navigation and so on, but of course you can put all the content and designs you want in that header. And the same applies to the footer template and as I already said, you can also have various different header and/or footer templates on your website and have for example a different header on your homepage than on your blog for example. It’s super easy to do.

For more videos and information please visit our Helpcenter.