How to Create a Custom Divi 4.0 Header with Ultimate Divi Header 4 by Divi Life

Introduction

With a few steps using the Divi Theme Builder you can adjust the style of Ultimate Divi Headers to fit your website design. In our example below, we will customizing Ultimate Divi Header 4 to match the style of the Divi Restaurant Child Theme by Divi Life.

You’ll need to have your Wordpress site installed using the Divi Theme version 4.0 or later. Then you are ready to import your Ultimate Divi Header file(s) and begin customizing in the Divi Theme Builder. You will also need to have purchased our Divi Header Layout Pack, or be an All Access Pass member.

 

Below is a handy Visual Table of Contents to help you quickly skip ahead to the areas you are most interested in.
However, you’ll need to complete Steps 1 & 2 first.

 

 

Step 1: Import the Ultimate Divi Headers files into your Divi Library

1. Under the Divi tab, select Divi Library.
2. Then click on Import & Export.

 

1. In the Portability overlay, choose the Import tab.
2. Choose the Divi Life Ultimate Divi Headers JSON file you want to import.
   You may import an individual file for one header version or choose the “ALL-Divi-Life-Header-Templates” to import all of the files at once. To follow this example, make sure you have at least the file for “Header-4”.
3. Click Import Divi Builder Layouts.

 

Step 2: Create a new Global Header in the Theme Builder

1. Under the Divi tab, select Theme Builder.
2. Then click on Add Global Header.
3. Choose Add From Library.

 

1. In the Load From Library window, choose the Your Saved Layouts tab.
2. Choose the header you want to import. To follow this example, choose “Header-4”.

 

1. Next, choose the pencil icon to begin editing your newly imported Global Header template.

 

Note: Your header may not display correctly inside the Theme Builder but it will once you view it on your website.
Next, click on the Divi Tool Bar icon to expand it. Select wireframe view.

 

Step 3: Edit the Menu Module

1. Select the Gear Icon in the Menu module to open Menu Settings.
2. Under Content Section, select your Primary Menu.

 

Here you can add your site logo:

1. Under the Logo Section of the Content tab in Menu Settings, select Gear icon to replace the menu logo with your logo.

Next, edit your Menu design styling:

1. Select the Design tab in Menu Settings.
2. Under the Menu Text Section, change the Active Link Color to your desired color. For our example we are using #e7272d red to match Divi Restaurant Child Theme color palette.
3. Next change the Menu Font to your desired font choice.
4. Then change the Menu Font Weight as needed.
5. Click on the Menu Text Color to Desktop or Hover state.
6. Then change the Menu Text Default and Hover state Color to your desired colors.
7. Change your Menu Text Size as needed.

 

Dropdown Menu and Mobile Menu:

Continuing in the Design tab in Menu Settings.

1. Under the Dropdown Menu Section, change the Dropdown Menu Line Color to your desired color. For our example we are using #e7272d red to match Divi Restaurant Child Theme color palette.
2. Then change the Dropdown Menu Text Color and Hover state to your desired colors.
3. Next change the Dropdown Menu Text Active Link Color to your desired color. Again, we are using #e7272d red to match Divi Restaurant Child Theme color palette.
4. Now scroll down to view the lower part of the Dropdown Menu Section, and edit the Mobile Menu Text Color along with its Hover color.

 

Step 4: Edit the Top Row Blurb Modules

Note: Both Blurb Modules work the same way and have identical settings. The Title, Icon and Body Text content is the only difference.

1. Select the Gear Icon in one of the Blurb modules to open Blurb Settings.
2. Under Content Section, edit your Title text.

 

Continuing in the Content tab:

1. Lower in the Content tab, open the Image & Icon Section. Here you set Use Icon, YES or NO.
2. In the Icon table, select your desired icon.
   

 

Next, edit your Blurb design styling:

1. Select the Design tab in Blurb Settings.
2. Choose your Icon Color.
3. Choose Use Icon Font Size, YES or NO.
4. If YES, adjust your Icon Font Size here.

 

Continuing in the Design tab:

1. Lower in the Design tab, open the Title Text Section.
2. Select the H5 Title Heading Level.
   
