Download our Divi Header layout pack for Divi.

It is FREEBIE FRIDAY and for this edition, we have 3 FREE Divi Header Layouts that have been hand-crafted just for you! Best of all, they are easy to customize to fit your brand or site and can be used with any Divi install.

Preview:

Header Layout 1

Header Layout 2

Header Layout 3

We’ve got 3 gorgeous FREE Divi Header Layouts for you this week:

Header Layout 1: Different Logo on Scroll

In this header we use some CSS properties in the advanced tab to change our logo on scroll to account for the change in background color when we scroll down.

Divi Header Layout 2: Search front and center

Here we are focusing on accessibility for our store to help convert visitors to customers. We do this with a search bar front and center, even when the user scrolls and a prominent “Shop Now” button. And it just looks pretty darn cool.

Divi Header Layout 3: Gradient Slant with some Animations

This is a simple Divi Header Layout where we use a gradient to create a nice slant that flows into the contact and social info at the top of the header. We also use some slide in animation for the logo and Call-to-Action.

Using the Custom Divi Header Layouts:

Step 1) Import the layout pack into the Divi Library

Similar to importing any layout pack we release, Import the JSON file directly into the Divi Library. Once it is imported you will see that 3 Divi Engine Summer Promo Headers have been added to your library.

Step 2) Add the Header you like to the Divi Theme Builder

Head over to Divi > Theme Builder > Add Global Header > Add from Library > Your Saved Layouts > Select the Header you want to use.

Step 3) Customize the Header

When you add the Divi Header Layout from the Library, you will be able to edit all the modules to reflect your website and brand just as you would any other Divi Section, Row, or Module. Have fun!