Divi Product Highlight: Header Layout Pack

Posted on February 5, 2023 by 2 Comments

Divi Product Highlight: Header Layout Pack
Blog / Divi Resources / Divi Product Highlight: Header Layout Pack

The header is one of the first elements to load for any Divi website you create. This means the header often makes the first impression anyone sees for a website, making header design a crucial part of every website. Fortunately, you don’t have to create your header from scratch. There are lots of header layouts in the Divi Marketplace to give you a head start. Header Layout Pack is one example. This is a set of over 80 custom headers that work for just about any type of website. In this post, we’ll look at Header Layout Pack to help you decide if it’s the right product for your needs.

Upload Header Layout Pack

Header Layout Pack includes two zipped files. The first is a single file that contains all 81 layouts. These layouts are uploaded together. The second is a supplementary file and includes six files. These are the categories of the header layouts. This allows you to upload just the layouts in a particular category, such as WooCommerce. This is also helpful if you have a file-size upload limit and can’t upload all the files at the same time.

The process to upload the layouts is the same for all the files:

  1. Go to Divi
  2. Select Divi Library
  3. Click Import & Export
  4. Select the Import tab
  5. Click Choose File and navigate to the unzipped JSON files on your computer
  6. Click Import Divi Builder Layouts

Upload Header Layout Pack

Once the import completes, you’ll have 81 new items in your Divi Library (if you chose the main JSON file). They’re labeled and named according to their categories, so they’re easy to identify. These layouts are standard Divi Library layouts, so they can be used with any Divi layout for a page, post, or any layout in the Divi Theme Builder, and stored in Divi Cloud for use on any Divi website. We recommend using them in the Divi Theme Builder and assigning them to global or individual categories.

Upload Header Layout Pack

Header Layout Pack Examples

Let’s look at a few header layouts from each of the six categories. In my examples, I’ll load each layout into the Divi Theme Builder. New layouts are often added to the Header Layout Pack. I’m selecting them at random, but I’ll focus on a mix of older and newer layouts. When viewing them in the Your Saved Layouts tab, you can select the categories or view all the layouts.

Header Layout Pack Examples

For my screenshots, I’m using the home page from the free Home Remodeling Layout Pack that’s available within Divi. We’ll look at the wireframe, desktop, and phone versions of the headers.

Advanced Headers

Firstly, here’s a look at Advanced Headers, which contains 30 layouts.

Advanced Header V1

The first Advanced Header includes a Menu Module, Button Module, and two Text Modules. It also includes a Code Module with CSS.

Advanced Headers

The header includes styled dropdown submenus. A quote CTA button stretches on hover.

Advanced Headers

While the menus in the desktop version open on hover, the CSS creates a custom mobile menu toggle with buttons that include arrows showing if the menu can be opened or collapsed.

Advanced Header v1 - Mobile View

Advanced Header V20

The Advanced Header version 20 includes four Image Modules, three Blurb Modules, a Menu Module, and a Code Module.

Advanced Headers

The Image Modules can be used for logos. All Blurb Modules are clickable buttons for contact information, services, and a CTA to get a quote.

Advanced Headers

Mobile menu toggles are added to the phone version with CSS.

Advanced Header v20 - Mobile View

Advanced Header V30

Advanced Header V30 includes three Text Modules, and Menu Module, and a Code Module.

Advanced Headers

The Desktop version displays a red top menu bar with a short message and a phone number in large text. A logo and menu are placed under this and include a dropdown submenu styled to match the top menu bar.

Advanced Headers

While the desktop version includes red highlights, the Phone Version removes the red background of the submenus and includes the CSS toggles.

Advanced Header v30 - Mobile

Fullscreen Overlay Headers

Secondly, we’ll see Header Layout Pack’s Fullscreen Overlay Headers, which includes 3 layouts.

Fullscreen Overlay Header V2

Fullscreen Overlay V2 comes with lots of elements including text, images, buttons, blurbs, code, social media, a menu, etc.

Fullscreen Overlay Headers

It includes a hamburger menu icon with a hover animation. The CTA button widens on hover.

Fullscreen Overlay Header v2 - Desktop

The menu opens full screen when clicked and includes clickable submenus.

Fullscreen Overlay Header v2 - Desktop, Open

Here’s the phone version, which follows the same design.

Fullscreen Overlay Header v2 - Mobile

Fullscreen Overlay Header V3

Fullscreen Overlay Header V3 utilizes similar modules as the previous layout but creates a different design for the full-screen overlay.

Fullscreen Overlay Headers

The desktop header includes the CTA and hamburger icon with hover animation.

Fullscreen Overlay Header v3

Its menu covers half the screen while an image takes the other half of the screen.

Fullscreen Overlay Header v3 - Open

The phone version follows the same design for the menu, but doesn’t include the image.

Fullscreen Overlay Header v3 - Mobile

Header with Slide-ins

Thirdly, we’ll look at Header Layout Pack’s Header with Slide-ins, which includes three layouts.

Header with Slide-ins V2

Version 2 creates the slide-in with a Blurb Module, several Text Modules, a Menu Module, a Button Module, and code.

Header with Slide-ins

