How to Customize the Ultimate Divi Header 2

Home » Docs » Ultimate Divi Headers » How to Customize the Ultimate Divi Header 2

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 2 to match the style of the Divi Interior Designer 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 need to have purchase and downloaded our Divi Header Layouts from our store (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-2a”.
  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-2a”.

 

  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 Divi Interior Main Menu.

 

Here you can add your site secondary logo that appears in the lower row on mobile widths:

  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 #f2c07e tan to match Divi Interior Designer 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. Change the Menu Text Default and Hover state Color to your desired colors.
  6. Change your Menu Text Size as needed.

Next, edit your Menu Logo sizing, if needed:

  1. Under the Menu Sizing Section, adjust the Logo Max Width 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 white to match Divi Interior Designer 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 Active Link Color to your desired color. We are using #484d52 gray to match Divi Interior Designer 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 Blurb Modules (Phone Number)

Note: The Blurb Module in the middle Row is for the phone number that shows at mobile widths. The Blurb in the lower Row is for the phone number that shows at desktop widths. Both Blurb Modules work the same way and have similar settings. Repeat these instructions for each.

  1. Select the Gear Icon in one of the Blurb modules to open Blurb Settings.
  2. Under Content Section, edit your Body 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. If YES, 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.

 

Next, edit your Blurb Body Text design styling. Scroll down lower in the Design tab and open the Body Text Section.

  1. Choose your Body Font.
  2. Choose your Body Font Weight.
  3. Choose your Body Text Color.
  4. Next, adjust the Body Text Size as needed.

 

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. 
  3. Next change the Button Text Color, if desired.
  4. Then change the Button Background color and Hover state Color to fit your website design as shown. For our example we are using #f2c07e tan to match Divi Interior Designer Child Theme color palette.
  5. Next change the Button Font to your desired font, as shown. For our example we are using Ubuntu to match the Divi Interior Designer Child Theme.
  6. Then change the Button Font Weight to your preference.

Step 6: Change the Secondary Menu (Top Row)

  1. Select the Gear Icon in the Text module in the middle Row.
  2. Edit the text bullet list to your secondary menu items.

 

Next, add your page URL links:

  1. While still in the Content Tab, select a menu item.
  2. Click on the Chain icon to open the Links dialog and enter your URLs. Repeat for each menu item.

Now adjust your Text Design Settings:

  1. Select the Design tab in Text Settings.
  2. Inside Text Section, change the Text Font to your desired font, as shown. Again, for our example we are using Ubuntu to match the Divi Interior Designer Child Theme.
  3. Then change the Text Font Weight to your preference.
  4. Adjust your Text Text Color, as needed.
  5. Next change the Text Text Size to your desired size, if necessary.

 

Step 7: Change the Primary Logo (Desktop Widths)

  1. Select the Gear Icon in the Image module in the middle Row to open Image Settings.
  2. Inside the Image Section, select the Image Gear Icon to place your site logo.

 

You may need to adjust your logo size. Here’s how to do it:

  1. Select the Design tab in Image Settings.
  2. Inside Sizing Section, change the Max Width to your preferred size.
    Note:     The height of your logo may cause the header top row to increase in height. If so, this may require an adjustment to the fixed header custom CSS that defines the value for the lower menu row to stop at the top of the browser window on scroll. To make this adjustment, please see Step 10 below.

 

Step 8: Change the Social Media Icon Styling

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

 

Now choose your Social Networks:

  1. Inside the Network Section, select your social network needed for your website.  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 needed on your website header.

Next, adjust the Social Media Icon Design Settings:

  1. Select the Design tab in Social Media Follow Settings. This allows you to make edits for all the icons at one time.
  2. Change the Icon Color to your desired color and Icon Hover Color desired. For this example, we are keeping the icon fill white with a 100% opacity with a Hover color of white with 50% opacity.

If needed, you can change the Icon Font Size to your desired size by changing Use Custom Icon Size to YES. Then adjust the size.

 

Step 9: Change Header Background Color(s)

Here’s how 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: Both rows work the same way.

 

Step 10: Adjust the Custom Fixed Row Position

The height of your primary logo (desktop widths) may cause the header top row to increase in height. If so, this may require an adjustment to the fixed header custom CSS that defines the value for the lower menu row to stop at the top of the browser window on scroll. Here’s how to make this adjustment.

  1. Select the Gear Icon in the Code module to open Code Settings.
  2. In the Content tab, scroll to Line 107 to change the value for “.admin-bar header.et-l–header.custom-fixed-header { top: -54px; }.” In our example, for the Divi Interior Design Child Theme, we changed the value to “{ top: -66px; }.


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.