In Gutenberg, you can build a global header footer for your entire site. The Full Site Editor (FSE) brings the Gutenberg header footer builder feature to WordPress. 

You need to have a WordPress block theme installed on your website to enable the full site editing feature and build a custom header footer with Gutenberg.

Required: #

How to build custom header footer with Gutenberg for WordPress #

After installing the block theme, go to your WordPress and navigate to:

Appearance > Editor

And you will enter the Full Site Editor. Click on the edit section and open the List view  (hamburger icon) from the Top Toolbar.

Build WordPress Header in Gutenberg #

After that select the Header in the list view and you can use blocks to design your custom header. 

Alternatively, you can also use the pre-designed patterns from GutenKit to streamline the process. To use the pre-designed patterns:

1. Select Header in the editor.
2. Open the GutenKit Template Library.
3. Under the Patterns tab, scroll and find Headers patterns.
4. After that, choose a pre-designed header pattern and import it to the page.

The header you have built here is a global header and will be available on your entire website unless you disable it for specific pages.

Build WordPress Footer in Gutenberg #

Now to create a global footer, select Footer in the List View, and similar to the header, use the Gutenberg blocks to design a custom footer for your website.

Just like headers, GutenKit has pre-designed patterns for Footers as well. Repeat the process of the header, but this time with footers.

1. Select Footer in the editor.
2. Open GutenKit Template Library

3. Under the Patterns tab, enter the Footer patterns.
4. Choose and import a pattern you like.

As this is a global Footer, it will be shown on all of your website pages, including headers and footers.

GutenKit comes with 500+ ready designs to help you build professional-looking websites in minutes. Also, it offers 68+ blocks, 18+ modules, and tons of advanced features for the block editor. Install GutenKit and experience the page builder features in your website built with Gutenberg.