Header Layout Pack Documentation
Any questions? Send an email to firstname.lastname@example.org
The images are replace due to licensing.
Step 1 Downloading and unpacking the folders
Purchased from Markhendriksen.com
Download and unzip the ‘divi-header-layout-pack-1.2.zip’ folder to your computer.
After unpacking this folder you will find 2 folders inside.
Purchased from Elegant Themes Marketplace
Download and unzip the folders ‘all-divi-headers.zip’ file and the supplementary files ‘divi-headers-supplementary-files.zip‘ to your computer.
Step 2 Installing the headers
Go to Divi > Divi Library. Click on the import/export options.
Click on Import/export button and switch to the import tab.
If you want to upload all headers at once then choose the file Divi Header Layout Pack.json inside the folder all-divi-headers.
If you want to upload only a portion of the headers then go to the folder divi-headers-supplementary-files and choose type of header you want to upload.
It is possible that you can not upload all headers at once due to the file size (depending on your upload file settings).
For that reason, you can choose to upload just a part of the headers. For example, all simple headers or all advanced headers.
Step 3 importing a header in your Theme Builder
In your WordPress dashboard navigate to Divi > Theme Builder.
If you are using a custom global header then open the Global Header.
If you are not using a global Header then click on Add Global header and then Build Global Header > Build From Scratch.
Add your header
1) Click on the + to add a new layout
2) Switch to Your Saved Layouts
3) Choose your header version.
You can use the demo site to see how each header looks like:
The header numbers are corresponding.
Click on save and when you are back in the Theme Builder click on save again.
Change The Logo
This depends on the header you are using.
For some headers, you can do this by opening the menu module and changing the logo in the Logo tab.
For other headers, I have used an image module for the logo and you can upload your own logo from that image module.
The width of my header is not the same as in the demo?
I have set the width of all my rows to 1240px in Divi > Theme Customizer > General Settings > Layout Settings
Double or different icons?
In some cases, you can see this after importing a header.
Open the CSS code module in your header. In case you cannot find this module then switch to wireframe view (left bottom).
Under “End Colors” comment, you will find the icons.
In this case, there are two icons (some headers can have more icons).
33 and 32 are the icon numbers but there is a backslash missing in the front of these icon numbers.
For some reason, this backslash \ is getting stripped out after importing a header.
The fix is very easy you just need to add a backslash \ before the number like this: