How to create a WordPress custom header with Woostify?

It is necessary to have a good header because a perfect header can grab the first impression from customers on your site, which may positively affect a better user experience. In this article, we will describe the detailed process of design WordPress custom Headers with the Woostify theme.

What is WordPress Custom Header?

Custom headers is a WordPress theme feature that allows theme developers to enable support for customization of the header image. WordPress custom header provides you with more control and flexibility to customize the logo, text, of the header to make it attract the target audience and get their first good impression. A well-structured custom header should not only include sections but also highlight the unique features. So that, it is necessary to have custom headers on your WordPress site. Furthermore, you can create a different header on each page to fit your expectation.

An Introduction to the Header customization functionalities in Woostify.

Woostify is a powerful WooCommerce theme that is built based on Elementor page builder. However, the theme 100% focuses on eCommerce, so all features will be work perfectly for eCommerce purposes like increasing traffics and boosting sales.

Woostify comes with awesome widgets for you to create WordPress custom headers that meet all your requirements. With Woostify, you can easily design and customize your site header, create multiple headers, sticky header, and transparent header to impress visitors at the first sight they land on your site. In this article, we will present 2 different ways for you to create a WordPress custom header with Woostify Pro header addons and a plugin developed by Woostify team, Boostify Header Footer builder plugin.

What we should consider when customizing a WordPress header?

Before learning how to create WordPress custom headers, you’ll need to figure out the design you want to use for your header. Below are some of the best practices and tips you should consider when designing your website header for your WordPress site.

• Customize site logo, title or description.
• Powerful WordPress nav menu
• Responsive on all devices
• Choose images that fit your branding
• Use your own images when possible

How to Create a WordPress Custom Header with Woostify Pro?

In this tutorial, I suppose that you have Woostify pro installed on your WooCommerce store. So lets start creating and customizing your WordPress custom header by referring the steps below.

Step 1: Enable Header Footer Builder on your site

To use the Header Footer builder on your site, you need to enable it by going to Woostify Options > Activate.

Once activating the addon, you can click in Settings to start the process.

Step 2: Create new template

In the new window, hit the Add New button to create your header template.

Then, you have to give it a name in the Title section.

After that, you can make some Header Footer Template Settings as follows:

• Select Template as Header
• Select the location you want to display on. It may be one of the options below:

• Choose the place you do not want to show your custom header on from the Do Not Display On dropdown options.

• Tick Sticky option if you want to make the header always on the top.

Then click Edit with Elementor to start to build your custom header with Woostify pro.

Step 3: Include required elements

First: Select your desired structure which contains the entire header. And then you can customize the layout such as background, border, style, length, width, etc.

You should divide your header into multiple sections then add needed elements to the section you wish. Then you should change the background color to highlight your header and customize it more easily by clicking on the glid icon and select Edit Section:

Then you can edit style and change background color as you want:

Second: Add required elements

The next step is to add must-have elements such as site logo, site title, menu, and the optional parts like search form, cart icon, login/ registration form which will often appear at the header of a WooCommerce site.

As mention before, Woostify offers a lot of awesome widgets that allow you to add useful functionalities to make the header of your WooCommerce site more powerful. You can find them easily by typing the name of the widget in the search widget bar on the left side screen.

To have the sections above included on your eCommerce WordPress header, you can find and drag and drop the suitable widget as below:

1. Business’s Logo: We use Woostify Logo Image widget With this addon, you can add your brand logo, change the image size, position, and other features.

2. Nav Menu: We use Woostify Nav Menu widget

To get a nav menu, you can also use the Nav Menu widget available in Elementor. However, it is much less powerful than Woostify Nav Menu. Because, Woostify Nav Menu offers you multiple choices to set menu as follows.

In addition to that, you can set menu layout, sub menu, and sidebar menu, etc.

3. Product search form: We use Woostify Search Form widget

With Woostify search form, you can change the color of text, background, border, and the search icon.

4. Product cart: We use Woostify Cart Icon widget

In this section, you can customize the position, icon, and items count

5. Login and registration: We use Woostify Account Icon widget

In this section, you can change the position, icon, color, size of the account icon.

6. Brand name/ Site title: We use Site Title widget

In here, you can edit the site title, link to, size, and position of your brand name.

With the Header Footer Builder addon, you can also make and customize the Sticky Header and select the devices to enable sticky header directly in Elementor when editing the entire section. It’s very helpful when you have multiple sections in the header.

Besides the sections above, you can make many other alternatives or additions like social media or wishlist as you want to make your WooCommerce header fit your expectation.

Once adding the required parts and customizing your header, you need to check it on various devices such as Desktop, Tablet, and Mobile. If there are any performance issues, you can edit it until you are happy with your WordPress custom header.

Once finishing, click on the Publish/ Update button on the bottom left corner of the screen.

After publishing, you can choose to Save as Template to put it to your template library.

The next step is to give your template a name to easily remember, and click SAVE to finish the process.

After finishing, you will see a list of your saved templates that contain the header you have created.

Once updating, you can preview the header like this:

Above is the detailed process to create a WordPress custom header for your entire site. However, you can definitely design different headers on each page by using other widgets to add other elements to the header.

Create a WordPress custom header with Boostify Header Footer builder plugin

If you do not want to upgrade Woostify to the premium package, you can choose Boostify Header Footer builder to customize your header. This is a free WordPress plugin made by the Woostify team and supports free users of Woostify to build their desired header. To create a WordPress custom header with Boostify plugin, just follow the steps below.

Step 1: Install Boostify Header Footer builder plugin in your site

In your WordPress dashboard, go to Plugins > Add New > find the plugin > Install Now > Activate

Step 2: Create a Template

From the menu dashboard, navigate to Boostify Header Footer Builder > Add New

You then type in the name of your template, select Header as the type of template, choose the places you would like to display or not to display. Once you finish setting up, click CREATE TEMPLATE

Step 3: Add required elements

You then hit the Publish button and Edit with Elementor to start designing your custom header by adding necessary elements in the Elementor interface.

However, with the Boostify Header Footer plugin, you have fewer options than using Woostify premium addons. Here, you can use some widgets like Logo, Site Search, Nav Menu, Mega Menu, Cart Icon, etc.

Final Thought

It is really important of the header is for your WordPress website, thus, you should take your time creating the perfect WordPress custom header.

Hopefully, this tutorial helped you design a nice header for your eCommerce WordPress site. In case you want to add other features, you can choose other WordPress header plugins to work with.