How to Import Header and Footer Layout in Divi

Updated: August 16, 2022

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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Divi.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.