Creating a Custom Divi Theme Builder Header with Ultimate Divi Header 3

Home » Docs » Ultimate Divi Headers » Creating a Custom Divi Theme Builder Header with Ultimate Divi Header 3

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 3 to match the style of the Elegant Themes Fashion Layout Pack.

You’ll need to have your Wordpress site installed using the Divi Theme version 4.0 or later, as well as have our Divi Headers downloaded. Then you are ready to import your Ultimate Divi Header file(s) and begin customizing in the Divi Theme Builder.

 

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-3”.
  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-3”.

 

  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: Change the Row Border Color (Divider Line)

  1. Select the Gear Icon in the middle Row.
  2. Then select the Design tab in Row Settings.
  3. In the Border Section, select the Bottom Border icon.
  4. Change the Bottom Border color to your desired color. For our example we are using #f7d584 to match the ET Fashion Layout color palette.

Step 4: Change the Social Media Icon Color

  1. Select the Gear Icon in the Social Medial Follow module.
  2. Then select the Design tab in Social Medial Follow Settings.
  3. In the Icon Section, make sure the Desktop tab selected.
  4. Change the default icon state color to your desired color, if necessary.
  5. If you desire a color change on hover, add a hover state and then assign an Icon hover color. For our example we used #ff6a88 to match the ET Fashion Layout color palette.

 

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

 

  1. Under the Logo Section 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 #ff6a88 to match the ET Fashion Layout 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 Hover state.
  6. Then change the Menu Text Hover state Color to your desired color. For our example we are using #ff6a88 to match the ET Fashion Layout color palette.

 

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 #f7d584 to match the ET Fashion Layout color palette.
  2. Click on the Dropdown Menu Text Color to Hover state.
  3. Then change the Dropdown Menu Text Hover state Color to your desired color. For our example we are using #ff6a88 to match the ET Fashion Layout color palette.
  4. Next change the Dropdown Menu Text Active Link Color to your desired color. Again, for our example we are using #ff6a88 to match the ET Fashion Layout color palette.
  5. 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 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. If necessary, change the Button Text Size to your desired size. For our example we are using 19px to fit the ET Fashion Layout design.
  3. Next change the Button Text Color, if desired. For our example we are using 70% black to fit the ET Fashion Layout design.
  4. Then change the Button Background color to fit your website design as shown. For our example we are using #f7d584 to match the ET Fashion Layout color palette.
  5. Click on the Button Background Hover state.
  6. Then change the Button Background Hover state Color to your desired color. Again, for our example we are using #ff6a88 to match the ET Fashion Layout color palette.
  7. Next change the Button Font to your desired font, as shown. For our example we are using Poppins to match the ET Fashion Layout.
  8. Then change the Button Font Weight to you prefer.

Note: you may want to adjust the Button Top Padding to center the label vertically in the button.

Step 7: 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 a background color to what you want for your website.

 

To change one or both of the separate rows 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 website.

Step 8: Change Search Field and Icon Colors

In our example above, we didn’t need to edit the Search Field or Search Icon. Here’s how to do it.

To turn the search box ON or OFF:

  1. Select the Gear Icon in the Menu module to open Menu Settings.
  2. Change the Show Search Icon toggle to what you want for your website.

 

To change the color and size of the Search Icon:

  1. Select the Gear Icon in the Menu module to open Menu Settings.
  2. In the Icons Section, change the Search Icon Color to what you want for your website.
  3. To adjust the icon size, scroll lower in the Icons Section, change the Search Icon Font Size to your preference.

 

To change the Search Field background color and shadow style:

  1. Select the Gear Icon in the Code module to open Code Settings.
  2. In the Content tab, scroll to Line 33 to change the Search Field background color.
  3. Scroll lower in the Content tab to Line 37 to change the Search Field shadow properties.

 


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.