Header Layout Pack Documentation
Getting Started
Customizations
Support
Any questions? Send an email to info@markhendriksen.com
Images
The images are replace due to licensing.
Installing Headers
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.
- all-divi-headers
- divi-headers-supplementary-files
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:
https://header-layout-pack.divimarketplace.shop/
The header numbers are corresponding.
Click on save and when you are back in the Theme Builder click on save again.
Changing colors
Most of the colors you can change in the modules row and sections.
A couple colors can be changed in the code module.
To find the code module switch to wireframe view
Then open the code module. You will find some CSS code here and you can swap the color codes.
Below is an example of the CSS code for a simple header, this is the same concept for each header.
On the top, you will find the code that affects the colors. You will find this between the comment lines Colors and End Colors.
For this header it means the following:
On line 7 you will find the dropdown menu line color.
On line 12 you will find the dropdown menu arrow color.
On lines 17 and 18 you can change the collapsing mobile menu icon and background color.
Some headers have more colors that can be changed.
I have placed a description in the code module for each color so it is easy to find.
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.
FAQ
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:
