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 read – Divi 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
