GutenKit Global Header & Footer lets you build and assign custom site-wide headers and footers Verwendung der WordPress Full Site Editor (FSE) and Gutenberg blocks. GutenKit adds pre-designed patterns and extra block features to help you design professional global header and footer layouts without coding. Once created, your header and footer appear across your entire site unless disabled on specific pages.

Watch the video guide –

Check the quick steps:

• Have a block theme active (required for Full Site Editing).
• In the WP dashboard, go to Aussehen → Herausgeber (Full Site Editor).
• Öffne das List View → select Header.
• Design your header with Gutenberg blocks or import a pre-designed header pattern from the GutenKit library.
• Next, select Fusszeile in the List View.
• Design your footer or insert a footer pattern from GutenKit’s templates.
• Save/Publish — your global header/footer now applies across the whole site.

For a detailed process, follow the instructions below.

Erforderlich: #

How to build custom header footer with Gutenberg for WordPress #

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

Darstellung > 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. Wählen Header in the editor.
2. Öffne das GutenKit-Vorlagenbibliothek.
3. Under the Patterns tab, scroll and find Überschriften 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 kommt mit 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.