Customizing a header with patterns

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

Learning outcomes

1. Replacing a header with a pattern.
2. Modifying and adjusting blocks within the pattern.
3. Editing the typography of the site title and navigation menu.
4. Changing the background colour and the colour of the text and links.
5. Adding a Separator block to use as a bottom border for the header.
6. Inserting a Gallery block and editing the style of the images.

Comprehension questions

1. What are the benefits of using a header pattern?
2. How many header patterns come with your theme?

Transcript

Welcome to Learn WordPress. Join me as we design a header using a pattern. A header pattern is a pre-made header design that is ready to use or modify. Instead of nesting and grouping blocks together, patterns have already done that for you.

Make your way to Appearance and click on Editor. This will take you into your Site Editor, where you can edit your templates and template parts. We are going to modify our header template part. Make sure you select the header and then click on Replace. Now you will see it says Existing template parts at the top but we’re going to scroll down to Patterns and here is a range of patterns to select from that come with the Twenty Twenty-Two theme. You can scroll through the options and choose the right one for you. I’m going to scroll right to the bottom and select the Centred header with navigation, social links and salmon background.

Firstly, I’m going to select the Navigation block. So when I click on my List View, I’ll ensure that I select the parent block. Then I’ll click on the three vertical dots on the block toolbar and select Remove navigation. Then I will continue adding a new Navigation block and selecting Start empty. And now I will add my pages that I’ve created one by one. Next, I’m going to move the Site Title block outside of the Columns block. So I will send the navigation menu to the middle and then use my List View to drag the Navigation block below the site title in the first column. Once I’ve done that, I will still use my List View, select the middle column, click on the three vertical dots and remove column. Now I will drag my Site Title block above the Columns Block. Then I will change the alignment of the block to wide width and align it to the left.

Now I would like to change the appearance of my site title. So I’ll open the sidebar settings and firstly change the size of the site title to large and the appearance to medium, and then lastly, the letter case so that every word starts with a capital letter.

Now we can move on to the navigation menu. So I will ensure that I select the parent block and then use the sidebar settings to change the size to small and to view appearance, click on the three vertical dots next to typography and ensure that you select Appearance. And in this case, I will change the appearance to light.

Next, I would like to edit the colours of my header pattern so I’ll use my List View and select the entire group. And then in my sidebar settings I will change the background colour to black, the text to white and links to salmon. To ensure that my site title also displays white, I need to select the site title and then deselect the option to make my title link to my home page. Please note though, you can either toggle Make title link to home to remove the link colour from the title or you can change the link colour at the site title level, which will override the colour applied to the group level.

Next, I’m going to insert a Separator block to use as a bottom border for my header. Once inserted, I will select the wide line in my sidebar settings and change the alignment to full width. To move it to the correct location in my header I will select my Group block and then use my sidebar settings to change the bottom padding to zero. And once you have done that, you will notice that the separator block sits flush against the black background.

The last step is to add some images, so I’m going to click on the Inserter and insert a Gallery block, and insert three images from our Media Library. Then I will change the style of the images to rounded and then select the Gallery block to change the block spacing to 20 pixels; followed by adding a duotone layer over the images. And once I’ve done that, I will select the Gallery block and push it up to below the site title. And now we can get a better view of our design from the front end, all thanks to a pattern.

Visit Learn WordPress for more tutorials and training material.