Exclusive Divi Cyber Monday Gift #5: An Outstanding Header Layout Pack

Posted on December 7, 2019 by in Divi Resources | 11 comments

Exclusive Divi Cyber Monday Gift #5: An Outstanding Header Layout Pack

It’s Time

Cyber Monday

Is Here!

Did you miss out Black Friday Sale? Don’t worry! Our biggest discount ever has been extended for Cyber Monday. Black Friday and Cyber Monday are the only times each year that we offer our biggest discount ever. It only happens once per year, and when the sale is over the discount is gone for a 356 days! If you have been waiting for the perfect time to join the Divi community or the best time to upgrade your account to Lifetime, this is it! You can even get our biggest discount ever when you renew your expired account!

Click Here To Access The Sale!

This year as a special thank you to everyone who purchases an Elegant Themes Membership during our Cyber Monday Sale (and to our wonderful Lifetime customers!) we’ve created several exclusive gifts from our staff to you. Today we’re highlighting gift #5: The Divi Header Layout Pack. This Header Layout Pack is full of distinct header designs that can be used on a wide variety of websites. In this post we’ll show you how to download these header layouts and use them on your very own Divi website today.

A Look Inside the Exclusive Cyber Monday Divi Header Layout Pack

Header #1

divi header layout pack

Featured in the Backpack Product Layout

View Live Preview

Header #2

divi header layout pack

Featured in the Startup Theme Builder Pack

View Live Preview

Header #3

divi header layout pack

Featured in the Software Theme Builder Pack

View Live Preview

Header #4

divi header layout pack

Featured in the Service Theme Builder Pack

View Live Preview

Header #5

divi header layout pack

Featured in the Non Profit Theme Builder Pack

View Live Preview

Header #6

divi header layout pack

Featured in Interior Product Layout

View Live Preview

Header #7

divi header layout pack

Featured in the Furniture Product Layout

View Live Preview

Header #8

divi header layout pack

Featured in the Coffee Product Layout

View Live Preview

Header #9

divi header layout pack

Featured in the Beauty Product Layout

View Live Preview

Header #10

divi header layout pack

Featured in the Fashion Product Layout

View Live Preview

How to Get the Exclusive Divi Header Layout Pack Today!

divi header layout pack

For New Members

If you don’t have an Elegant Themes Membership yet, you can get these Divi Header Layouts (plus a lot more) by clicking the button below to claim the Cyber Monday deal. Once you are a member, you will have access to the Divi Header Layout downloads in your members area.

Claim the Deal Before It Disappears!

For Existing Members with Yearly Subscription

If you already have a yearly subscription to Elegant Themes, you can gain access to these free Divi Header Layouts (plus a lot more) when you upgrade to a lifetime subscription during the Cyber Monday deal. Click the button below to claim the deal. Once you are a lifetime member, you will have access to the Divi Header Layout downloads in your members area.

Claim the Deal Before It Disappears!

For Lifetime Members

If you are already a Lifetime Member, you already have access to these exclusive Divi Header Layouts! All you need to do is login to your members area to find the download links for each of the packs.

Go to the Cyber Monday Perks Page in the Members Area!

How to Download and Use the Divi Header Layouts on Your Own Divi Website Today

Subscribe To Our Youtube Channel

Downloading the Pack from the Members Area

All of the Divi Header Layout downloads can be found in your members area. To access the downloads, you must first login to the members area with the username and password created when you signed up as a member.

divi header layout pack

Once you are logged in, click the link on the far right of the members area menu called “Cyber Monday Perks”. Under Cyber Monday Perks, find the Header and Footer Layout Pack perk and click the Download the Pack button to download the Header Layouts.

divi header layout pack

Once the “Divi Header Footer Packs” file has been downloaded, unzip the folder and open it. Find the folder named “Header Pack” and open it. There you will see a total of 11 json files included. Ten of the files can be used to import each of the header layouts individually.  One of the files is called “Divi-Header-Pack.json. This file can be used to import the entire Header Layout pack (all the headers) to your Divi Library at once.

divi header layout pack

