The website’s header is usually the first thing your visitors will see when they land on your website. It loads first, so it’s your visitor’s first impression of your site. As always, you want the best first impression you can get. This means we should always pay extra attention to our header designs. In this article, we’ll look at 11 header types you can create with Divi.
The articles we’ll cover for these 11 header types are detailed tutorials with free JSON file downloads. Many of these tutorials include CSS and some include jQuery. Several include video instructions to help you through each step. You can follow the tutorials to create your own header, or simply download the files, upload them to your Divi Theme Builder, and make any changes you need. The step-by-step instructions ensure that all are easy to use.
Now, onto the 11 header types you can create with Divi!
1. Global Header
If you want to create a custom global header, this tutorial is a great place to start. It covers how to set up the WordPress menus, and how to design a custom global header with the Divi Theme Builder to display and style those menus. The design includes a sticky bar at the top. The tutorial includes CSS and video instructions.
2. Sticky Header
This tutorial shows how to use Divi’s sticky options to build a sticky header. The header includes a menu bar that changes color and size when it sticks to the top of the screen. The other rows and elements scroll as normal. It includes CSS and works on both desktop and mobile.
3. Fullscreen Global Header
This is a great tutorial for anyone interesting in creating a custom fullscreen global header with the Divi Theme Builder. The header includes a hamburger menu that opens in fullscreen. It works on both desktop and mobile and includes CSS and jQuery with instructions on how to use them. This is one of the most common header types and it’s always a good idea to know how to make them.
4. Responsive Slide-In Menu
This tutorial shows how to create an interesting menu that slides in from the right side of the screen when the user clicks the hamburger menu icon. The icon is a large button with reduced opacity to allow the page to show through. The menu slides over the
This article was written by Randy A. Brown and originally published on Elegant Themes Blog.