How to Create a Custom Header in WordPress with Elementor

Most WordPress themes, be it free or paid, allow you to customize the header by adding your site logo or navigation menu. Some WordPress themes, including Divi, allows you to add additional elements like the search bar and social media icons.

Is it possible to create a custom header in WordPress to replace the header of the active theme? Of course, you can create a custom header to replace the default header of the theme currently active on your WordPress site.

If you have a programming skill (PHP in this case), creating a custom header for a WordPress theme is not a big deal. If you have no programming skills, Elementor allows you to create a custom header without writing any single line of code. You can create the header via a drag-and-drop visual editor.

How to Create a Custom Header in WordPress with Elementor

The pro version of Elementor comes with a feature called Theme Builder. This feature allows you to create a WordPress theme without coding. The theme elements you can create with the Elementor’s Theme Builder are:

• Header
• Footer
• Single post template
• Archive page template
• 404 page template

In this post, we will show you how to create a custom header for your WordPress theme with Elementor. Once published, this custom header will replace the header of your current theme.

Before getting started, make sure that you have installed Elementor Pro on your WordPress site.

Getting Started with Theme Builder

First off, go to Templates -> Theme Builder.

On the Theme Builder scren, go to the Header tab and click the Add New button to create a new header.

Elementor allows you to create a header from a template. Select one of the available templates on the appearing template library window and click the Insert button to load it to the Elementor editor.

Alternatively, you can also create the header from scratch. If you prefer to create the header from scratch, you can simply close the template library to open the Elementor editor.

Technically, you can add any Elementor widget — which you can explore on the left panel — to your header. But, not all widgets are really necessary when it comes to creating the website header. In this post, we will show you how to add the common elements of a header: Site logo, navigation menu, and search bar.

In this case, you will need a new section with three columns. Click the plus icon on the Elementor editor and select the three-column structure.

Set the width of each column by dragging the separator to the left or right direction. Take a look at the screencast below.

• Add the site logo

To add the site logo, drag the Site Logo widget from the left panel to one of the columns on the Elementor editor.

The Site Logo widget will load your site logo. If you haven’t specified your site logo, you can go to Appearance -> Customize to add your logo.

You can customize your logo via the left panel. You can set things like alignment, link, width, and so on. Just play around with the left panel until you get satisfied with the result.

• Add the navigation menu

To add the navigation menu, drag the Nav Menu widget to one of the columns on the Elementor editor.

The Nav Menu widget will load the main menu of your website. If you haven’t created any menu on your website, you can go to Appearance -> Menus to create one. If you have more than one menus on your website, you can specify the one you want to display from the dropdown menu on the Menu option on the left panel.

Again, you can play around with the left panel to customize your menu. You can set the layout (horizontal, vertical, dropdown), align, animation effect and, so on.

• Add the search bar

To add the search bar, you can drag the Search Form widget to the remaining column.

Once the form is added, you can go to the left panel to customize it.

Customize the header

By default, your header will have a white background. You can change this color to tailor it with the color of your theme. To do so, activate the section by clicking it on the Navigator.

Go to the Style tab on the left panel and select your preferred color by clicking color selector on the Color option on the Background section.

If you want to have a sticky header, you can go to the Advanced tab. On the Sticky option under the Motion Effects section set the sticky location. By default, the sticky effect will be applied to all device types (desktop, tablet, and smartphone). If you want to disable the sticky effect on a certain device type, simply remove the device from the field.

Publish your custom header

Until here, you have successfully created your custom header. There are many other setting options you can set to, and it’s impossible to cover them all on this post. Just play around with the left panel until you get really satisfied with the result. Once you are done, click the PUBLISH button on the bottom side of the left panel to publish your header template.

On the next step, you will be asked to set the display condition. Click the ADD CONDITION button.

By default, your header template will be applied to the entire website. So, if you want your header template to be applied to the entire website, you can simply click the SAVE & CLOSE button.

Or, if you want your header template to be applied to a specific page, you can specify the page by clicking the dropdown menu. Select the page on the other dropdown menu that appears afterward. Click the SAVE & CLOSE button once you are done specifying the page.

The Bottom Line

Theme Builder is one of the features you can unlock after upgrading to the pro version of Elementor. With the feature, you can create a custom header template to replace the default header template of your theme. The process of custom template creation itself is done using the visual editor of Elementor. Meaning that you don’t need deal with code.

You can assign the custom template you created to certain areas on your website. Be it the entire site or specific page(s) or post(s)