The Theme Builder allows you to create global header templates that can be applied anywhere on your site including the Divi header.

These custom Divi header layouts are added into the Theme Builder and will replace the default Divi header.

By adding the Menu module and any other Divi modules into your header template, you can easily build header and navigation menu layouts for any page of your website without editing theme files or using a 3rd party Divi header plugin.

This article will list the best free and premium Divi header layouts and layout packs.

Affiliate disclosure* – Links to  Elegant Themes and 3rd party websites may contain affiliate code. You will never pay extra for using these links, but you will help keep Divi Theme Examples a forever-free resource for the Divi community. Thanks for your support.

Premium Divi header layout packs

The following products offer multiple custom Divi header layouts within a single product.

1. Divi header pack

Divi headers layout pack best seller

The best-selling Divi headers layout pack on the official Divi marketplace comes with 960+ header layouts.

Key features include;

  • Off-canvas menu
  • Built using Divi modules
  • Fully responsive on all devices
  • 116 design headers
  • 40 easy-headers using Divi’s default settings
  • 350+ functional headers
  • 960+ total head layouts
  • 30+ menu effects
  • 30+ dropdown menu effects
  • 4 custom dropdown menu animations

Buy via the Elegant Themes official marketplace;

  • This product is available to buy via the Elegant Themes marketplace as an unlimited site license for $19.
  • The price includes 1 year of updates and support.
  • There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.
  • Released under GPL license

Price: $19
Developer: Dope Designs
More Information

2. Headers for Divi

Header for Divi

The divi flexile headers paid-for layout pack contains 80+ Divi header templates and is sold by Divi Extended.

Key features include;

  • 80+ headerdivi menu layouts
  • Headers for WooCommerce, with email, phone, and address, with Call To Action button, with a search bar, & with social media links
  • Off-canvas and slide-in headers
  • Slide headers with background image
  • Headers with menu icons
  • Animated headers
  • Headers with vertical and rotated menus
  • Thin bar/compact headers
  • 10 RTL headers for Divi
  • Header with divider
  • Responsive design

Buy via the Elegant Themes official marketplace;

  • This product is available to buy via the Elegant Themes marketplace as an unlimited site license for $19.
  • The price includes 1 year of updates and support.
  • There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.
  • Released under GPL license

Price: $19
Developer: Divi Extended
More Information

3. Header Layout Pack

Header Layout Pack

This layout pack contains 80+ Divi header templates and is sold by Mark Hendriksen.

Key features include;

  • 80+ header layouts
  • Header with overlays
  • Header with slide-ins
  • WooCommerce headers
  • Headers with overlays
  • Responsive design

Buy via the Elegant Themes official marketplace;

  • This product is available to buy via the Elegant Themes marketplace as an unlimited site license for $19.
  • The price includes 1 year of updates and support.
  • There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.
  • Released under GPL license

Price: $15
Developer: Mark Hendriksen
More Information

4. DiviWP Header Sections

DiviWP Header Sections

This layout pack contains 40+ Divi header templates and is sold by DiviWP.

Key features include;

  • Mobile menu transitions and auto collapsibility
  • Slide-in Option
  • Sticky and Fixed Compatibility
  • Beautiful Header Transitions
  • Cart and Search icons are customizable or you can switch them off in the module settings.
  • Dark Background Compatible
  • Optionally split action menu items
  • Divi Mega Menu Support
  • 2 and 3 columns Mega Menu drop-down options
  • Top Secondary Rows to experiment with
  • Tablet and Mobile Views
  • Divi Menu Modules and separate CSS and jQuery
  • Customizable

Buy via the Elegant Themes official marketplace;

  • This product is available to buy via the Elegant Themes marketplace as an unlimited site license for $19.
  • The price includes 1 year of updates and support.
  • There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.
  • Released under GPL license

Price: $19
Developer: DiviWP
More Information

5. Divi Headers Layout Pack

Divi Headers Layout Pack

This layout pack contains 35 Divi header templates and is sold by Divi Awesome.

Key features include;

  • Side toggle menu layout
  • Slide-in menu layout
  • Full-screen side menu layout
  • Responsive design

Buy via the Elegant Themes official marketplace;

  • This product is available to buy via the Elegant Themes marketplace as an unlimited site license for $19.
  • The price includes 1 year of updates and support.
  • There is a 30-day money-back guarantee when buying products via the Elegant Themes marketplace.
  • Released under GPL license

Price: $15
Developer: Divi Awesome
More Information

Free Divi header layouts

The following Divi header layouts can be downloaded for free and include step-by-step tutorials on how they were created. These are mostly elegant themes layout packs that accompany an in-depth tutorial on the Elegant Themes blog.

1. Fixed and sticky Divi header layout

Divi fixed and sticky header layout

This tutorial shows you how to create either a fixed or sticky Divi header using the Theme Builder.

By default, there is no setting within the header template to make it sticky, but a few lines of code can be added to the module to make sure it always sticks to the top of the page. New positioning features added to Divi can also be used for the same effect.

The sticky header starts with blurb modules visible above the main navigation menu but scrolls off the screen as the user scrolls down the page. As the navigation hits the top of the screen it will stick and act like a fixed header as the user continues to scroll down.

Key features include;

  • Make your Divi header section fixed or sticky
  • The sticky navigation section uses custom code within a code module
  • Free to download with social share
  • Free for personal and commercial use

Price: Free
Developer: Divi Theme Examples
More Information

2. Animated header CTA layout

Divi animated header CTA

This tutorial and Theme Builder header template adds a CTA (Call-To-Action) button to the main navigation menu that appears with a delay and animation effect.

