30+ Helpful Divi Header Tutorials for Divi

Last Updated on September 16, 2022 by 7 Comments

30+ Helpful Divi Header Tutorials for Divi
Blog / Divi Resources / 30+ Helpful Divi Header Tutorials for Divi

One of the best ways to learn to use Divi is by following the many tutorials found on this blog. If you’re interested in learning more about Divi and designing a unique header for your Divi website, this article is for you. In this article, we’ll look at over 30 helpful Divi header tutorials that you can use with the Divi Theme Builder. The tutorials include settings for desktop and mobile, and they include downloads for the example headers. This makes them easy to use.

Table Of Contents

1. Creating a Global Header

Creating a Global Header

This tutorial shows how to use the Divi Theme Builder for creating global headers. It includes a top bar and a navigation bar, both styled differently. It shows how to add a top bar with a logo, social follow icons, and a CTA button. The bottom bar includes a navigation menu and it’s styled with rounded corners to stand apart from your website.

View Tutorial

2. Creating a Sticky Header

Creating a Sticky Header

This tutorial shows the proper heading structure with both a top bar and a navigation bar. It shows how to use Divi’s sticky options to make the header stick to the top of the screen when the user scrolls. It also shows how to make the styling of the elements change when the user scrolls, giving the header a different look and feel.

View Tutorial

3. Creating a Fullscreen Header

Creating a Fullscreen Header

This tutorial shows how to build a custom header that opens in full screen when the hamburger menu icon is clicked. Each of the menu items is Divi modules, so you can create links or a mega menu. It uses jQuery and the code is included within the tutorial and the download file.

View Tutorial

4. Creating a Slide-in Header

Creating a Slide-in Header

This tutorial shows how to create a menu that slides in from the right when the hamburger menu icon is clicked. The menu items are Divi modules, so you can create a mega menu. The click function uses custom jQuery that’s included in the tutorial and the download file.

View Tutorial

5. Creating a Slide-Down Header

Creating a Slide-Down Header

This tutorial shows how to create a header that sides down from the top and pushes the content down when the hamburger menu icon is clicked. This keeps the menu from covering the content, so you can still see it on the screen. Code is included in the tutorial and the download file.

View Tutorial

6. Creating a Vertical Navigation

Creating a Vertical Navigation

This tutorial shows how to create a vertical navigation bar that sits on the left side of the screen. It shares the screen with the website’s content and remains in place when the user scrolls. The content area is smaller than normal so both can share the same screen.

View Tutorial

7. Creating a Transparent Floating Header

Creating a Transparent Floating Header

This one creates a transparent header that floats near the top of the page. The menu is kept in place with an absolute CSS position. It includes a logo, a navigation menu, and a CTA button. Since it’s transparent, the page shows through as you scroll.

View Tutorial

8. Creating a Transparent Sticky Header

Creating a Transparent Sticky Header

This tutorial shows how to create a navigation bar that becomes sticky and changes styles when the visitor scrolls. It has a top bar above the navigation menu that isn’t sticky. Once the navigation bar reaches the top, it becomes sticky and changes color.

View Tutorial

9. Creating a Custom Rotated Header

Creating a Custom Rotated Header

This one creates a vertical header that’s placed on the left side of the screen and it’s transparent. It remains in place as the user scrolls and the website’s background shows through. The navigation links are also placed vertically. The header is placed at the top of the page on mobile devices.

View Tutorial

10. Creating an eCommerce Mega Menu

Creating an eCommerce Mega Menu

This tutorial shows how to create a mega menu built with Divi modules. Add as many modules as you want. You can even include WooCommerce modules, making this menu a great choice for eCommerce websites to showcase your products and categories. This is an advanced tutorial that includes code within the article and the download files.

View Tutorial

11. Creating a Dropdown Menu

Creating a Dropdown Menu

This tutorial shows how to replicate the Elegant Themes dropdown menu using the Divi Theme Builder. This is an advanced mega menu with text, icons, and CTAs. You can also add more modules to create your own custom variation on the ET menu.

View Tutorial

12. Revealing a Global Header While Scrolling Up and Hiding it While Scrolling Down

Revealing a Global Header While Scrolling Up and Hiding it While Scrolling Down

This one shows how to create a unique header that’s revealed when the user scrolls up, but it hides when the user scrolls down. This allows you to show more content when they’re scrolling down but has the benefits of a sticky header when they’re scrolling up.

View Tutorial

13. Creating a Mobile Collapsing Nested Menu

Creating a Mobile Collapsing Nested Menu