3. Select your desired Title Font.
4. Select your desired Title Font Weight.
5. Choose your Title Text Color.
6. Adjust your Title Text Size.

 

Next, edit your Blurb Body Text styling:

1. Lower in the Design tab, inside the Body Text Section and select your desired Body Font.
2. Select your desired Body Font Weight.
3. Choose your Body Text Color.

Step 5: Edit the Button Module

1. Select the Gear Icon in the Button module to open Button Settings.
2. In the Text Section, change the button label text to what you want for your website.

 

Now adjust the Button Design Settings:

1. Select the Design tab in Button Settings.
2. If necessary, change the Button Text Size to your desired size. For our example we are using 14px to fit the Divi Restaurant Child Theme.
3. Next change the Button Text Color, if desired.
4. Then change the Button Background color to fit your website design as shown. We are using #e7272d red to match Divi Restaurant Child Theme color palette.
5. Click on the Button Background Hover state.
6. Then change the Button Background Hover state Color to your desired color. For this example, we are using a darker red based upon the #e7272d red used in the Divi Restaurant Child Theme color palette.
7. Next change the Button Font to your desired font, as shown. For our example we are using Poppins to match the Divi Restaurant Child Theme.
8. Then change the Button Font Weight to your preference.

 

 

Step 6: Change the Social Media Icon Styling

1. Select the Gear Icon in the Social Medial Follow module.
2. Then select the Gear Icon for one of the social networks. This will open Social Network Settings.

 

Now adjust the Social Network Icon Background Color:

1. Inside the Background Section, select your background color. For our example, we are using #e7272d red to match Divi Restaurant Child Theme color palette. Then return to the overall Social Media Follow Settings by clicking the Back arrow at the top.

Repeat this step for each of the social networks on your website header.

Next, adjust the Icon Design Settings:

1. Select the Design tab in Social Media Follow Settings. Now you will be making additional edits for all the icons at one time.
2. Change the Icon Color (the fill color of the icon itself) to your desired color. For this example, we are keeping the icon fill white, as shown.
3. Next change the Icon Font Size to your desired size, if necessary.

Note: You may need to adjust the Rounded Corners size. Here’s how you do it:

1. Scroll down in the Design tab and open the Border Section. Here you set the Rounded Corners size. This is what makes the icons appear in a solid circle. You may need to adjust the size if you change the Icon Font Size.

 

Step 7: Change the Row Border Color (Divider Line)

1. Select the Gear Icon in the last Row.
2. Then select the Design tab in Row Settings.
3. In the Border Section, select the Top Border icon.
4. Change the Top Border Color to your desired color.

Step 8: Change Header Background Color

In our example above, we didn’t need to change the background color. Here’s how to do it.

To change the entire header background color:

1. Select the Gear Icon in the Section module to open Sections Settings.
2. In the Background Section, add the background color you prefer for your header.

 

To change one or both of the separate header row’s background color:

1. Select the Gear Icon in one of the bottom two Row modules to open its Row Settings.
2. In the Background Section, add a background color to what you want for your header row.

Note: To make the Row’s background color span full-width, see the instructions below.

 

To make the header background color full-width, make these changes to your Rows.

For Row 1a, change the Sizing as follows:

1. Select the Design tab in Row Settings.
2. Inside Sizing Section, change the Width to 100%.
3. Change the Max Width to ‘none’.

 

For Row 1a, change the Spacing as follows:

1. Confirm you are in the Design tab in Row Settings.
2. Select Padding for Desktop.
3. For Desktop width, change only the Right value to “5%”.
4. Select Tablet and Phone widths separate from Desktop.
5. For Tablet and Phone widths, set Left and Right Padding to “5%”.

 

For Row 1b, change the Sizing as follows:

1. Select the Design tab in Row Settings.
2. Inside Sizing Section, change the Width to 100%.
3. Change the Max Width to ‘none’.

 

For Row 1b, change the Spacing as follows:

1. Confirm you are in the Design tab in Row Settings.
2. Select Padding for Desktop, Tablet and Phone separately.
3. For all three widths, set Left and Right Padding to “5%”.

 

And we’re done!

You can now test your header on the front end of your site, and fine tune the design settings to fit your particular website.