An Overview on Divi Header Types, Tutorials & Freebies

Ever since the Divi Theme Builder has come out, the way we create Divi headers has changed for the best. We can add any element we want, style it using Divi’s built-in design options and create a seamlessly responsive experience. Over the last couple of months, we’ve been keeping an eye on how we can help you get the best out of your header designs through tutorials and freebies. At some point, navigating through all these different header types, tutorials and freebies can become a bit confusing, that’s why we’ve set up this post that you can always come back to. This post will feature the different header types you can create, which include a free download file too. Alongside the free download, you get a step-by-step tutorial that helps you understand what you’re creating and how you can tweak things to match your own needs.

The second part of this post focuses on some tips and tricks that have often been asked in the Divi community, we show you how t solve a certain problem or achieve a design without having to lose time trying to figure it out yourself. Last but not least, we’ve listed all the header freebies that you can download and use right away.

Discover Header Types
Discover Header Tips & Tricks
Discover Header Freebies

Header Types

1. Regular Header

divi header tutorials

The first header type tutorial that came out on the blog when the Divi Theme Builder was released is a regular header. This tutorial focuses on getting familiar with the Divi Theme Builder environment and building a global header. We’ve included a top bar with a logo, social follow icons and a button. The navigation bar dynamically features the menu items that can set up in the backend of your WordPress website.

Visit Tutorial

2. Sticky Header

divi header tutorials

If you’re looking to set up a header that’s sticky too, you’ll want to get familiar with this post. Besides showing you how to set up a proper header structure, including top bar, the tutorial shows you how to turn your header sticky too, using Divi’s built-in sticky options. The styles of the elements in the header change on scroll as well, which gives the header a completely new look and feel.

Visit Tutorial

3. Fullscreen Header

divi header tutorials

A top header bar isn’t the only way to allow navigation on your website, of course, so next up we have a fullscreen header. In this tutorial, we’re showing you how to build an entire custom fullscreen header with Divi. All the items inside your menu are modules and the click function is enabled by some JQuery code that’s included in the tutorial and download file. A couple of freebies that use this similar approach are:

  1. PR Firm Header & Footer Template Template
  2. Italian Restaurant Header & Footer Template
  3. Freelance Writer Header & Footer Template
  4. Financial Advisor Header & Footer Template

Visit Tutorial

4. Slide-In Header

divi header tutorials

Up next, we have a header that slides in from the right side. This tutorial, too, is based on Divi’s built-in elements. You can place anything you want inside your slide-in menu and create an entirely responsive environment with responsive options. The click function has taken its form through some custom JQuery code that’s included in the tutorial as well as the freebie template JSON file.

Visit Tutorial

5. Slide Down Push Header

divi header tutorials

Another cool header type in our list is a slide down push header. When the hamburger icon is clicked, the header slides down from the top and pushes the page content down. This gives a fun and beautiful effect across all screen sizes.

Visit Tutorial

6. Vertical Navigation

divi header tutorials

Another way of providing visitors with effortless navigation is by using a vertical navigation bar. If you’re looking for a way to do that inside the Divi Theme Builder, make sure you check this tutorial. The vertical navigation takes up its own space inside the browser, which narrows the page content’s width and creates a beautiful side-by-side page structure.

Visit Tutorial

7. Transparent Floating Header

divi header tutorials

If you’re looking to add a header on top of your page or post content, this tutorial is made for you! We’re using a transparent header with three different elements; a logo, menu and button.  These three elements are placed on top of the page content through an absolute CSS position. The result is highly responsive too, and gives a nice cohesive outcome on your website.

Visit Tutorial

9. Transparent Sticky Header

divi header tutorials

This tutorial is slightly similar to the previous one, with one big difference; as soon as visitors scroll down the page or post they’re on, the navigation bar turns sticky and changes styles. This allows you to get the best out of your hero section design at the top of the page while keeping an effortless navigation going on while visitors are scrolling down.

Visit Tutorial

10. Rotated Header

divi header tutorials

If you’re looking for a more out-of-the-box design for your website, you might want to consider going for a rotated transparent header. This header type is placed on the side of your website and follows your visitors throughout their visit on your pages. It gives a more sophisticated look and feel to your desktop design while keeping that effortless top bar experience on smaller screen sizes.

Visit Tutorial

11. Custom eCommerce Dropdown

divi header tutorials

The bigger your website gets, the harder it is to find a good way to list all pages on your website. That’s where mega menus come in handy. Although you can always fall back to Divi’s built-in mega menu, if you’re looking for a more Divi-built environment where you can add as many modules as you want, this is the tutorial for you. Especially for eCommerce websites, it can come in handy to feature different product categories in an attractive and highly-visual way. Although this tutorial is a more “advanced” type of resource, the code foundation has been set for you, which allows you to get as creative as you want with the design. Make sure that even when you’re using the template JSON file for this tutorial, you go through the few steps that are needed to bring this mega menu to life.

Visit Tutorial

12. Custom Elegant Themes’ Dropdown

divi header tutorials

Ever since the Divi Theme Builder has come out, people have been wondering how to create Elegant Themes’ seamless navigation dropdowns. This tutorial focuses on showing you exactly how to replicate the Elegant Themes dropdown menu inside the Divi Theme Builder. Even more so, it allows you to add any kind of modules you want and create your own unique variation of the menu.

Visit Tutorial