This tutorial shows how to create a menu specially designed for mobile. The menu items are nested. It uses a mobile collapsing effect for the navigation menu. Und users can easily open or collapse the menu items on mobile devices.

View Tutorial

14. Animate a Global Header

Animate a Global Header

This one shows how to animate the elements of your global header so they stand out and grab attention. Animated elements include the navigation menu with a logo, social media follow icons, and a CTA button. The elements stack on mobile screens and appear one at a time.

View Tutorial

15. Design an Inline Login Form for a Global Header

Design an Inline Login Form for a Global Header

If you want to create an inline login form for your header, this is the tutorial you need. It adds the Divi login module to the header above the navigation menu and adds some extra styling with CSS. The CSS is included in the tutorial and the download file.

View Tutorial

16. Add Side-by-Side Buttons to the Global Header

Add Side-by-Side Buttons to the Global Header

This tutorial shows how to use a unique button design to create interesting CTAs for your header. The buttons sit side-by-side, so they’re attached. Each still looks like a different button. One is a primary button and the other is a secondary button.

View Tutorial

17. Automatically Place the Header Below the First Section

Automatically Place the Header Below the First Section

This tutorial shows how to automatically place the header below the first Divi section on each page. This allows the hero section of the page to display first, and then the header with the logo, navigation menu, etc., appears below that.

View Tutorial

18. Add a Dropdown Contact Form the Global Header

Add a Dropdown Contact Form the Global Header

This one shows how to add a dropdown contact form to your global header. The contact form is small and opens when a contact button is clicked. This keeps the header clean while providing easy access to the contact form. It includes jQuery and CSS in the tutorial and the download file.

View Tutorial

19. Swap the Header on Scroll

Swap the Header on Scroll

If you’ve ever wanted your header to change to a different header when the user scrolls, this is the tutorial you need. The two headers can include different content and have different colors. It includes jQuery in the tutorial and the download file.

View Tutorial

20. 5 Global Presets for the Menu Module

5 Global Presets for the Menu Module

Presets are a great way to save time and create a consistent design with the Divi Builder. This tutorial shows how to create 5 global presets to help you streamline the process of creating Divi headers. Even though the presets are created from scratch, you can also download them from this tutorial.

View Tutorial

21. Add a “New” or “Featured” Corner Label to a Menu Item in Your Header

Add a “New” or “Featured” Corner Label to a Menu Item in Your Header

New and Featured labels are a great way to draw the attention of your visitors to your products and posts. They look great and they help your visitors find the most important pages on your website. This tutorial shows how to create them for menu items to draw attention to specific links.

View Tutorial

22. Add and Animate an SVG Logo Inside Your Global Header

Add and Animate an SVG Logo Inside Your Global Header

This tutorial shows how to use SVG files for your logo, so you’re not limited to just PNGs. It goes even further and shows how to animate the SVG logo. The animation is handled with the Anime JS library. You can use it to animate any logo.

View Tutorial

23. Blend Your Header and Body with Post Content Module and Section Dividers

Blend Your Header and Body with Post Content Module and Section Dividers

Section dividers are a great way to create a smooth transition between Divi sections. This one shows how to use Divi’s built-in section dividers to create a transition between the header and the body content.

View Tutorial

24. Add a Dynamic Site Title and Tagline to Your Global Header

Add a Dynamic Site Title and Tagline to Your Global Header

A site title works great as a replacement for the logo or to provide a brief description of the site. Dynamic site titles allow you to change the title in one location and it’s automatically changed anywhere that uses the dynamic title. This tutorial shows how to add dynamic site titles to your global header.

View Tutorial

25. Optimize Your Logo Image with Global Presets

Optimize Your Logo Image with Global Presets

If the site logo image is unoptimized, it can cause every page to load slowly or not fit correctly on the screen. This tutorial shows how to use Divi’s optimization options to create the right size, position, and style. It also shows how to turn your settings into presets that you can use again and again.

View Tutorial

26. Add a Fixed “Latest Episode” Audio Bar to Your Header

Add a Fixed “Latest Episode” Audio Bar to Your Header

Divi’s audio module is excellent for those who host podcasts. This tutorial shows how to add an audio module and text module to add an audio bar to your header with your most recent episode. The text module includes a loop animation to draw the visitor’s attention.

View Tutorial

27. 8 Delayed Button Animations for Your Header CTA

8 Delayed Button Animations for Your Header CTA

