Best Divi header layouts

A Divi header is the top area of your website and typically will include your company logo, and your website navigation menu, but can also include social media links, a search box, contact details, and other important sitewide content.

There are 2 options for adding a header to your Divi website;

• Use the pre-made default header
• Use the Divi Theme Builder

The default header is used automatically on a new Divi website, but If you choose to use the Theme Builder to add a custom Divi header then it will then automatically replace the default header.

If you choose to use the Divi Theme Builder for your custom header you can then create your own header, buy a premade Divi header layout pack, or download free Divi header layouts to import directly into the Theme Builder.

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.

Buy premium Divi header layout packs

The following products offer multiple custom Divi header layouts within a single product. You will generally only ever need to use 1 header layout per website, so if you are making a single website you may not need to buy a layout pack with dozens of different header templates. These layout packs are generally available to buy directly from the developer or via the official Elegant Themes marketplace.

1. Divi header pack

The best-selling Divi headers layout pack on the official Divi marketplace comes with 960+ header layouts. There really is a header layout for every style of Divi website from simple transparent headers to complex Woocommerce layouts and everything in between. This product is also the 4th most popular Divi product in the official marketplace with over 5700 sales and a solid 4.5 average star review. If you are creating websites for multiple clients then this can provide great value and allow you to instantly add “custom” Divi headers on your clients’ websites in seconds.

Key features include;

• Off-canvas menu
• Built using Divi modules
• Fully responsive on all devices
• 136 design headers
• 50 easy headers using Divi’s default settings
• 379+ functional headers
• 983+ 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 & buying options via Elegant Themes

2. Headers for Divi

The Divi Flexile headers paid-for layout pack contains 170+ Divi header templates and is sold by Divi Extended. Another large header layout pack that provides Divi agencies with ample design options for adding unique headers for their clients. The pricing is the same as the Divi Headers Pack but does have fewer header layouts to choose from. But there are only so many you can actually use so pick the pack that you feel has the best design and style.

Key features include;

• 170+ Divi header 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 & buying options via Elegant Themes

3. Header Layout Pack

This layout pack contains 100+ Divi header templates and is sold by Mark Hendriksen. Slightly cheaper than the first two in this list but there are only 100 layouts. Again, more than most will ever need so if you like the style then it can be well worth it.  Designing a nice-looking header can be very hard for a beginner and can easily take more than $15 worth of time, so even if you only use one header it may still be worth it.

Key features include;

• 100+ 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 & buying options via Elegant Themes

4. DiviWP Header Sections

This layout pack contains 40+ Divi header templates and is sold by DiviWP. Some nice designs and styles in this layout pack but there are considerably fewer options to choose from than the more popular layout packs listed above. This product has still sold almost 500 copies and gets a five-star review.

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 & buying options via Elegant Themes

5. Divi Headers Layout Pack

This layout pack contains 45 Divi header templates and is sold by Divi Awesome. Few options in this layout pack as reflected in the lower number of sales, but still worth a look if you like the style of the headers.

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 & buying options via Elegant Themes

Free Divi header layouts

There are plenty of free header layouts for Divi too with many of the best ones available directly from Elegant Themes. Many of the free weekly layout packs released by Elegant Themes will then have a follow-up blog post that creates various Theme Builder templates to match the layout pack style. The Theme Builder header pack is one of those that is regularly added.

The Divi header layouts below can be downloaded and used for free.

Most of these header layouts are from the official Elegant Themes layout packs that accompany an in-depth tutorial on the Elegant Themes blog and include step-by-step tutorials on how they were created if you want to learn how to create your own Divi header using the Theme Builder. There are also a few that are offered from 3rd party Divi header designers.

1. Fixed and sticky Divi header layout

This tutorial shows you how to create either a fixed or sticky Divi header using the Divi 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 & free download

2. Animated header CTA layout

This tutorial and Theme Builder header template will show how to add 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, tutorial, and download

3. Rotated global header layout

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

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 the 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 the 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

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

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

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 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 the header below the page’s 1st section 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

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

If your site includes a user login then this tutorial and Theme Builder layout allow 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 the header on the 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 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.

By adding the Menu module and any other Divi modules to 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.

You can find more free Divi header layouts in the Divi Layouts directory or by searching for FREE Header & Footer layouts on the Elegant Themes blog.

If you have created a fantastic 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.