Installation

Step 1

Ensure you have your menu set up in Appearance > Menus and assigned to the Primary Menu position.

Step 2

Unzip the zip file. It contains the Theme Builder Global Header/Footer Pack 1 and backups of the CSS and jQuery used. You will only need those backup files if any of the code gets corrupted on import.

Step 3

Navigate to Divi > Divi Library. Click the Import & Export button at the top of the page. 

Click Import, then Choose file. Locate the Week 143 - Theme Builder Global Header/Footer Pack 1.json file on your computer

Be sure to tick Apply Layout's Defaults to this Website. Then click Import Divi Builder Layouts.

When the import process is complete, you should see eight new layouts in your library.

Step 4 - Adding the Header & Footer

Navigate to Divi > Theme Builder and click on the Add Global Header box.

Select the Build Global Header option.

On the screen that opens, select Choose a Premade Layout.

Click Your Saved Layouts, then choose the Global Custom Header Layout.

When the page has loaded click Save in the bottom right. (Don't worry if it looks wonky, this part of the builder doesn't render the layout very well yet.)

Then click the X in the top right.

You will then be taken back to the Theme Builder and see the layout has been assigned as the Global header. Click Save Changes. 

Click Add Global Footer and follow the same process as above to assign your footer, this time selecting Global Custom Footer from the premade layouts.

Again be sure to save in the bottom right corner, click the X in the top right to return to the Theme Builder, and then Save Changes.

When you are done, your Theme Builder should look something like this.

To change your links etc. Open the Global Custom Header and Global Custom Footer layouts within the Divi Library.

That's it!