The Divi 4.0 Theme Builder allows you to create templates that can be applied anywhere on your site including the creation of a custom Divi header. These Divi header layouts are added into the Theme Builder and replace the default Divi header.

By adding the Divi Menu module and any other Divi modules you choose to add into your header into a Theme Builder template, you can easily build a header and navigation and apply it on any pages of your site without editing theme files or using a 3rd party header plugin.

Elegant Themes and 3rd party developers have created a number of tutorials for the Theme Builder to show you how to create unique Divi header layouts and navigation sections. These will show you step-by-step how to create the effect and will also come with a free Divi layout or Theme Builder templates file that can be downloaded and used to apply a custom header template for your Divi website.

Divi themes Builder layouts for sitewide headers

This post will list 10 of the best Divi header layouts that can be added to the Divi Theme Builder templating system and automatically be assigned to any page or post-type on your site.

1. Fixed and Sticky headers

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
  • 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’s

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

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 horizontal.

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. How to Shrink Your Global Header’s Size When Scrolling with Divi’s Theme Builder

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

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

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 assigning 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 global header

Divi animated header template

This tutorial shows you how to animate your global 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

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 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. How to Design an Inline Login Form for a Custom Global Header in Divi

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 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. How to Reveal Your Global Header While Scrolling Up & Hide While Scrolling Down with Divi

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 for the Theme Builder

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.

Load a few into your Theme Builder and mix-and-match effects for something truly unique. 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 3 votes
Article Rating

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close