Making changes to the header of your WordPress website isn’t always straightforward.
Sure, you can probably upload a new logo or edit the header menu links, but changing the overall appearance of your header, or even creating different headers for different parts of your website isn’t something that’s always possible.
If taking full control of the header of your WordPress website is something you’d like to do, this guide will show you one way you can do just that.
It does require the use of a plugin. However, as it’s a powerful tool that can be used to customize your entire WordPress website, it’s a plugin that should remain useful long after you’ve created your first bespoke header.
Let’s begin!
Why Create a Custom WordPress Website Header?
Maybe you want to give your website a truly unique design, or perhaps you just want to edit the header of your site so that it includes a specific element or key piece of information.
Perhaps you’d like your blog posts to have one header design, while the pages on your site have another.
Whatever your goals, if you have the ability to fully customize the header of your website, you have control over a very important part of your site.
Some reasons you might want to customize your website header include:
- Add contact details so they’re prominently displayed
- Insert a call-to-action to generate more clicks, leads, or sales
- Change the layout to match your design preferences
- Use mega menus to add extra content to your navigation area
- Personalize the colors to suit your branding
- Create multiple headers for different parts of your site
- Improve user experience by adding a search field
- Add an email optin form to grow your mailing list
Whether any of those reasons appeal to you, or you have another goal in mind, here’s how you can create a custom header for your WordPress website.
Customize Your WordPress Website Header with Elementor
Some modern WordPress themes include full site editing functionality. This allows you to edit the header and other parts of your website to varying degrees. Some other types of themes also have this functionality, such as Astra and Divi.
However, if you’re not using one of these themes, or you’d rather use a different tool to create a custom WordPress website header, you might be interested in Elementor Pro.
Elementor is a WordPress website design plugin. While there is a free version of the plugin, the header (and footer) editing capabilities — plus many other great features — are only available in the paid version of Elementor.
One of the main reasons to choose Elementor Pro for this task is that it comes with some well-designed editable website header templates. If you don’t possess excellent design skills, you’re short on time, or you’d like some inspiration for your own unique header designs, these templates are invaluable.
How to Create a Custom WordPress Website Header with Elementor
After purchasing Elementor Pro and installing it on your WordPress website, you can start creating your new header. Instructions for installing the plugin and activating it with your license can be found here on the Elementor website.
1) Open the Theme Builder
Once Elementor Pro is up and running, navigate to the Elementor Theme Builder tool by accessing it from the Template sidebar menu of your WordPress dashboard.
From the Theme Builder screen, click on the Header menu item on the left-hand side of the screen.
Now click on the Add New button in the top right-hand corner.
2) Choose a Header Template
The Elementor builder interface will now open and the header templates will be displayed. From here you can choose a template to use as the standing foundation for your custom header design. You can also start with a blank canvas.
You can preview the header templates by clicking on them. Once you’ve found a suitable one, click on the Insert button to start editing it.
3) Edit the Header Template
After inserting a header, the Elementor builder interface will be displayed, ready for you to customize it.
If you click on an item in the header, its settings and controls will be displayed in the sidebar. Some of the ways you can edit your header include changing the colors, using rows and columns to extend the layout, and inserting elements.
Elementor has a number of header elements, such as site logo, search form, and nav menu. All of these can be added to your header. They will then display dynamic information, such as information about your site that you have defined elsewhere, such as in the site settings.
You also insert regular Elementor elements into your menus, such as call-to-action buttons, text fields, or any of the other many elements that come with Elementor Pro.
Click on the Update button in the bottom left-hand corner when you’re ready to publish your changes and update your header.
4) Define When the Header is Used
The header you just created will be used throughout your site by default. However, Elementor lets you create multiple headers. You can then use conditions to define when and where each header is displayed.
Thanks to this, you could create a custom header for the blog area of your site. That header might include links to some of your best blog posts or a link to a start here page that introduces new readers to your blog.
You would then set the conditions for that header so that it’s only shown on the blog archives pages and individual blog posts.
You could also do this for the eCommerce part of your site, with links to product categories or promotions in that header.
To set the conditions for a header, go to the Theme Builder area of Elementor, as covered in step one.
From there, click on the Header menu from the Site Parts sidebar menu.
Once you’ve clicked on the Header menu item, you should see all of the headers that have been created on your site with Elementor. Click on Edit Conditions for the header you want to work on.
Now you can customize the conditions for that header, controlling where it’s used on your site.
As you can see, you can combine conditions to include and exclude your header template as appropriate. As you get a pretty good level of control, it’s not too difficult to create a set of conditions where your header is used exactly where you want it.
The Elementor Pro Theme Builder feature also lets you create custom templates for your footer, single post, single page, archives, and a few other parts of your site.
Thanks to this, you can build a custom theme for your WordPress website, using as many custom templates as you need.
Summary
As we’ve just seen, Elementor Pro is a powerful tool that’s relatively easy to use. It’s not that expensive, either.
As Elementor should work with any theme you’re already using, it’s a cost-effective way to gain the ability to customize your entire WordPress website without the need to start from scratch. If you do want to start with a blank canvas, the free Hello theme from the Elementor team is a good option.
Whatever your current situation, creating custom headers for your website is now hopefully something you can do.
