On this tutorial, we’re going to indicate you the way to construct a header with Elementor that appears and works precisely as you need it to. We’ll additionally try numerous settings that may aid you create a customized, responsive header that’s simpler to make use of.
Have you ever ever wished to vary one thing within the header of a WordPress web site? Maybe you wished so as to add a search bar or login button above the menu hyperlinks. Or perhaps you wished to make the header sticky in order that navigation can be simpler for guests.
Whereas many premium WordPress themes allow customers to do issues like customise fonts, spacing, and emblem placement, the flexibility to customise the construction of the header is proscribed. This could be a irritating expertise as so many high-quality WordPress themes provide the means to customise just about every thing else on an internet site.
Elementor has the right resolution for this downside.
Elementor Template Kits on Envato Parts
Earlier than we dive in, don’t neglect that you would be able to obtain limitless Template Kits for Elementor along with your Envato Parts subscription, to make use of along with your WordPress web site. Envato Parts additionally offers you entry to hundreds of different artistic belongings, like inventory images, graphics, video templates, audio, Photoshop actions, you identify it!
With that stated, let’s have a look at how one can customise your individual header in Elementor!
How you can Construct a Header With Elementor
The software you’ll use to construct a header with Elementor is named Theme Builder. For this, you’ll want an Elementor Professional subscription.
After you have the plugin enabled, these are the steps wanted to shortly create a header that makes it simpler for guests to discover your web site:
1. Open up the Theme Builder
Elementor’s Theme Builder lives underneath the Templates tab:
The Theme Builder permits you to create customized designs for key web site components just like the header and footer. As well as, you possibly can create customized layouts for various sorts of pages in your web site—like single weblog posts, search outcomes pages, and store pages.
You’ll discover a listing of these Web site Elements on the left facet of the display screen together with ones you’ve already designed within the heart:
To construct your new header, click on the blue + Add New button within the top-right nook. You may as well hover over the Header hyperlink underneath Web site Elements and click on the blue plus-sign icon that seems there.
This can open up the Elementor editor.
2. Select One of many Elementor Header Templates
The very first thing you see whenever you enter the editor is an inventory of Elementor header block templates:
If you hover over every of the Elementor templates, a magnifying glass icon seems. Click on it to preview the template.
Select a format that’s closest to what you envisioned to your header. It’s okay if the colours, parts, and format don’t precisely match. All you’re doing on this step is laying down a basis to scale back the quantity of constructing it’s a must to do.
If you’ve discovered one you want, choose it after which click on the inexperienced Insert button within the top-right nook:
This can add a completely editable header to the Elementor canvas.
3. Substitute the Brand
There are a few methods so as to add a emblem to the web site header.
A method is to add it utilizing the Picture widget. That’s how the brand on this Elementor header template was created:
However what occurs when you change the brand down the highway? The best method to preserve each occasion of your emblem up to date in your web site is to add the file to Web site Identification.
To entry Web site Identification from inside Elementor, click on on the hamburger menu icon within the top-left nook. Then go to Web site Settings and Web site Identification the place you’ll add your emblem file:
Subsequent, find the Web site Brand widget (it’s an Elementor Professional widget) and drag it into the identical column the place the template’s emblem picture is. As soon as it’s in place, right-click the template emblem and delete it:
It’s possible you’ll need to do intensive customizations to the brand or none in any respect. Use the Content material, Type, and Superior settings to regulate the design and performance.
When you save the header template as a draft or publish it, you’ll be capable to see your emblem graphic as a substitute of the placeholder picture.
4. Customise the Navigation
Each Elementor header template comes with a Nav Menu widget constructed into it. This widget will mechanically pull in no matter the primary navigation menu is.
tip
For those who haven’t but created your navigation, exit the Elementor editor and set it up underneath Look > Menus.
To vary which menu seems within the header, click on on the Nav Menu factor within the header. Then choose a unique menu from the dropdown:
Evaluate the settings underneath Content material to make sure that the content material shows as you need it to. From the alignment of the menu hyperlinks to the icon the place the cell menu is contained, you possibly can configure all of it right here.
To change the type of the typography and iconography, go to the Type tab. Superior will mean you can customise the format, movement results, background design, and extra.
5. Add a Name-to-action
The primary goal of the web site header is to assist guests get round your web site. That stated, it’s good apply so as to add a call-to-action to the header along with the brand and menu that guests look forward to finding there.
The decision-to-action must be one that almost all of holiday makers can be interested in. As an example:
- On an ecommerce website, add a search bar.
- On a SaaS website, add a “Attempt Now” or “Schedule Demo” button.
- On a media web site, add a button to “Subscribe”.
No matter you need to add, Elementor has a widget for it. Discover it and drag it over to the fitting finish of your menu:
In a few of these header templates, there would possibly already be one thing there, which is nice because you gained’t must create the column construction by yourself. Simply transfer your new CTA beneath or above the prevailing factor. Then delete the one you don’t want.
As you possibly can see within the above instance, the button from the template was styled to match the design of the header. After we added our personal, it pulled within the international colours and fonts we arrange beforehand.
tip
For those who haven’t but configured World Colours or World Fonts in Elementor, click on on the hamburger menu within the top-left nook, go to Web site Settings and customise them there.
One factor to do earlier than you progress onto the subsequent step is to test the CTA in responsive mode. As a result of buttons and search bars could be cumbersome components, you need to be certain that they’re not too disruptive to the cell header design.
To open up responsive mode, click on the Responsive Mode button within the backside toolbar after which choose the smartphone icon within the new responsive toolbar on the prime:
Any adjustments you make to your header components on this view solely apply to the cell design. Be happy to customise the widget content material as nicely the column settings when you’re struggling to get every thing to suit the way in which you need it to.
6. Add Different Content material to the Web site Header As Wanted
Each efficient header comprises the three components we’ve custom-made up thus far: the brand, menu, and call-to-action.
Nonetheless, you might need to add secondary content material as nicely. That is significantly helpful for companies that need to promote their different channels. As an example:
- A brick-and-mortar enterprise may use this house to publish their handle and add a click-to-call cellphone quantity.
- A web-based enterprise can place social media hyperlinks and a click-to-email handle right here.
- eCommerce firms can use it for issues just like the login button, buying cart icon, and member account hyperlinks.
If you realize you’re going to go that route, select an Elementor header template that has a secondary toolbar. This manner, you’ll solely must customise the design and content material as a substitute of constructing the construction from-scratch.
When enhancing this bar, begin by customizing the background coloration of the Inside Part widget. To do that, right-click on the part to edit it. Then, replace the colour underneath Type:
To edit the content material within the prime banner, both edit the prevailing content material or drag-and-drop new widgets into place. You possibly can then use the Content material, Type, and Superior settings to customise the way in which they give the impression of being and act.
Earlier than you wrap up, do yet another responsive test. The template is pre-programmed to pare down the weather within the banner to the naked minimal. So it’s essential to verify nothing is lacking and that any newly added content material doesn’t wrap to the subsequent line.
7. Set the Header Circumstances and Publish
Together with your content material and design performed, the very last thing to do is about the situations to your customized web site header.
Go right down to the inexperienced Publish button and click on the up-arrow beside it. Click on on Show Circumstances:
By default, the brand new header you simply constructed will present up on the prime of each web page.
If you wish to exclude the header from any pages (like a gross sales touchdown web page, as an example), change INCLUDE to EXCLUDE after which enter the web page or pages to use the setting to. You may as well use these settings to show customized headers on sure kinds of pages.
If you’re performed configuring the show situations, the customized header will mechanically publish and go stay in your website. Test it out and ensure it appears and works precisely as you supposed.
Conclusion
There are a selection of the explanation why WordPress customers ought to improve to Elementor Professional. Take into consideration one thing like this; constructing a customized header to your web site. Elementor makes straightforward work of one thing that beforehand required extra plugin workarounds or coding.
It won’t seem to be an enormous deal. Nonetheless, take into consideration your individual experiences participating with web sites which have incomplete headers. Having to scroll right down to the footer or dig round on every web page to search out the data or options you’re on the lookout for as a customer could be a actual ache.
For those who construct a header with Elementor that features all the fitting options and performance, you gained’t have to fret about dropping guests to a poor navigation expertise.
