The header and footer are a website’s most essential and vital parts. In WordPress, the header and footer come with themes by default. Generally, they remain the same on all pages. 

Sometimes we want to show different headers and footers on other pages considering the page’s content. It requires custom PHP codes or some complex customization in most themes to achieve this. But with Divi, we can do it easily with theme builder.

What is a theme builder in Divi?

Theme builder is a powerful tool that allows you to customize the whole website visually with Divi builder. Additionally, the archive pages (category, author, date, etc.) can be designed with Divi. And most importantly, we can create a template/design that will apply to a collection/group of pages without developing each page individually.

If you want to know more about this exciting tool, I recommend going through the following URLs. I am pretty sure you will love this. 😀

Introducing The Divi Theme Builder

The Divi Theme Builder Documentation

How to create a global header and footer in Divi using Theme Builder?

Creating a global header and footer in Divi theme builder is quite fun. It allows you to use the famous Divi builder to create the header and footer. You can use all the Divi modules and custom codes (if needed) to create a global header a footer.

We will not go into the details of creating a global header and footer as we will create a custom header and footer using the theme builder for a specific page. You can learn about creating a global header and footer using the theme builder by following the below articles of the Elegant Themes blog.

How to Create a Custom Global Header with Divi’s Theme Builder

How to Create a Custom Footer with Divi’s Theme Builder

How to create a custom header and footer using theme builder?

As you read this article, we assume you already have a header footer using the theme builder or a default header and footer. In this article, we will discuss creating a custom header and footer for a specific page while we have a global header and footer, which will apply to all pages on the website. Let’s get started. It will be fun to create this.

Step 1: 

When we go to WordPress Dashboard > Divi > Theme Builder, the theme builder page will look like the screenshot with the global header and footer added.

Step 2: 

Now, we will create a new template for a specific page. To do that, we will click on the plus icon that says Add New Template.

After clicking on the plus icon, we will see two options Build New Template and Add From Library. We will choose the Build New Template option, creating a window for selecting where the template will work. We will choose the specific pages option and check the page where we want a custom header and footer, and then we will click on Create Template button.

Step 3:

After creating the template, the theme builder will look like the screenshot below. We will see the global header and footer are duplicated in the new template we have created.

Now, this part is crucial. We have the new template with the global header and footer duplicated. Directly, suppose we edit those templates with Divi builder. In that case, we will be editing the global header and footer, which will be applied everywhere, not just on this specific page.

So, what can we do in this case to avoid overriding the global header and footer? To prevent this overriding, Divi has an option to disable the global option from the header and footer. 

Step 4:

In this step, we will disable the global option from the specific page template to avoid overriding changes to the global header and footer.

To do it, we need to click on the three dots icon beside the delete icon of the global header and footer from the new template. After clicking on the three dots icon, we will see the option to disable global, like the screenshot below.

We will need to disable global for the header and footer individually. And we will click on the Save Changes button in Theme Builder to save the template now.

Now we will see the background colors of the header and footer are changed, and it is showing the label as Custom Header and Custom Footer. This layout indicates that we are ready to edit the custom header and footer without affecting the global header and footer. Isn’t it easy? 😀

This custom header and custom footer will be duplicates of the global header and footer. We can either delete everything from the custom header and footer or customize it a bit from the existing design.

My custom header and footer look like this (just a duplicate of the global header and footer). 

Custom Header for the Specific Page Sample Page:

Custom Footer for the Specific Page Sample Page:

Now, if we make any changes to this custom header and footer, it won’t apply to any other pages. It will show on the specific page (sample page) only.

Some common mistakes we make while creating the custom header and footer:

  • The most common mistake we make when creating a custom header and footer for any specific page, we don’t disable the global option from the global header or footer. It’s essential to disable the global option first from the global header or footer before editing them.
  • Sometimes we hide the global header and footer by clicking on the eye icon, which we shouldn’t since it will disable the global header and footer from everywhere.
  • Another mistake we make is checking the page without saving the theme builder by clicking on the Save Changes button.

Some frequently asked questions about creating a custom header and footer for a specific page/pages:

Q [1]: Is it required to have a global header and footer to create a custom footer?

Answer: It’s not required to have a global header or footer to create a different custom header and footer using Divi builder. You can create a custom header and footer with a default Divi header and footer on the site. In this case, the custom header and footer will apply to the page/pages we select in the template, and others pages will show the default header and footer.

Q [2]: Is it required to create a custom footer if we have a global header?

Answer: It’s not required to create a global footer when having a global footer. You can either create a global header or a global footer.

Q [3]: Can I create a custom footer for a specific page using theme builder while having a global header with no global footer?

Answer: Absolutely! It’s OK to create a custom footer even if you have a global header and no global footer.

Q [4]: Can I use Divi Library items/layout to create a custom header and footer?

Answer: Yes, you can use Divi Library to load a custom header or footer you have saved in Divi Library. You can choose Add From Library option to load a layout from Divi Library while creating a custom header and footer. 

You can also choose Build Custom Header or Footer option, which will allow you to build them from scratch. And from there, you can load a saved section, row, or module if you want to add to the custom header or footer from Divi Library.

We will discuss this more in a separate article, hopefully.

Q [5]: Can we use the theme builder to hide the header or footer in a custom template?

Answer: Yes, we can easily hide the header or footer from the custom template we will create for a specific page. We will need to click on the eye icon beside the custom header or custom footer option and save the changes to be able to do it. We will create a separate article on this as well, hopefully.

Final Thoughts:

Theme builder is a game-changer tool to design a website with complete control over its contents. Besides creating various templates for groups of pages, we can make the global header and footer. And it’s possible to use different headers or footers on separate pages, which is a great feature. Feel free to reach me in the comments below if you are having issues implementing this.

About Author: