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 out our article on How to Enable Full Site Editing.

Once you’ve activated a Block Theme, you can now edit your Header and Footer. Go to the Site Editor by hovering over the Appearance tab in your WordPress dashboard then click Editor.

Once you click Editor, a new page will open — which is your current home page. You will see two options - Templates and Template Parts. A separate page where you can customize all your templates or template parts will open if you select either of the options.

Your site’s Header and Footer can be edited in Template Parts.

Once you click on a Template Part, a new page will open where you can freely customize your site’s Header or Footer 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 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. When 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 you customized in the frontend: 

Follow the same steps in the Footer section to design your site’s Footer.

Just add the Stackable blocks you want 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. 👍