A CTA button is used to draw the users’ attention with the aim of getting them to click the button. By adding the extra delay and animation to the button the CTR (click-through-rate) for the button will increase. The layout uses the inbuild animation options on the Button module.

Key features include;

  • Animates CTA button added to the main navigation section
  • Choose from 8 CTA animation styles
  • Free to download with an email subscription
  • Free for personal and commercial use

Price: Free
Developer: Elegant Themes
More Information

3. Rotated global header layout

Rotated Divi header template

This tutorial shows you how to make your header rotate and sit along the left of the screen using the Divi Theme Builder.

The Theme Builder template and tutorial allow you to create a rotated global header that will display on the lefthand side of the screen. The header has a transparent background so that the content of the page/post is still visible. This menu is similar to a vertical Divi menu, but the menu items and icons are displayed vertically rather than horizontally.

This is one of the cool Divi header layouts and would likely suit a more design-orientated niche rather than a corporate website.

  • Unique rotated header
  • Comes with a mobile-friendly version
  • Uses custom CSS to rotate the menu
  • Free to download with an email subscription
  • Free for personal and commercial use

Price: Free
Developer: Elegant Themes
More Information

4. Shrinking header on scroll layout

Divi shrinking header layout

This tutorial shows you how to shrink the height of your header when the user scrolls the page down.

The default Divi menu had a built-in option in the Theme Customizer that allowed you to set a height for the menu before and after scroll. When using custom Divi header layouts in the Theme Builder you will need to add some extra code to make this happen. By shrinking your header you can regain some extra screen real-estate as the user scrolls down so that the page or post content is easier to view.

Key features include;

  • Make your Divi header shrink on scroll
  • Uses JQuery and CSS code to trigger the shrinking effect
  • Free to download with an email subscription
  • Free for personal and commercial use

Price: Free
Developer: Elegant Themes
More Information

5. Animated promo bar layout

Divi global animated promo bar

This tutorial shows you how to create an animated promo bar that sits below your main header navigation.

Promo bars are a great way of letting your users know of a special offer or new product and can be easily added using the Theme Builder. There are a number of 3rd party plugins that can do this for you but this tutorial and Theme Builder template allow you to add a promo bar using Divi modules and some custom CSS.

Key features include;

  • Add a promo bar without a 3rd party plugin
  • Free to download with an email subscription
  • Free for personal and commercial use

Price: Free
Developer: Elegant Themes
More Information

6. Collapsing nested mobile menu layout

Divi nested mobile menu

This tutorial shows you how to add a mobile collapsing nested menu with the Divi Theme Builder.

You can make your mobile menu more useable by creating a menu that offers collapsable nested menu items. The tutorial shows you how to set up your menu and assign CSS classes to your menu items, build your menu with the Theme Builder and Divi Menu module, and add custom CSS & JQuery code inside a code module.

Key features include;

  • Improve the usability of the mobile menu with collapsible, nested menu items
  • Free to download with an email subscription
  • Free for personal and commercial use

Price: Free
Developer: Elegant Themes
More Information

7. Animated header layout

Divi animated header template

This tutorial shows you how to animate your divi custom header with the Divi Theme Builder.

Give your header a little extra emphasis and style by incorporating animated elements. This tutorial shows you how to create 2 different styles of the header which can easily be adapted to create any number of unique header styles.

Key features include;

  • 2 animation styles included
  • Includes CSS Code for VW responsiveness
  • Free to download with an email subscription
  • Free for personal and commercial use

Price: Free
Developer: Elegant Themes
More Information

8. Show header below page’s 1st section layout

Divi header below top content layout

This tutorial shows you How to place your header below the 1st Divi section using the Theme Builder.

Show off your 1st section of a page or post using Divi by using  JQuery added in a code module. The code automatically places your header from the theme builder below the 1st section of any page the template is assigned to. A good way to have a hero section of the page/post title at the very top of the page before the menu.

Key features include;

  • Add content above your main navigation menu
  • Columns remain next to each other on smaller screen sizes
  • Free to download with an email subscription
  • Free for personal and commercial use

Price: Free
Developer: Elegant Themes
More Information

9. Header with an inline login form layout

Divi inline header login form

This tutorial shows you how to add an inline login form to your custom header in Divi using the Theme Builder.

If your site includes user login then this tutorial and Theme Builder layout allows you to add a login form within your custom Theme Builder header. The header uses the default Divi login module but restyles it using some custom CSS so it displays inline to fit the navigation space.

Key features include;

  • Make an inline login form for your header
  • Uses Divi login module and custom CSS code
  • Free to download with an email subscription
  • Free for personal and commercial use

Price: Free
Developer: Elegant Themes
More Information

10. Reveal header on scroll layout

Divi hide reveal header on scroll layout

This tutorial shows you how to reveal your Divi header when a user scrolls up & hide it when a user scrolls down using the Theme Builder.

A big header can be great if there are a lot of elements that need to be displayed, but this is also a valuable real-estate space that your post or page content also needs. By hiding the header on the scroll you give the full-screen space to the content, but allow the user easy access to the header by scrolling back up. The effect is created by using custom CSS and JQuery code in the Theme Builder.

Key features include;

  • Hide and reveal header on scroll up and down
  • The effect uses JQuery and CSS code
  • Free to download with an email subscription
  • Free for personal and commercial use

Price: Free
Developer: Elegant Themes
More Information

Final thoughts on Divi header layouts

The Theme Builder has opened up a huge number of possibilities for creating sitewide templates for Divi and the header is one of the 1st places you may start to customize. By using these free Theme Builder tutorials and header layouts you can easily create cool effects for your menu, navigation, and headers.

If you have created a cool custom header for your Divi website using the new Theme Builder templating system, drop a link in the comments and show it off to the Divi community.

 

5 4 votes
Article Rating