Tips & Tricks

In this part of the overview post, we’re sharing the different tips and tricks in a tutorial form. Every one of these posts includes an A to Z experience. This means that we don’t only show you how to achieve the trick, we also guide you through the entire header build process, which gives you the choice; do you want to use the entire design for your own purposes, or only focus on that specific tip and trick.

1. Revealing & Hiding Header on Scroll

divi header tutorials

Visit Tutorial

2. Mobile Collapsing Nested Menu

divi header tutorials

Visit Tutorial

3. Animating Your Global Header

divi header tutorials

Visit Tutorial

4. Adding an Inline Login Form to Your Header

divi header tutorials

Visit Tutorial

5. Adding Two Side-by-Side Buttons to Your Header

divi header tutorials

Visit Tutorial

6. Automatically Placing Your Header Below Each Page’s First Section

divi header tutorials

Visit Tutorial

7. Adding a Dropdown Contact Form to Your Header

divi header tutorials

Visit Tutorial

8. Swapping Your Header on Scroll

divi header tutorials

Visit Tutorial

9. Optimizing Divi’s Menu Module with 5 Global Presets

divi header tutorials

Visit Tutorial

10. Adding Corner Labels to Menu Items Inside Your Header

divi header tutorials

Visit Tutorial

11. Adding & Animating Your SVG Logo Inside your Header

divi header tutorials

Visit Tutorial

12. Blending Your Header & Pages with Divi Section Dividers

divi header tutorials

Visit Tutorial

13. Adding a Dynamic Site Title & Tagline to Your Header

divi header tutorials

Visit Tutorial

14. Optimizing Your Divi Site’s Logo with Global Presets

divi header tutorials

Visit Tutorial

15. Adding a Fixed “Latest Episode” Audio Bar to Your Header

divi header tutorials

Visit Tutorial

16. Adding Delayed Button Animations to Your Header CTA

divi header tutorials

Visit Tutorial

17. Changing Your Sticky Logo on Scroll

divi header tutorials

Visit Tutorial

Header Freebies

Last but not least, we’re also listing the different header freebies you can find on the Elegant Themes blog. The header freebie design initiative started with the first theme builder packs we shared back in December 2019, but that’s not where it stops. We have continuously shared, and will continue to share, free header and footer freebies that match Divi layout packs. Although the style is mostly based on the layout pack in question, they can be easily used for other websites as well.

1. Theme Builder Packs

Theme Builder Pack #1

divi header tutorials

Visit Tutorial

Theme Builder Pack #2

divi header tutorials

Visit Tutorial

Theme Builder Pack #3

divi header tutorials

Visit Tutorial

Theme Builder Pack #4

divi header tutorials

Visit Tutorial

Theme Builder Pack #5

divi header tutorials

Visit Tutorial

Theme Builder Pack #6

divi header tutorials

Visit Tutorial

2. Layout Pack Header & Footer Freebies

Italian Restaurant Layout Pack

Visit Tutorial

Virtual Assistant Layout Pack

Visit Tutorial

Coworking Space Layout Pack

Visit Tutorial

Window Cleaning Layout Pack

Visit Tutorial

Tarot Layout Pack

Visit Tutorial

Painter Layout Pack

divi header tutorials

Visit Tutorial

Pet Supply Layout Pack

Visit Tutorial

Beauty Product Layout Pack

Visit Tutorial

Cooking School Layout Pack

Visit Tutorial

Perfumery Layout Pack

Visit Tutorial

Sushi Restaurant Layout Pack

Visit Tutorial

Herbal Remedy Layout Pack

Visit Tutorial

Renovation Layout Pack

Visit Tutorial

Robotics Layout Pack

Visit Tutorial

Holistic Healer Layout Pack

Visit Tutorial

Spice Shop Layout Pack

Visit Tutorial

Upholstery Layout Pack

Visit Tutorial

PR Firm Layout Pack

Visit Tutorial

Fitness Coach Layout Pack

Visit Tutorial

Wedding Photographer Layout Pack

Visit Tutorial

Dietitian Layout Pack

Visit Tutorial

Freelance Writer Layout Pack

Visit Tutorial

Interpreter Layout Pack

Visit Tutorial

Financial Advisor Layout Pack

Visit Tutorial

Nail Salon Layout Pack

Visit Tutorial

Influencer Layout Pack

Visit Tutorial

Leather Company Layout Pack

Visit Tutorial

Acupuncture Layout Pack

divi header tutorials

Visit Tutorial

3. Other

Minimal Header & Footer Combo

Visit Tutorial

Searching for New Headers on Our Blog

We regularly release new header freebies and tutorials on our blog. We’ll keep updating this post throughout time, but if you want to stay on top of the new stuff, feel free to search the blog search bar using keywords like “header” and “menu”!

Final Thoughts

In this post, we’ve provided a clear overview on Divi header types, tutorials and freebies that you can find on our blog! This post is hopefully going to help you set the foundation of your header before getting started on a new project. You can decide on the header type you want to create, go to the blog post that shows you how to do it or download the JSON file to have everything ready for use! We’ve shared some tips and tricks to apply to your header as well, which will hopefully help you solve problems quickly and focus on what’s really important: having a well-balanced website you had in mind. If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

The post An Overview on Divi Header Types, Tutorials & Freebies appeared first on Elegant Themes Blog.

Go to source

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.