Transcript
Introduction
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 will 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.
Static home page and posts page
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.
Header and footer patterns
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 that 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. But what does that mean? It means if we customize the current header and footer template part, it will automatically update 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.
Adding a header pattern
So, without further ado, I will 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. 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 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 done, 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 enlarge my navigation menu by setting a custom size. The last step I want is to add some padding around my Row block. So, I’ll open up my Styles and the dimensions below and add more padding to create more space around the text. And then our new header is done. The next step is to save and then 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. Now you will see it below: Existing template parts. We can save and then follow the same process for all the other relevant templates.
Customizing a footer pattern
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 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. 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; this time, I will replace the dummy content with a new navigation menu. So I’ll click on Create a new menu and then select the privacy policy page I have already created and the terms and conditions page. In the last column, I will ensure I update the links to my social media platforms. Currently, there’s dummy content; 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 is updated automatically. Here is a view of the front end when I visit my contact page.
Conclusion
I trust header and footer patterns will give you a boost and provide you a strong foundation for your header and footer design.