How To Easily Create Headers With Blocksy Header Builder?

In this Blocksy theme tutorial, we will look at how to create a complex header with Blocksy Header Builder.

For doing so, I will first show an image of an eCommerce header that contains three-rows.

Later, we will try to imitate that header. By creating a same header using the Blocksy header builder and various other header elements.

Since, eCommerce websites have a lot of links (navigation) and other header elements, it will be the best challenge by choice. Plus, the header should also be mobile responsive.

Blocksy Header Elements Overview

You can build a beautiful website header using Blocksy free or pro. The header builder is available with the free version of the theme as well.

To put it briefly, Blocksy free version comes with fewer header elements. Therefore, it might require you to add HTML shortcodes here and there to create a complex header.

Have a look at the chart below and analyze for yourself.

bluehost hosting banner

Blocksy Header ElementsBlocksy FreeBlocksy Pro
Account
Button
Cart
HTML
Menus 1 & 2
Mobile Menu 1
Logo
Off-Canvas Logo
Socials
Search
Contacts
Divider
Language Switching
Mobile Menu 2
Menu 3
Search Box
Trigger
Wishlist
Widget Area

From the chart above, I’d say the following are crucial for any eCommerce or B2B service business;

  • Contacts, for calling product owner/service technician before buying or booking
  • Search Box, for category-based product searching
  • Trigger, to give your visitors an impression that there is a mobile menu
  • Widget Area, to show main categories vertically, from the header bottom bar
  • Wishlist, to help visitors with their favorite products

These are one of those header elements that add up to a greater UX (user experience) for your site visitors, and are available with Blocksy Pro only.

Certainly, blogs and personal portfolio sites do not really need so many header elements, at least not in the beginning.

See what else is packed into Blocksy Pro, take a quick peek at

Sample Complex Header For Insipiration

Let us look at our sample header, the one which we will use for inspiration.

This is a Flatsome theme eCommerce header. It has three rows; top row, middle row and a bottom row.

sample flatsome theme header
Sample eCommerce Header For Insipiration

Header elements used in all the three rows are as follows;

  1. Welcome Message
  2. Website Menu 1
  3. HTML element that opens email optin modal
  4. Language Switcher
  1. Site Logo
  2. Search Box
  3. Wishlist Element
  4. Account Element
  5. Add To Cart Header Element
  1. Website Menu 2
  2. Contact Element with Email, Working Hours & Phone

Create The Header Using Blocksy Header Builder

Without any further delays let us start our Blocksy WordPress theme tutorial of creating a header.

On my Blocksy theme demo site, I have already installed the Blocksy Companion Pro plugin to avail all the benenits of the premium theme.

Step 1: Go To Blocksy Header Builder

From your WordPress Dashboard, hover your mouse on Appearance, and thene click on Customize.

You will see the Blocky Theme Customizer.

Click on Header and the Blocksy Header Builder will open.

desktop header builder
Blocksy Header Builder With Header Elements

All the header elements are available on the left-hand side and the header builder on the right.

Above the header builder, you can see live changes on your site.

Make sure you’ve Desktop Header is enabled.

Step 2: Customize All The Header Rows

Hover your mouse on the Top Row and click on the gear icon.

Blocksy Header Top Row

Once you’ve selected the top row, customize it according to our sample header’s top row.

blocksy header top row height and color
Customize Blocksy Header Top Row Height & Color

I set the Row Height to 30.47 pixels under the General Tab and changed the color under the Design Tab.

customize blocksy header main row
Adjusting Row Height & Color of Blocksy Main Row
Blocksy Header Bottom Row Customization

Similarly, adjusting the row height and customizing colors of the other two rows.

Note:- In the image you can see that the Sticky State’s color has been set. That is because, earlier I had created a Blocksy sticky header for desktop and mobile.

All the header rows are customized and ready on the front-end.

Now, we just need to add different header elements to make it operational.

Step 3: Add Header Elements To Top Row

Let us look at the header elements once again in all the three rows of our sample header.

Go to the header builder and click on Top Row. Now from the header elements drag the HTML element to the top row of the header.

Click on the HTML Header element and start customizing it.

customize blocksy header element
Customizing HTML Header Element

Under the General Tab, write down the message in paragraph format and under the Design Tab, adjust the fonts, font size, font style, and color.

Similarly add the Menu Header element and customize it.

customize blocksy header menu element
Customizing Menu Element

Note:- You need to manage Menus from WordPress Dashboard >> Appearance >> Menus.

Next element is a Newsletter with a Link. Since, Blocksy does not have an element and an Icon for that. I’ve used the Contact Header Element and customized accordingly.

blocksy contact header element
Customizing Newsletter Element

For your information, the Typography and Colors used in the Top Row are as follows;

  • Background Color: #f2f5f7
  • Font Color: #777777
  • Font: Lato
  • Size: 14.4px
  • Font Style: Bold 700

Finally, this is how the Top Row looks like;

blocksy header builder top row
Header Top Row

Step 4: Add Header Elements To Main Row

In the Main Row we’ll need to add Logo, Search Box, Wishlist, Account, and Add to Cart header elements.

Drag the Logo header element and customize accordingly.

Blocksy Header Element- Logo

Notice that I do not have a logo, that is the reason I have enabled Site Title and adjusted the Logo Height.

Under the Design Tab, I have chosen separate fonts, font size, and applied left margin for the Site Title to pop up.

Next, added the Search Box element, customized the search box width, Input Font Color, Icon Color, Border Color, and enabled live results feature.

customize blocksy header element- search box
Header Element- Search Box

Followed by that, I’ve added Wishlist, Account, and Add to Cart elements and customized them accordingly.

Note:- From the Label Text field, I have removed the labels of Wishlist and Account element.

For your information, the Typography and Colors used in the Main Row are as follows;

  • Background Color: #ffffff
  • Font/Icon Color : #3A4F66
  • Hover Color: #1559ed
  • Font: Algereya Sans SC
  • Size: 30px (Site Title)
  • Font Style: Bold 700
blocksy header builder main row
Header Main Row

Finally, this is how the Blocksy header main row looks like.

Step 5: Add Header Elements To Bottom Row

This is the last row to add header elements and customize. As per the sample header image, this row contains only header elements; a Site Menu and Contacts element.

The Typography and Colors used in the Bottom Row are as follows;

  • Background Color: #1e73be
  • Menu Active Indicator Color: #19519b
  • Font/Icon Color : #e1e8ed
  • Hover Color: #ffffff
  • Active Color: #ffffff
  • Font: Lato
  • Size: 14.4 pixels
  • Font Style: Bold 700
blocksy header bottom row
Bottom Row

That’s it. All the rows are created and now the header looks very much like our sample WooCommerce header image.

Just so that you have an idea, these are all the header elements used in the builder.

blocksy header builder and header elements
Working With Blocksy Header Builder Menus & Elements

Step 6: Verify The Site Header In The Front End

Finally, let us check our header on the front end of the website.

Blocksy Header Created on a Site

Doesn’t it look nice and beautiful on the front end of a website. It sure does.

Conclusion

I hope this tutorial on Blocksy header builder helps you to easily create complex headers with the Blocksy theme.

In order to take the full advantage of the header builder, I recommend Blocksy Pro version.

The premium version makes it very easy for you to create headers with more than one row.

Plus, if you ever want to create a Blocksy transparent header for an eCommerce site, with multiple header elements; the premium version is your go to option.

Give it a go, customize the header rows according to your niche and/or brand and do let me know your valuable feedback.

Ankur Purecha

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol

Leave a Comment