custom header with elementor

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.

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 the search bar and social media icons.

But is it possible to create a custom header in WordPress to replace the header of the active WordPress theme?

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 programming skills (PHP in this case), creating a custom header for a WordPress theme isn’t a big deal. 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 through a visual editor by dragging and dropping.

custom header with elementor
custom header with elementor

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 Theme Builder. This feature allows you to create a WordPress theme without coding. The theme elements that you can create with Elementor’s theme builder are as follows:

  • 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 Elementor Pro installed on your WordPress website.

First, go to Templates -> Theme Builder.

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

A pop-up window will appear, asking you to give your template a name. Type the name of your template and click on the CREATE TEMPLATE button.

Elementor allows you to create a header from a template. Select one of the templates available in the template library and click on the Insert button 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.

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 Site Logo widget from the left panel to one of the columns in the Elementor editor.

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

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 Navigation Menu widget to one of the columns in the Elementor editor.

The Navigation Menu widget will load the main menu of your website. If you haven’t created any menus 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 drop-down menu under 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), alignment, animation effect, and so on.

  • Add search bar

To add the search bar, you can drag the Form Search 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 match your theme color. To do this, activate the section by clicking on it in the browser (Ctrl + i).

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

If you want to have a sticky header, you can go to the Advanced tab. In the Sticky option, under the Motion Effects section, set the Sticky location. By default, the Sticky effect will be applied to all types of devices (desktop, tablet, and smartphone).

If you want to turn off the Sticky effect on a certain type of device, just remove the device from the field.

Read more: Elementor Free vs Elementor Pro: Detailed Feature Comparison

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.

Just play around with the left panel until you are really happy with the result. Once you’re done, click the PUBLISH button 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 ADD CONDITION button

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 SAVE & CLOSE button.

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 the SAVE & CLOSE button when you have finished specifying the page.

 

for website maintenance service contact us.

Leave a comment

echo "";