How to Use Stackable Blocks in Headers and Footers


Full Site Editing (FSE) allows you to edit all aspects of your website using blocks, including your site’s Header and Footer.

The first step in order to edit your site’s Header and Footer is to make sure that you are using a Block Theme. To learn more about what Block Themes are and how to enable them, you can check this documentation article.

Once you’ve activated a Block Theme, to edit your Header and/or Footer, you need to go to the Site Editor by hovering over the Appearance tab in your WordPress dashboard, and then clicking Editor.

Once you click Editor, a new page will open — which is your current home page. You will see several editing options, but to open the site editor navigation, you will need to click on the WordPress icon found on the upper left corner of the editor. You will see the options Site, Templates, and Template Parts. A separate page where you can customize all your templates and/or parts will open if you choose to select any one of the options. 

Your site’s Header and Footer can be edited in the Site option, but to make it easier, you can also edit it by navigating to Template Parts, and then selecting the specific Header or Footer template you like. 

Once you click on the template, a new page will open where you can freely customize your site’s Header with the Block Editor.

In this example, we are editing our site’s Header.

Editing your Header is just like editing any normal page. Just delete any block in the template that you don’t want to use, and click on the plus sign (+) button to add the blocks you want. 

As you can see in the photo below, our Header now consists of mostly Stackable blocks: 

You can customize the blocks like you do in normal pages by navigating to the inspector on the right side of the editor. 

Once you’re done customizing your site’s Header, just click the Save button. 

When you create a new page later on and publish it, you will see the Header your customized in the frontend: 

Designing your site’s Footer goes through the same process, with the difference being doing so in the Footer section. 

Just add the Stackable blocks you like to your site’s Footer and customize it accordingly. 

Once you’ve saved your changes, it will be reflected on the frontend of your site. 👍