Button animations are great for drawing attention to your CTAs. This tutorial shows how to create 8 delayed button animations to create a custom header CTA. The animations are created using unique combinations of Divi settings. They can be used anywhere on your website.

View Tutorial

28. Change Your Sticky Logo on Scroll

Change Your Sticky Logo on Scroll

Even if your header is sticky, it’s possible to change the logo when the user scrolls. This is a great way to highlight the header or make it stand apart from the design of the page. This tutorial shows how to do this along with changing the style of the global header on scroll.

View Tutorial

29. Use Different Headers on Different Templates

Use Different Headers on Different Templates

This tutorial shows how to use specific headers for certain pages and posts. The Divi Theme Builder lets you create a global header, but you can override that header on any page or post. You can have a different header for each template if you want, and it only takes a few clicks to assign them.

View Tutorial

30. Hide Your Header on Specific Pages

Hide Your Header on Specific Pages

Not only can you use a different header for different templates as we saw in the tutorial above, but we can also hide the header on specific pages. This tutorial shows how to do that using the Divi Theme Builder settings. You can hide the header based on the specific page, post type, category, tag, etc.

View Tutorial

31. Add a Background Image to Your Header

Add a Background Image to Your Header

A background image is a great way to have your header stand out from the crowd. It’s easy to do with the Divi Theme Builder. This tutorial shows how to add a background image to your header and adjust it for the back effect.

View Tutorial

32. Use a Different Header on Homepage

Use a Different Header on Homepage

Another option for using different headers on different pages is to use a different header on your homepage then you use everywhere else. This is especially helpful if you want to create a landing page or interior page with a different purpose than your homepage. This tutorial shows how to do this with the Divi Theme Builder.

View Tutorial

33. Add a Button to Your Header

Add a Button to Your Header

Buttons are some of the best CTAs you can add to your header. They draw attention and make it easy for users to click. This tutorial shows how to add a button to your Divi header for your entire website or specific pages. You can also use this knowledge to place them anywhere on your website.

View Tutorial

34. Save Space on Your Header with Toggle Icons

Save Space on Your Header with Toggle Icons

Toggling content is a great way to save space in a header and keep your design clean. Rather than seeing the content in its entirety, you can display an icon. When the user clicks the icon, the content will then display. This tutorial shows how to toggle the content for the phone number, email address, and social sharing buttons. This tutorial includes CSS and jQuery in the article and the download file.

View Tutorial

35. Make Your Logo Cross the Primary and Secondary Menu Bars Inside Your Header

Make Your Logo Cross the Primary and Secondary Menu Bars Inside Your Header

Placing the logo in either the top bar or navigation bar looks great, but it can also limit your design options. This tutorial shows how to place your logo so that it crosses both menu bars inside the header. CSS for this tutorial is included in the article and the download file.

View Tutorial

36. Create a Compact Testimonial Slider for Your Header

Create a Compact Testimonial Slider for Your Header

Adding short testimonials to the header is a great way to make your header unique and draw attention to your services, build trust, and build credibility. This especially works great with short testimonial sliders. This tutorial shows how to create a compact testimonial slider for your Divi headers to showcase your short testimonials.

View Tutorial

How to Find Free Divi Headers in the Elegant Themes Blog

There are lots of free Divi headers in the ET blog. Simply search for “free header”, “free divi header”, or similar keywords. You’ll find lots of free headers to choose from.

Ending Thoughts on Divi Header Tutorials

That’s our look at 30+ helpful Divi header tutorials using the Divi Theme Builder. There are lots of ways you can customize your Divi headers to stand out from the crowd. These 30+ tutorials are a great way to learn the details of the Divi Builder and Theme Builder while developing your own unique elements.

We want to hear from you. Have you used any of these 30+ helpful Divi header tutorials? Let us know which is your favorite in the comments.

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 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 Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 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 Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

7 Comments

  1. Awesome and useful post – thanks so much!

  2. Randy thank you very much, congratulations for such a good idea, because it is true that it takes time to find the tutorials when you need them and this tutorial provides an invaluable time saving, hopefully new tutorials will be repeated

  3. Thanks for this.

  4. Hello,
    It’s a really good idea!
    Because it is sometimes difficult to find the right tutorial
    when we need it, among your hundreds
    excellent tutorials.
    thank you

  5. Great article and interesting header designs in one place. And if possible make one slide in headers and off-canvas headers mobile (right-left/left-right/top-bottom/bottom-tio side in animations) menu template too and share the layout design block. Thnak you

  6. Wow lots of ideas in that list, thanks this will come in useful.

  7. Wow that was a good one, perfect.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today