Would you like to create a custom header in WordPress with Elementor?
The header is one of the crucial elements that every website should have. A header usually contains a menu, making it easy for your visitors to navigate to important pages on your website. Another element that is typically found on a website header is the logo.
Discover How to install Elementor on WordPress
Most WordPress themes, whether free or paid, allow you to customize the header by adding your website logo or the navigation menu. Some WordPress themes, allow you to add additional elements such as search bar and social media icons.
But is it possible to create a custom header in WordPress to replace the header of the WordPress theme asset ?
Of course, you can create a custom header to override the default header for the currently active theme on your WordPress website.
If you have a programming skill (PHP in this case), create a custom header for a WordPress theme is not a big problem. If you don't have any programming skills, Elementor lets you create a custom header without writing a single line of code. You can create the header via a visual drag-and-drop editor.
Please note: Theme Builder is only available on Elementor Pro.
How to create a custom header in WordPress with Elementor
The pro version of Elementor comes with a feature called ThemeBuilder. This feature allows you to create a WordPress theme without coding. Theme elements you can create with Elementor's theme builder include:
- on your mind
- Footer
- Single post template
- Archive page template
- 404 page template
In this article, we are going to show you how to create a custom header for your WordPress theme with Elementor. Once published, this custom header will replace your current theme's header.
Before you start, make sure you have installed Elementor Pro on your WordPress website.
First, go to Templates -> Theme Builder.
On the Theme Builder page, go to the tab Header And click on the button Add to create a new header.
A pop-up window will appear, asking you to give your template a name. Type the name of your model and click on the button CREATE A MODEL.
Elementor allows you to create a header from a template. Select one of the models available in the model library and click on the button Insert to load it into the Elementor editor.
You can also create the header from scratch. If you prefer to create the header from scratch, you can just 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.
Read our guide: Elementor Free vs Elementor Pro: Detailed Feature Comparison
In this article, we'll show you how to add the common elements of a header: website logo, navigation menu, and search bar. In this case, you will need a new section with three columns. Click the plus icon in the Elementor editor and select the three column structure.
Set the width of each column by dragging the divider to the left or right direction. Take a look at the capture below.
- Add website logo
To add the website logo, drag the widget Logo of the site from the left panel to one of the columns in the Elementor editor.
The widget Logo of the site will load your website logo. If you haven't specified your website logo, you can go to Appearance -> Customize to add your logo.
Read also: How to import or export models in Elementor
You can customize your logo via the left panel. You can define elements such as alignment, link, width, etc.
Just play around with the left panel until you are happy with the result.
- Add navigation menu
To add the navigation menu, drag the widget Navigation Menu to one of the columns in the Elementor editor.
The widget Navigation Menu 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 multiple menus on your website, you can specify which one you want to display from the option drop-down menu Menu of the left panel.
Again, you can play around with the left panel to customize your menu. You can set the layout (horizontal, vertical), alignment, animation effect and so on.
- Add search bar
To add the search bar, you can drag the widget Search Form in the remaining column.
Once the online form 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 match your theme color. To do so, activate the section by clicking on it in the browser (Ctrl+i).
Go to the tab Style on the left panel and select your favorite color by clicking the color picker in the option Colour Section Background.
If you want to have a sticky header, you can go to the tab Advanced. In the option Sticky, under the section Motion effects, set the Sticky location. By default, the Sticky effect will be applied to all types of devices (desktop, tablet and smartphone).
Read also: Elementor Pro: 10 Awesome Features to Unlock - Part I
If you want to turn off the Sticky effect on a certain type of device, just remove the device from the field.
Publish your custom header
So far you have successfully created your custom header. There are many other tuning options you can set, and it's impossible to cover them all on this post.
See also: How to Create a Unique Post Template with Elementor Pro
Just play around with the left panel until you are really happy with the result. When you are done, click the button PUBLISH at the bottom of the left panel to publish your header template.
In the next step, you will be asked to set the display condition. Click on the button ADD CONDITION
By default, your header template will be applied to the entire website. So if you want your header template applied to the whole website, you can just click on the button SAVE & CLOSE.
Read also: How to create a footer in WordPress with Elementor
Or, if you want your header template applied to a specific page, you can specify the page by clicking the drop-down menu. Select the page from the other drop-down menu that appears next. Click on the button SAVE & CLOSE once you are done specifying the page.
Get Elementor Pro Now!
Conclusion
Here ! That's it for this article which shows you how to create a custom header in WordPress with Elementor. If you have any concerns on how to get there let us know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
