The Divi theme offers plenty enough options to customize your site header. You can set the header color, header size, typography of the menu, and so on. You can also add items like search icon, social media icon, email address, and so on. Still, you might want more. If it is the case, you can use the theme builder feature of Divi to create your own custom header template. Unlike Elementor (read: Elementor vs Divi) and Brizy, Divi offers no premade templates (called layouts in Divi) for header and footer on its library. However, it doesn’t mean you always need to start from scratch every time you want to create a new custom header or footer layout. Elegant Themes — the developer of Divi — regularly releases new free premade header and footer layouts via blog posts.
How to Import a Premade Header and Footer Layout in Divi
Working with a premade layout is a bit tricky in Divi. The reason is that in Divi, layout is divided into three types:
- Regular layout (et_builde): A layout exported from a page or post
- Library layout (et_builder_layouts): A layout exported from Divi Library.
- Theme Builder Layout (et_theme_builder): A layout exported from Divi theme builder.
Each layout type can only be imported based on their respective context. For instance, you can only import a header layout on theme builder. You can’t import a header layout from the Divi Builder editor. When importing a header layout from the Divi Builder editor, you will see the following error message.
You can read our previous article to learn more.
Importing a Header/Footer Layout
As mentioned earlier, Divi offers no premade header/footer layouts on its library. Instead, you can get a premade header/footer layout from the official blog of Elegant Themes. Here is an example of a premade header/footer layout you can download.
After downloading the layout (which is available in a ZIP format), unzip to get the JSON file. Next, go to Divi -> Theme Builder on your WordPress dashboard. Click the two-arrow icon on the right side.
On the appearing dialog, click the Import tab followed by NO FILE SELECTED to select the JSON file of the header/footer layout you want to import. Click the Import Divi Theme Builder Templates once the file is selected.
Wait until Divi is done importing the layout. Divi will automatically add a new template block on theme builder once the importing process is done.
To change the display conditions, you can click the gear icon on the template block, which will appear when you hover your cursor over it.
Don’t forget to click the Save Changes button to apply the changes.
