Install Masthead

1. Download and unzip

Sign in to My Account and download the Masthead zip from your order. Downloads need a signed-in account and an active licence.

Unzip the file on your computer. Do not upload the zip to WordPress. Inside you will find a masthead folder with:

• layouts/: one file per header and footer set, named masthead-header-footer-NAME.json (atelier, maison, oree, index, keystone, saffron, ledgerline, forge, halden-and-price, vela), plus masthead-banners-library.json, which holds all ten banners.
• images/: every image the layouts use. The images are also built into the layout files, so you do not need to upload this folder yourself.
• license.txt, documentation.txt and changelog.txt.

2. Import a header and footer

Each header and footer pair is a Divi Theme Builder template. Import one design at a time, or import all ten and assign the one you want.

1. In WordPress, go to Divi → Theme Builder.
2. Click the portability icon (the two arrows) at the top right, then open the Import tab.
3. Leave Override Existing Default Website Template and Override Existing Assignments unchecked. With both unchecked, the import adds a new template and does not change your current site.
4. Choose one masthead-header-footer-NAME.json file from the layouts folder and click Import Divi Theme Builder Templates.

When the import finishes, a new template named after the design appears in the Theme Builder grid. The images the layout uses are added to your Media Library at the same time.

Assign the template

A template only shows on your site once it is assigned. Open the new template, choose where it should appear (for example All Pages, or specific pages), then click Save Changes at the top right of the Theme Builder screen. Nothing changes on your live site until you save.

3. Import the banners

Each set has a matching banner section. All ten are in one file, saved to the Divi Library.

1. Go to Divi → Divi Library and click Import & Export at the top, then the Import tab.
2. Choose masthead-banners-library.json from the layouts folder and start the import.
3. The file is large, so the import runs in stages. Wait until it finishes before leaving the page.

The banners appear in the Library as sections named Masthead NAME Banner. To use one, open a page in the Visual Builder, click Add From Library and pick the banner that matches your header.

4. Connect your menu

The headers use Divi’s Menu module, so the links come from a WordPress menu you control. Until you choose one, the module can show a default list from your site (such as your post categories), so the navigation will not look like the demo yet.

1. Build your menu under Appearance → Menus and assign it to the Primary Menu location.
2. Check the header on your site. If a header should use a different menu, open the template, select the Menu module and choose the menu in its settings.

The demo menu links are placeholders that point to #. Replace them with your own pages. See Menus & mobile for the tablet and phone menus.

5. Replace the demo content

Every brand name, person, address, phone number, price and registration number in the demos is fictional sample text. Replace it with your own details before you publish.

• Text, links and buttons: open the template in the Visual Builder and click any module. Links set to # are placeholders.
• Logo: select the logo Image or Text module and change the image or the text.
• Colours and fonts: use each module’s Design tab, or Divi’s Global Colors and Global Fonts. The fonts each set uses are listed in license.txt, and Divi loads them from Google Fonts.
• Images: replace demo images in the module’s Content tab, and add alt text to every image you use.
• Forms: the newsletter and contact forms use Divi’s Contact Form module. The notification address in the demo is fictional, so set your own under the module’s Email settings.

6. Check it on every screen

Before you publish, preview the page at desktop, tablet and phone widths. Open and close the mobile menu, scroll down to see the sticky header, and tap the footer accordions on a phone.

Good to know

Hidden panels in the builder

Atelier, Forge, Halden & Price, Ledgerline, Saffron and Vela hide their closed menu or dropdown panel inside the Visual Builder only, using one small custom CSS rule marked “Builder only”. This stops the closed panel covering the page while you edit. It does not affect your live site, so leave the rule in place. To edit a hidden panel, select it in the Layers view.

Switching to another set

Assign a different template in the Theme Builder, or delete the template you no longer want. Images stay in your Media Library.

Next steps

• Pick a header and footer set
• Set up your menus
• Customise your layouts
• Troubleshooting & FAQ