How to Create a Custom Header in Divi

Divi is a popular WordPress theme that allows you to build custom website designs. One of the most powerful features of Divi is the ability to create custom headers for different pages on your site. This tutorial explains step-by-step how to build a custom header using the Divi Theme Builder.

What You Will Learn

In this Divi tutorial, you will learn:

  • How to set up the default header for your Divi website
  • How to create a custom header for a specific page using Divi Theme Builder
  • Tips for styling your custom header, including:
    • Changing logo size
    • Setting active menu link colors
    • Making the header sticky

By the end, you’ll have the skills to create unique headers across the different pages of your Divi website.

Setting the Default Header

Every Divi website starts with a default header. This includes elements like the menu, logo, and background.

To configure the default header styles:

  1. Go to Appearance > Menus in your WordPress dashboard to create the primary menu
  2. Upload your logo under Theme Options
  3. Open Theme Customizer > Header & Navigation to pick header layout and design menu styles

Some key settings to adjust:

  • Menu height
  • Logo max height
  • Text size and colors
  • Active link colors

You can also customize how the header looks when scrolling by adjusting the fixed navigation settings. For example, you may want to shrink the menu height and text size when scrolled to the top.

Building a Custom Header

The true power of Divi comes from the Theme Builder. This allows you to design completely custom headers, footers, and body layouts for individual pages or templates.

To create a custom header:

  1. Go to Theme Builder and click Add New Template
  2. Select the page or template to target, like “About Us”
  3. Click Use The Divi Builder to launch the header builder
  4. Build your header row and add modules like the menu and logo
  5. Adjust module settings to style the header as desired

Header Design Tips

When designing your custom Divi header, keep these tips in mind:

  • Reduce top and bottom padding sections for a tighter header
  • Set the row or section to “Sticky” so it stays fixed to the top when scrolling
  • Shrink the logo size and menu text size on scroll using Sticky options
  • Pick an Active Link Color to visually indicate the current page
  • Center align elements for an elegant header

Conclusion

The Divi Theme Builder provides endless options for crafting unique headers across your website. By following this tutorial, you can now build customized headers to match the design needs of each individual page.

Experiment with different layouts, colors, and effects to find the perfect header to represent your brand. The customization power of Divi helps turn your website into a true design masterpiece.

What are you waiting for?