When creating a website, header is one of the parts you need to notice the most since it is one of the most visible parts of your website. The more attractive your website header, the more appealing as well it is in the visitors’ eyes. With Divi Builder, you can create an attractive header for your website without having to deal with CSS or HTML. Instead, you can use its visual editor.
Divi Builder allows you to create a custom header on your WordPress site whether for the entire website or certain page(s) and post(s). In this post, we will show you how to create a custom global header with Divi Builder. Just to remind you in case you haven’t known yet. Divi Builder can now be installed on all WordPress themes, not limited to themes developed by Elegant Themes (the developer of Divi Builder) anymore.
How to Create a Custom Global Header with Divi Builder
In general, there are two ways to create a global custom header for your WordPress site with Divi Builder. First, you can create the header from a template/layout. Second, you can create the header from scratch.
Creating the Custom Header from a Premade Layout
To save you time in creating the header, you can use a header layout. Unfortunately, Divi Builder offers no header layout on the layout library, so you need to look for a header layout from the external source. On one of the Elegant Themes official blog posts, Divi Builder offers a header layout you can download for free.
Once you downloaded the header layout above — which is available in a ZIP file — unzip it to get the JSON file of the header. Next, login to your WordPress dashboard and go to Divi -> Theme Builder. Click the two-arrow icon on the right side.
On the appearing popup, go to the Import tab and click NO FILE SELECTED to select the JSON file of the header layout you have just extracted. Click the Import Divi Theme Builder Templates button to import the layout.
Until here, you have successfully created the custom header for your website. You can click the Save Changes button to apply it to your website. But of course, you need to edit the header first to replace the default content like the site logo, social media links, navigation menu and so on. Click the pencil icon to edit the header layout. You will be taken to the Divi Builder editor.
The header layout you imported above consists of one section, two rows, and four modules. The modules are:
- Image: to display the site logo.
- Social Media Follow: to display social media icons.
- Button.
- Menu: to display the navigation menu.
To edit an element (section, rows or modules), hover your mouse over an element you want to edit and click the gear icon to open the settings panel.
If you experience a problem in hovering your mouse over an element (due to overlapping), you can use the Wireframe View feature.
Once you are done editing your layout, click the Save button on the bottom-right corner to apply the latest changes and click the X button on the top-right corner to exit the Divi Builder editor. You will be taken back to the Theme Builder page. Click the Save Changes button.
Creating the Custom Header from Scratch
Creating a custom header from scratch gives you more freedom to design the header to match it with the whole design concept of your website. You can add any Divi Builder module you want. In this example, we will demonstrate how to create a simple header as follows.
The header above consists of the following elements:
- A section
- A row (three-column structure)
- 3 modules (Image, Menu, and Search)
To get started, go to Divi -> Theme Builder. Click Add Global Header and select Build Global Header.
On the dialog window (since you want to create the header from scratch), select the built from scratch option. Click the Start Building button to start building the header.
You will be asked to add a row right after clicking the Start Building button above. Select a row with the three-column structure.
Before start adding a module to each column on the row, you can customize the section first. To do so, hover your mouse the section (blue container) and click the gear icon to open the settings window.
On the settings window, go to the Design tab. To remove the divider, you can open the Dividers block. To set the size of the section (high and width), you can open the Sizing block. To set the margins and the paddings, you can open the Spacing block. To add a box shadow, you can open the Box Shadow block. Make sure to click the checklist icon to save the changes.
Now you can add a module to each column on the row. Add the Image module to the first column and upload your image logo, add the Menu module to the second column and select the menu you want to display, and add the Search module the third column. Don’t worry if your modules look a bit messy. We will tidy it up later.
Open the row settings window by clicking the gear icon of the row. Go to the Design tab and open the Spacing block. Set the top margin to tidy up the columns.
Now you can style each module you have added. As before, you can hover your mouse over the module you want to customize to open its settings window. You can use the Wireframe View feature when experiencing a problem to hover your mouse due to the overlapping issue.
Go to the Design tab on the settings window to set things like typography, margins, size, color, and so on. Don’t hesitate to play around on each block to find what styling options you can set.
Once you are done, click the Save button on the bottom-right corner to save the changes and click the X button on the top-right corner to exit the Divi Builder editor. Click the Save Changes button on the Theme Builder page to apply the custom header you have just created.
Final Words
Divi Builder allows you to create a custom header for your WordPress site without coding. What we showed on the examples above is just the surface. You can dig deeper to explore more and unleash your creativity. You can add any module you want, play around with color combination, try different margins and paddings, try different font styles, and so on.