Importing the Header Layout(s) to the Divi Library

Now that you have the Header Layout files ready, you can use them to import the headers to the Divi Library. Once done, they will be ready to add to any page or template on your site.

Here’s how to do it.

From the WordPress Dashboard, navigate to Divi > Divi Library. Then Click the Import/Export button at the top of the page.

Divi Product Layout Pack

In the portability popup modal, select the import tab. Then choose the file named “Divi-Header-Pack.json” from the unzipped folder you previously downloaded from the members area. This complete pack file will add them all at once. Then click the Import button.

divi header layout pack

Once done, you should see all 10 Header Layouts imported to the Divi Library.

Adding a Header Layout to a Page in Divi

Now that you have all 10 Divi Header layouts into the Divi Library, you can easily add them to any page/post on your site.

Here’s how to do it.

From the WordPress Dashboard, navigate to Pages > All Pages. Then hover over a page that you want to add the new layout to and click the edit link.

From the Divi Builder, click the Load From Library icon in the settings menu.

divi header layout pack

Select the “Your Saved Layouts” tab. There you will see a list of all the Header Layouts you imported to the Divi Library earlier. Make sure to uncheck the option to replace existing content. Then choose the header layout you want to use from the list.

divi header layout pack

Then move the section (or sections) containing the header up to the top of your layout.

(Important: There may be more than one section that make up a header so make sure relocate all section that make up the header layout to the top of the page)

Also, to keep the default header from showing on the page, you can select the Blank Page template under the Page Attributes box.

divi header layout pack

Update the page and you will have a brand new header for your page.

divi header layout pack

Using a Header Layout as a Global Header in the Divi Theme Builder

If you want to apply one of the header layouts to all of your pages/posts site-wide, you will need to use the header layout in a new Theme Builder Template. Since this is a header, you may want to add it to the default website template as a Global Header.

Here’s how to do it.

From the WordPress Dashboard, navigate to Divi > Theme Builder. Next, click the Add Global Header area within the Default Website Template. Then click to build Global Header.

divi header layout pack

Select the option to Choose a Premade Layout.

Divi Product Layout Pack

Select the “Your Saved Layouts” tab. There you will see a list of all the Header Layouts you imported to the Divi Library earlier. Choose the header layout you want to use from the list.

divi header layout pack

And just like that, you have completely new global header for you entire site!

Don’t  forget to save the template layout before exiting.

divi header layout pack

Then save the changes on the Theme Builder.

divi header layout pack

Final Thoughts

This Theme Builder pack is part of our Cyber Monday Deal where we are giving away a FREE limited edition Divi Header Layout Pack to Cyber Monday customers and Lifetime Members. By joining our empowered community during these days and becoming a member, you’ll get:

  • 25% OFF EVERYTHING
  • All of the exclusive Theme Builder packs, the WooCommerce Product Layout Pack, and the Header Layout Pack for free
  • Access to our awesome themes and plugins
  • Bonus Prizes & Exclusive Deals from our partners

Seize the opportunity and become a member today by going to our Cyber Monday Deal Page.

Premade Layouts

Check Out These Related Posts

11 Comments

  1. Love these but have not been able to get them to behave like the default top menu navigation bar that can be transparent and OVER the first Section or Module on the page. They push everything down and you have to have a solid color background. Even when making everything transparent you simply see the page bg color. Any ideas on how to get these to behave like the default header and appear over top page content/sections. Thanks! Keep up the good work.

  2. I can’t see any download…

  3. those headers are not responsible, they cover half of the mobile screen

  4. Hi, Jason, this is fantastic, thank you so much.

  5. Very nice, Jason! Great!
    But in the mobile version, header №2 is displayed without social networks and e-mail. What’s problem?

  6. Header #2 the ONLY thing that shows up on mobile is everything left of the notch. Can we get a fix because that header is awesome and I REALLY want to use but obviously it won’t work the way it is now.

  7. a very good collection of header, this help me a lot when I giving header example in my digital marketing’s class

  8. Hi, thanks.
    How to use a fixed navigation bar whit theme builder?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest