How to Create a Divi Header, Menu and Footer

From separate pages to a complete website

At the previous stage, you followed a practical exercise to learn how to build your first page with Divi 5. Through that project, you learned how to work with sections, rows, columns and modules, a method that you can now apply to create any other page on your website.

Once all your pages have been created and published, it is time to connect them. In this guide, you will learn how to use Divi Theme Builder to create two global elements: the header, or menu, and the footer. You configure both once, and they appear automatically on every page of your website.

With this final step, you will complete the practical Divi 5 construction phase and turn a collection of independent pages into a coherent website that is easy to navigate and ready for visitors.

What is Divi Theme Builder?

It works in exactly the same way as the visual editor you already know. The difference is that what you create here does not belong to a single page: you decide whether it applies to the entire website or to specific pages.

Why do we create the header and footer at the end?

We do this for two very simple reasons:

You first need to create the website’s pages

The navigation menu contains links to those pages. If they do not yet exist, you will not be able to add them.

You already know how Divi Builder works

After creating your first home page, you know how to work with sections, rows and modules, so designing the header and footer will feel much quicker and more natural.

Create the navigation menu in WordPress

Before designing the header, we need to create the menu that will contain links to your pages. This menu is created in WordPress, then connected to Divi.

• In the WordPress dashboard, go to Appearance → Menus.
• Click Create a new menu and give it a name, for example Main Menu.
• Click Create Menu.
• The panel on the left shows your available pages. Select those you want to include in the navigation: Home, Services, About Us and Contact Us.
• Click Add to Menu. The pages will appear in the right-hand column.
• Drag the pages to arrange them in your preferred navigation order.
• Under Menu Settings, select Primary Menu to assign it as the navigation menu.

Click Save Menu.

This is the menu that we will later connect to Divi’s Menu module inside the header. If you add new pages to your website in the future, remember to return here to add them to the menu.

Create the header with Divi Builder

The header is the navigation bar that appears at the top of every page on your website. We will create it using a single module that includes both the logo and navigation menu.

Open Theme Builder

• In the WordPress dashboard, go to Divi → Theme Builder.
• In the Global Header section, click Build Global Header.
• The Divi visual editor will open.

Insert the Menu module

• Insert a row with one full-width column.
• Inside the column, click the black + to insert a module. Enter Menu in the search field and select it.

Configure the Menu module’s content

• On the Content tab, find the Menu section and select the main menu you created in WordPress. The navigation links will appear automatically: Services, About Us and Contact Us.
• Expand the Logo section and upload your brand logo.

Adjust the Menu module’s design

We will now customise both the section containing the menu and the Menu module itself.

Section

• Select the section containing the menu and go to Design → Spacing.
• Under Padding, set the top and bottom values to 0 px.

Menu module

• Select the Menu module.
• Under Content → Logo, insert the logo from the Media Library.
• Under Content → Link, enter the logo’s destination URL, normally the home page.
• Go to Design → Sizing and set the logo size to 25%, for example.
• Under Menu Text, configure the Active Link Color using one of your global variables.
• Under Layout → Menu Alignment, select Right.
• Click Save to save the module, then also save the Theme Builder template.

Below, you will find a short video summarising all these steps so that you can follow them more easily.

Create a header for a specific page

By default, the Global Header applies to every page on the website. Some pages, such as a contact or sales page, may nevertheless need a different header.

Look at the colour of the Theme Builder blocks

In Theme Builder, green blocks represent global elements: any change you make to these blocks applies automatically to the entire website.

Black blocks represent custom templates and affect only the pages to which they are assigned.

Step 1. Create the template for the specific page

• In Theme Builder, click + Add New Template, then select Build New Template.
• The Template Settings window will open. On the Use On tab:
• Select Specific Pages.
• Choose the page to which you want to apply this template. In this example, we will use Contact Us.
• Click Create Template.

Step 2. Convert the global header into a custom header

The new Specific Pages: Contact Us template will appear with the Global Header as a green block, meaning that it still uses the website’s global header. To turn it into an independent header:

• Place the pointer over the Global Header block and click the three-dot ⋮ icon.
• Select Disable Global.
• The block will be renamed Custom Header and its background will become dark. From that point, any change you make will affect only the Contact Us page.

Create the footer with Theme Builder

The footer is the section that appears at the bottom of every page. Like the header, it is a global element that you configure once.

A good footer performs three functions: it reinforces your brand, makes important pages easier to access and provides contact information.

Open Theme Builder

• Go to Divi → Theme Builder.
• In the Global Footer section, click Add Global Footer.
• The visual editor will open.

Create the footer structure

The footer is organised into two rows: an upper row for the content and a lower row for the copyright.

• Insert a row with three equal columns.
• Insert a second row below it with one full-width column.

Add content to the columns

Upper row: the three content columns

• Open the section settings and go to Content → Background.
• Apply the dark background colour.
• In the first column, insert a Text module and edit its content.
• On the Design tab, change the preset to Text 2, the one we created on the previous page specifically so that the typography remains readable on a dark background. From there, adjust the styles that best suit this block.
• Duplicate the Text module and paste it into the other two columns. Its preset and design settings travel with it: you will only need to change the content and links.
• Beneath the text in the last column, insert a Social Media Follow module. Add the networks you manage: each network is added as an independent item, with its corresponding icon and link in the Link field.
• Return to the Text modules in the three columns and assign the corresponding link to each heading. Select the text in the module editor, click the link icon and paste the destination URL.

Lower row: the copyright line

In the lower row, inside the full-width column, insert three modules in this order:

• A Divider module.
• A Text module containing the copyright line.
• Another Divider module.

The two dividers frame the copyright and visually separate it from the upper block without the need to add borders or margins manually.

• When the content is ready, review and adjust the Spacing, meaning the internal and external spacing, for each row and for any modules that are too close together or too far apart.
• Click Save.
• Exit the editor and check the result on the live website.

Create a footer for a specific page

Like the Global Header, the Global Footer applies by default to every page on the website. In some cases, however, it may be useful to display a different footer on a particular page.

The procedure is exactly the same as the one you have just learned to create a custom header. The only difference is that you will work on the Global Footer block instead of the Global Header block.

Next step

This stage completes the practical section devoted to Divi 5. You now know how to build pages, create global elements with Theme Builder and organise a website’s navigation coherently.

The next step will be to extend your website’s functionality. You will discover new tools that will allow you to adapt it to your project’s needs and prepare it for continued growth.

Continue with: Essential plugins for your WordPress website.