The slide-in menu displays the submenus under a message. At the bottom of the menu, you can find a CTA and an image.

Slide In v2

The phone version removes the image while keeping the menu design.

Slide In v2 - Mobile

Header with Slide-ins V3

Version 3 includes Blurb Modules to create the slide-ins.

Header with Slide-ins

The desktop slide-in includes hover animation and displays text and icons. Each of the elements is clickable.

Slide In v3 - Desktop

The clickable elements for the phone slide-in menu are much larger than the desktop version, making them easy to use on mobile.

Header with Slide-ins

Simple Headers

Fourthly, Simple Headers includes 30 layouts.

Simple Headers V15

Simple Headers version 15 has two Rows and includes a Social Media Module and several Blurb Modules.

Simple Headers

The desktop version includes a top bar with contact information. A logo is centered, and the menu includes submenus.

Simple Headers

The phone version adds the toggle buttons for the submenus.

Simple Menu 15 - Mobile

Simple Headers V22

This one includes two Rows to create the header.

Simple Headers

The top bar displays a CTA with a hover animation, the logo in the center, and a phone number. Its menu includes styled submenus.

Simple Headers

The phone version displays the submenus with toggles created in the Code Module.

Simple Menu 22 - Mobile

Square Logos Headers

Fifthly, the Square Logos Headers includes five layouts. They’re ideal if you have a logo that’s taller than most logos.

Square Logos Headers V3

This one was built with a Specialty Section to include a multi-column layout. The square logo is created with an Image Module in its own column.

Square Logos Headers

The desktop version includes a top bar with a search box and contact information. All menus are styled to match the top bar’s background.

Square Logos Headers

The phone version includes the submenu toggles created with CSS.

Square Logo Menu v3 - Mobile

Square Logos Headers V4

Version 4 includes three columns to create the logo, menu, and CTAs.

Square Logos Headers

The desktop version displays the logo and phone number in the two outer columns. A center column includes two Rows. The top Row shows contact information and a CTA, while the bottom Row displays the menu with a background styled to match the icons and the button of the top Row.

Square Logos Headers

The phone version includes a large logo area. The submenus include the toggles created with CSS.

Square Logo Menu v4 - Mobile

Woo Headers

Lastly, we’ll look at Header Layout Pack, which includes 10 WooCommerce headers.

Woo Headers V3

Our first Woo Header includes two Rows. The top Row includes a Text Module, while the second Row displays a Menu Module and several Icon Modules.

Woo Headers

The Text Module for the top Row creates a sales banner. Graphics include Person, Heart, and Cart icons that can link to the person’s account login, their favorites list, and their shopping cart.

Woo Headers

The phone version moves the icons above the hamburger menu. Like the others we’ve seen, this submenu includes toggles created with CSS.

Woo Header v3 - Mobile

Woo Headers V7

Woo header version 7 was built with three Rows that include Blurb Modules to create interesting WooCommerce links.

Woo Headers

The desktop version shows a message and the Woo links in the top bar. A middle bar displays a logo and a WooCommerce product search. The menu bar includes social media buttons.

Woo Headers

This is the phone version, which places the social media icons under the hamburger menu icon. Everything is spaced well on the phone screen, and it even includes the WooCommerce links and the product search box.

Woo Header v7 - Mobile

Woo Headers V10

Woo Header version 10 also includes three Rows. It includes a product search and uses a Text Module to create a banner.

Woo Headers

The desktop version displays a green sales banner at the top. The icons, button, and highlights match the green bar. The middle bar includes the WooCommerce icons, while the menu and search at placed at the bottom.

Woo Headers

Here’s the phone version, which places the search box under the hamburger menu. This one also includes the submenu toggles created with CSS.

Woo Headers v10 - Mobile

Purchase the Header Layout Pack

Header Layout Pack is available in the Divi Marketplace for $15. It includes lifetime updates, unlimited website usage, and a 30-day money-back guarantee.

Purchase Header Layout Pack

Ending Thoughts

That’s our look at Header Layout Pack. There are a lot of layouts in this header pack. They look elegant, have lots of design options, and they’re easy to use. Since the layouts were created by the same person, they share a commonality that I find makes them easier to use. The methods are standardized, so if you know how to customize one of the layouts you can customize the rest. If you’re interested in an extensive set of headers, Header Layout Pack is work considering.

We want to hear from you. Have you tried Header Layout Pack for your Divi website? Let us know about your experience in the comments.

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Get a Free Auto Parts Layout Pack for Divi

Get a Free Auto Parts Layout Pack for Divi

Posted on November 19, 2023 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Auto Parts Layout Pack that’ll help you get your next Auto Parts website...

View Full Post

2 Comments

  1. Good value for all different header layouts. Only criticism, quite a lot of them suddenly lack sophistication with the menu once viewed in the tablet and mobile viewport. Hopefully versions in the future, with better flexibility in this area with the Divi theme itself, will make this feasible. I may purchase this pack and take some of the layouts on file with the mobile layout finished and ready for re-export.

  2. I always admire Divi creativity and it is very easy to use. Can you please guide me the header or template layout that best showcase products related to education? Thanks in advance

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today