This content originally appeared on Envato Tuts+ Tutorials and was authored by Suzanne Scacca
In this tutorial, we’re going to show you how to build a header with Elementor that looks and works exactly as you want it to. We’ll also check out various settings that can help you create a custom, responsive header that’s easier to use.
Have you ever wanted to change something in the header of a WordPress website? Perhaps you wanted to add a search bar or login button above the menu links. Or maybe you wanted to make the header sticky so that navigation would be easier for visitors.
While many premium WordPress themes enable users to do things like customize fonts, spacing, and logo placement, the ability to customize the structure of the header is limited. This can be a frustrating experience as so many high-quality WordPress themes give you the ability to customize pretty much everything else on a website.
Elementor has the perfect solution for this problem.
Elementor Template Kits on Envato Elements
Before we dive in, don’t forget that you can download unlimited Template Kits for Elementor with your Envato Elements subscription, to use with your WordPress website. Envato Elements also gives you access to thousands of other creative assets, like stock photos, graphics, video templates, audio, Photoshop actions, you name it!
With that said, let’s look at how you can customize your own header in Elementor!
How to Build a Header With Elementor
The tool you’ll use to build a header with Elementor is called Theme Builder. For this, you’ll need an Elementor Pro subscription.
Once you have the plugin enabled, these are the steps needed to quickly create a header that makes it easier for visitors to explore your website:
1. Open up the Theme Builder
Elementor’s Theme Builder lives under the Templates tab:
The Theme Builder allows you to create custom designs for key website elements like the header and footer. In addition, you can create custom layouts for different kinds of pages on your website—like single blog posts, search results pages, and shop pages.
You’ll find a list of those Site Parts on the left side of the screen along with ones you’ve already designed in the center:
To build your new header, click the blue + Add New button in the top-right corner. You can also hover over the Header link under Site Parts and click the blue plus-sign icon that appears there.
This will open up the Elementor editor.
2. Choose One of the Elementor Header Templates
The first thing you see when you enter the editor is a list of Elementor header block templates:
When you hover over each of the Elementor templates, a magnifying glass icon appears. Click it to preview the template.
Choose a layout that’s closest to what you envisioned for your header. It’s okay if the colors, components, and layout don’t exactly match. All you’re doing in this step is laying down a foundation to reduce the amount of building you have to do.
When you’ve found one you like, select it and then click the green Insert button in the top-right corner:
This will add a fully editable header to the Elementor canvas.
3. Replace the Logo
There are a couple of ways to add a logo to the website header.
One way is to upload it using the Image widget. That’s how the logo in this Elementor header template was created:
But what happens if you change the logo down the road? The easiest way to keep every instance of your logo updated on your website is to upload the file to Site Identity.
To access Site Identity from inside Elementor, click on the hamburger menu icon in the top-left corner. Then go to Site Settings and Site Identity where you’ll upload your logo file:
Next, locate the Site Logo widget (it’s an Elementor Pro widget) and drag it into the same column where the template’s logo image is. Once it’s in place, right-click the template logo and delete it:
You may want to do extensive customizations to the logo or none at all. Use the Content, Style, and Advanced settings to adjust the design and functionality.
4. Customize the Navigation
Every Elementor header template comes with a Nav Menu widget built into it. This widget will automatically pull in whatever the main navigation menu is.
To change which menu appears in the header, click on the Nav Menu element in the header. Then select a different menu from the dropdown:
Review the settings under Content to ensure that the content displays as you want it to. From the alignment of the menu links to the icon where the mobile menu is contained, you can configure it all here.
To alter the style of the typography and iconography, go to the Style tab. Advanced will allow you to customize the layout, motion effects, background design, and more.
5. Add a Call-to-action
The main purpose of the website header is to help visitors get around your website. That said, it’s good practice to add a call-to-action to the header in addition to the logo and menu that visitors expect to find there.
The call-to-action should be one that the majority of visitors will be attracted to. For instance:
- On an ecommerce site, add a search bar.
- On a SaaS site, add a “Try Now” or “Schedule Demo” button.
- On a media website, add a button to “Subscribe”.
Whatever you want to add, Elementor has a widget for it. Find it and drag it over to the right end of your menu:
In some of these header templates, there might already be something there, which is good since you won’t have to create the column structure on your own. Just move your new CTA beneath or above the existing element. Then delete the one you don’t need.
As you can see in the above example, the button from the template was styled to match the design of the header. When we added our own, it pulled in the global colors and fonts we set up previously.
One thing to do before you move onto the next step is to check the CTA in responsive mode. Because buttons and search bars can be cumbersome elements, you want to make sure they’re not too disruptive to the mobile header design.
To open up responsive mode, click the Responsive Mode button in the bottom toolbar and then select the smartphone icon in the new responsive toolbar at the top:
Any changes you make to your header elements in this view only apply to the mobile design. Feel free to customize the widget content as well the column settings if you’re struggling to get everything to fit the way you want it to.
6. Add Other Content to the Website Header As Needed
Every effective header contains the three elements we’ve customized up to this point: the logo, menu, and call-to-action.
However, you may want to add secondary content as well. This is particularly useful for businesses that want to promote their other channels. For instance:
- A brick-and-mortar business could use this space to publish their address and add a click-to-call phone number.
- An online business can place social media links and a click-to-email address here.
- eCommerce companies can use it for things like the login button, shopping cart icon, and member account links.
If you know you’re going to go that route, choose an Elementor header template that has a secondary toolbar. This way, you’ll only have to customize the design and content instead of building the structure from-scratch.
When editing this bar, start by customizing the background color of the Inner Section widget. To do this, right-click on the section to edit it. Then, update the color under Style:
To edit the content in the top banner, either edit the existing content or drag-and-drop new widgets into place. You can then use the Content, Style, and Advanced settings to customize the way they look and act.
Before you wrap up, do one more responsive check. The template is pre-programmed to pare down the elements in the banner to the bare minimum. So it’s important to make sure nothing is missing and that any newly added content doesn’t wrap to the next line.
7. Set the Header Conditions and Publish
With your content and design done, the last thing to do is set the conditions for your custom website header.
Go down to the green Publish button and click the up-arrow beside it. Click on Display Conditions:
By default, the new header you just built will show up at the top of every page.
If you want to exclude the header from any pages (like a sales landing page, for instance), switch INCLUDE to EXCLUDE and then input the page or pages to apply the setting to. You can also use these settings to display custom headers on certain types of pages.
When you’re done configuring the display conditions, the custom header will automatically publish and go live on your site. Check it out and make sure it looks and works exactly as you intended.
Conclusion
There are a number of reasons why WordPress users should upgrade to Elementor Pro. Think about something like this; building a custom header for your website. Elementor makes easy work of something that previously required additional plugin workarounds or coding.
It might not seem like a big deal. However, think about your own experiences engaging with websites that have incomplete headers. Having to scroll down to the footer or dig around on each page to find the information or features you’re looking for as a visitor can be a real pain.
If you build a header with Elementor that includes all the right features and functionality, you won’t have to worry about losing visitors to a poor navigation experience.
This content originally appeared on Envato Tuts+ Tutorials and was authored by Suzanne Scacca
Suzanne Scacca | Sciencx (2022-07-19T22:36:00+00:00) How to Create a Custom Website Header with Elementor. Retrieved from https://www.scien.cx/2022/07/19/how-to-create-a-custom-website-header-with-elementor/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.