Customizing a footer with patterns

Learn how to modify and change a footer pattern to meet your design needs.

Learning outcomes

1. Searching and replacing a footer with a pattern.
2. Adding a site logo.
3. Replacing placeholder content.
4. Inserting a navigation menu and modifying the orientation.
5. Changing the background colour and the colour of the text and links.
6. Editing the typography of text and links.

Comprehension questions

1. Why is it important to include navigation items in your footer?
2. Where can you find header patterns?

Transcript

Hi and welcome to Learn WordPress. In today’s session, we are going to create a custom footer using a pattern. A footer is of course the collection of elements found at the bottom of a webpage. It is essential as it gives site visitors one more chance to take action and should aim to improve user experience. To customise your footer, make sure you have installed a block theme, such as Twenty Twenty-Two and then make your way to the Site Editor where you are able to customise your templates. Then scroll down to the footer of your home template, and when you select the footer, click on replace.

Here you will be able to access all the available patterns that come with your theme, and once you find the pattern that you’re looking for, you can click on the pattern, and it will insert into your template automatically. Now you can modify it as you please. Another option is to use a pattern from the Patterns Directory. So I’m going to click on the List View, select the footer, click on the three vertical dots and remove the footer from my template. Then I will make my way to the Patterns Directory at wordpress.org/patterns and search for a footer pattern. Here are a variety of footer patterns that are ready for picking. So once you find the pattern you’re looking for, you can merely click on copy, make your way back to your website, click on the three vertical dots, insert after and then paste it into your template. Now you can change this pattern as you please.

But I would actually like to modify a different pattern, so I’m going to click on Undo and make my way back to the Patterns Directory. I’m after the pattern called Three column footer. So once you’re ready, click on Copy, make your way back to your template and paste it below. Before we continue, I quickly wanted to show you what the footer pattern will look like once we’ve modified it. Let’s start in the left column. So firstly, I will add my Site Logo block and select an image from my Media Library. And then open my sidebar settings and change the style to be rounded. Below that, I will add our company slogan which is We design for you and make it bold. Before I move on to the social links, I will select the footer, open up my sidebar settings again and change the background to black. Once I’ve done that, I will open up my List View, open the group, go to the first column and ensure that I select the parent block of the social icons. Once I’ve done that, I will change the icon background to salmon and the icon colour to black.

Next, I’m going to change the headings of my other columns to 30 pixels each and then move on to my second column. Firstly, I’m going to use my ListView to select all the paragraphs in the column and then click on the three vertical dots and select Remove blocks. And then below the heading, I will add a navigation block and select one of the navigation menus I’ve already created. Once I’ve inserted the navigation menu, I will use my sidebar settings and change the orientation to vertical. Then I’m going to change the heading of the column to Quick links.

When I move on to the third column, I will change the heading to Resources and then use my List View again to select the paragraphs in the column, click on the three vertical dots and select Remove blocks. Then I will add another Navigation block, but this time I will select Start empty and then firstly add a Privacy policy page, then a Product support page and then a Testimonials page. Once I’ve done that, I’ll make sure I select the navigation menu in my List View and also change the orientation to vertical. I realise that these navigation items were already below each other due to having longer titles, but if I forgot to select the vertical orientation, and I added another shorter navigation item, it would have appeared next to Testimonials. So now any future items will also be displayed vertically.

I will leave column four as is, but lastly, I would like to change the colour and typography of some of the links and text. So let’s start in the second column. Select the navigation block and then click on colour and change the text colour to salmon. Then we can scroll down and click on the three vertical dots next to typography and select Appearance and then change the appearance to light, and now we will do exactly the same in the third column. Select the navigation block, change the colour to salmon and change the appearance to light. Lastly, I will also change the colour and typography of the phone number and email address. Once we save and close the sidebar settings and List View we can see the modified version of the pattern that we selected. When we look at it from the front end, we will also notice that the header and the footer complement each other.

Visit Learn WordPress for more tutorials and training material.