How to Customize the Divi Header Using Ultimate Divi Header 1 by Divi Life

Home » Docs » Ultimate Divi Headers » How to Customize the Divi Header Using Ultimate Divi Header 1 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 1 to match the style of the Elegant Themes Architecture Firm Layout.

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.

Purchase our Divi Headers Layout Pack here, if you haven’t already.

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-1c”.
  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-1c”.

 

  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 your WP Menus (Admin Panel)

  1. Select the Menus in the Appearance tab of your Admin Panels list.
  2. Select your primary menu to edit, & name the Menu: Header 1 Menu (***NOTE: your menu must be named Header 1 Menu or the styling will be off! ***)
  3. Plan which three menu items you want in the larger style on the left side of the header. Order them at the top of the list.

 

Now you need to add a CSS Class to the larger style menu items:

  1. Open Screen Options at the top.
  2. Activate the “CSS Classes” menu property so it will appear when you reveal the menu item configuration options.
  3. Expand to reveal additional configuration options for the first menu item.
  4. Add to the CSS Classes field “left-side-menu-item”. The allows the necessary custom CSS to apply to this menu item. Repeat this for each of the three large style menu items at the top of your list.

 

 

Step 4: Edit the Menu Module

  1. Select the Gear Icon in the Menu module to open Menu Settings.
  2. Under Content Section, select Header 1 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 default 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 white at 70% opacity to match Elegant Themes Architecture Firm Layout 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 Color and Hover state to your desired colors.
  6. Change your Menu Text Size as needed.

 

Continuing in the Design tab, next, edit your Menu Logo sizing, if needed:

  1. Under the Menu Sizing Section, adjust the Logo Max Width as needed.

 

Now for the Dropdown Menu and Mobile Menu:

  1. Under the Dropdown Menu Section, change the Dropdown Menu Line Color to your desired color. For our example, we are using #c2ab92 gold to match Elegant Themes Architecture Firm Layout 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.
  4. Now scroll down to view the lower part of the Dropdown Menu Section, and edit the Mobile Menu Background Color. For our example, we are using rgba(18,18,18,0.85) to match Elegant Themes Architecture Firm Layout color palette.
  5. Next edit the Mobile Menu Text Color along with its Hover color to your preference.

Step 5: Edit the Search Module

In our example layout, we didn’t need to change the Search Module settings. In case you need to, here’s how to change some of the most common settings.

  1. Select the Gear Icon in the Search module to open Search Settings.
  2. In the Text Section, add any Input Placeholder text you want for your website.

 

Lower in the Content tab you can toggle search button inside the search field.

  1. Select the Elements Settings and change Show Button YES or NO. For our example layout here, leave this at YES.

 

Next, you can edit your Search Field Sizing:

  1. Select the Design tab in Search Settings.
  2. Under the Sizing Section, you can change your Width as needed.

 

You can edit your Search Field Border styling:

  1. Select the Border Styles.
  2. You can change your Border Width as needed.
  3. Adjust your Border Color to your desired color.

Step 6: 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.

  1. Select the Design tab in Button Settings.
  2. The toggle Use Custom Styles for Button must be in YES position.
  3. If necessary, change the Button Text Size to your desired size.
  4. Next change the Button Text Color, if desired. For our example we are using white to match Elegant Themes Architecture Firm Layout color palette.
  5. Then change the Button Background color and Hover state to fit your website design as shown. We are using white at #c2ab92 to match our layout.
  6. Add a Button Border Color if desired. 
  7. Next change the Button Font to your desired font, as shown. For our example we are using Karla to match our layout.
  8. Then change the Button Font Weight to your preference.

 

 

Step 7: Change the Header Background Color

  1. Select the Gear Icon in the Section module to open the Section Settings.
  2. In the Background Section, add a background color to what you want for your header. For our example, we are using #121212 dark gray to match our layout.

 

Step 8: Adjust the Custom CSS Where Needed

Adjust the Large Style Menu Items on left of header:

  1. Select the Gear Icon in the Code module (Named Custom CSS and JS) to open Code Settings.
  2. In the Content tab, scroll to Lines 15–18 to change the values for Font Size, Font Weight and Color.

 

1b. Change custom icon in place of standard Search Button:

  • Scroll to Line 49 to change the value for “content: ‘XX’;”. For our example layout we are using ‘\55’ for the magnifying glass icon.

 

1c. Adjust the color for the vertical divider lines between the larger menu items on left side:

  • Scroll to Line 73 to change the values for “border-right:” and Line 76 for “border-left. For our example layout we are using the color rgba(194,172,146,0.5) to match out layout.

1d. Customize the larger menu items on mobile— add the below custom CSS to the Code Settings before the closing bracket in line 105:

#custom-header-1-module .left-side-menu-item a {
color: red !important;
}

(replace red with your desired color)


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.