Update

After the release of Divi 4.0's Theme builder we can take control over the every single pixel of our  website. With the launch of Divi 4.0 you can create custom headers, footers, sidebars, dynamic content layouts (post template, product template, archive template etc..).

Read more – Divi Theme Builder – Now Create Header, Footer and Dynamic Content Layouts

Divi, one of the most powerful layout builder theme undoubtedly, is still lacking template based header editing in its drag and drop layout builder. In other words, the layout builder is still unable to create custom layouts for header, footer and sidebar. The Divi layout builder can edit only ‘post area’ at present. However, it is worth mentioning that Divi Header has enough customization options to change the look and feel of header, footer and sidebar. We can change their color and orientation.

So far so good. But totally custom header is still desirable . For instance, if someone wants the navigation bar with its own background color and wants to place it below the logo independently, unfortunately it is something still not possible with the available options in the customizer. Another example you can point out is if someone wants to replace the logo with a full width header banner, I’m afraid without custom code you can’t do it.

Also readDivi Builder Plugin Review

If you are a web designer, you need to handle lots of custom layouts requirements and many of them belong to custom header layout. In this scenario, a header builder is becoming more and more indispensable fundamental need in the web design business.

In the present circumstances, we can do nothing but to request that Divi developer team extend their layout builder capabilities to entire theme areas including header and footer.
In the meantime, I’ve come up with an Idea for web designers. An idea that can help you deal with fastidiously obtuse to intricately subtle custom header requirements.

How to build a custom header with Divi theme

Requirements – Divi 3.0 +, WordPress 5.0

First of all create a new page in WordPress

Create a normal Section

Go to section setting and create custom padding as shown in the image below to override default extra padding

 

Now add a row in the section

Make the row full width

Set the row background per your need (you can add a banner image, solid color, gradient color or video background. It will the background of your header)

Add four column layout in this row

In the first column add a text block and then add your website logo image in it

Go to your text block setting and in spacing setting set the padding to 0 to clear extra spacing

Now below the current section, add a full width section

Add a full width menu to this section and customize menu settings as per your needs such as menu background color, menu link, link active and drop down links background colors

Now save both the sections as global items

Save the created layout to library

Now create a new page and set the page template Blank

Load the header layout from library

Save the page.

All done. You will see a beautiful custom header when preview the page

 

You can add this header to as many pages as you want and as a global layout changes to this layout will reflect everywhere it is used

 

About Shams

Shams, a professional blogger, has expertise in WordPress and Web Hosting. He is used to playing around with WordPress plugins, themes, web hosting services and some other innovative stuff regarding web design. He sifts out good stuff for web designers and reviews it to help them choose what they really need.

Being an energetic tech enthusiast, he regularly pens down breaking news and tutorials related to technology particularly Smartphones and other gadgets. Sometimes writes tech tips too. It was the dawn of Internet age when he started dabbling in it and has since been delving into the realm of the internet. He occupies a permanent burrow in virtual world.

He can be reached at.- here