In this lesson we will create and customize a header and footer.
Block themes allow us to build our entire site using blocks,
including pages, posts, templates and template parts.
We have already explored nesting blocks and using block patterns.
In this session, I'm going to create and customize the header and footer of my site
using patterns that come with my theme.
Header and footer patterns provide a strong foundation to work from
and most of the layout has already been done for you.
Before we start, I wanted to highlight that I am using the Twenty Twenty-Four block theme
and if I go to Settings, Reading, you will notice I have set a static
home page and posts page.
And because I've done this, if we make our way to pages and open up our home page,
we will notice that our home page has been assigned to the default page template,
the same as the other pages in my navigation menu.
Let's go ahead and get started.
We will make our way to the Site Editor, where we can edit and update our templates.
Please note, at this stage all of our templates share the same header and footer.
So if we open up our pages template, for example,
we will notice it is the same as our 404 template and single posts template, for example.
But what does that mean?
It means if we customize the current header and footer template part, it will update
automatically on all the templates it's on.
But if I replace the header or footer on a template, I will need to manually replace
it on all the other templates I'm going to use it as well.
So, withou further ado I'm going to open up my page template and start customizing
my header and footer.
Let's start with the header and open up the List View.
I want to replace the header, so I'll click on the three vertical dots and then select
Replace header.
And now I can select from a range of patterns that come with my theme.
I'm going to select Header inside full width background image.
Once selected, I'm going to start modifying.
I will make sure I select the Cover block and then replace the background image
with an image I've already uploaded to my media library.
Next, I will select the Site Logo block and upload a transparent image that I've saved
as a logo in my media library.
Then I will select the Cover block again, open Styles and change the opacity to zero
as I've selected a light image.
Once I've done that, I will select my Site Title block and choose a darker text color.
Then I will click on the three vertical dots next to Typography, select Font family and
choose a new font.
I also want to enlarge the site title so I will go ahead and set a custom size.
Then we can move on to our Navigation block.
Once the Navigation block is selected, I'll open Styles, change the color of the text,
change the font family and also enlarge my navigation menu
by setting a custom size.
The last step I want to take is to add some padding around my Row block.
So I'll open up my Styles and below dimensions, add some more padding to create some more
space around the text.
And then our new header is done.
The next step of course is to save and then to update my other templates with this new
header that I've created using patterns.
So for example, let's go ahead and open up our 404 template and replace the header.
And now you will see it below Existing template parts.
We can save and then follow the same process for all the other relevant templates.
Now we can return to our page template and move on to our footer.
In this case, I'm not going to replace the footer, I am merely going to update the existing
pattern and then it will automatically update on all the other templates.
Firstly, I will enlarge the Site Logo block and then I will add my site tagline to the
Site Tagline block below the site title.
Now we can move on to the three columns on the right.
I will select the title of the middle block and change it to Quick links.
Then I will select the Navigation block which has been added with dummy content.
And in the sidebar settings next to menu, I'll click on the three vertical dots and select
the header navigation.
I will also open the settings tab and double check that the orientation is vertical.
Now we can move on to the next column and this time I'm going to replace the dummy content
with a new navigation menu.
So I'll click on Create new menu and then select the privacy policy page which I have
already created as well as the terms and conditions page.
And in the last column, I will make sure that I update the links to my social media platforms.
So at the moment, there's dummy content and therefore I will replace the hashtag with
the correct link.
And now my footer is done but I can of course make further modifications.
After saving, we can make our way to our other templates, for example the 404 template and
we will see that the footer updated automatically.
And here is a view on the front end when I visit my contact page.
I trust header and footer patterns will give you a boost and provide you a strong foundation
for your header and footer design.