Back to contents

JetBlocks. How to Create Custom Header with JetBlocks Widgets

This tutorial will show you the way to create a custom header with the help of JetBlocks widgets.

In some cases, you need to create a different header from the one you have by default. In this tutorial, we’ll create such header step by step.

Creating a custom header

1 Step – Open your WP Dashboard and proceed to the Crocoblock > My Library. Now you can see the Theme Parts screen with lots of tabs. Open the Header one where you can see all the available headers on your WP installation.

Title, Label and Active Label

2 Step – Click the Add New button at the top to create a custom header. Now you can see the Select Template Type popup box where you have to select the type of the template you want to create as Header and assign it a name.

Title, Label and Active Label

3 Step – Create a new section by clicking the plus button in the working area and selecting a 4-column structure.

4 Step – Find the side borders of the columns drag them to the right and to the left so that the two columns on the left are narrow and the ones on the right are equally wide.

5 Step – Add three-column section below. Now it’s time to fill the columns with the widgets.

6 Step – Find the Site Logo widget and drop in on the page. Open the Content accordion block and select the image in the Logo Type dropdown.

Title, Label and Active Label

7 Step – Now you should upload the usual image and retina one (.svg) in the respective fields.

Title, Label and Active Label

8 Step – The next widget will be Auth Links with the help of which your visitors will be able to log in o create an account on your website. There are such links available for customization as Login link, Logout link, Register link and Registered link. You can enable or disable any of the links.

Title, Label and Active Label

9 Step – Find the Nav Menu widget and drop it on the page in the center.

Title, Label and Active Label

10 Step – Open the Menu accordion block and in the Select Menu dropdown select the menu you want to be visible on the page.

Title, Label and Active Label

11 Step – Select the type of the menu which can be either vertical or horizontal in the Layout dropdown.

12 Step – Make all the necessary changes such as styling your menu up, toggling the Enable Mobile Trigger to Yes, etc.

13 Step – Look for the Search widget in the Elementor panel and drop it on the page. Here you can change the icon, enable or disable the search field, enable or disable Full Screen Popup option, etc.

Title, Label and Active Label

14 Step – Let’s also add a title using the Heading widget to the very top of the page.

Title, Label and Active Label

15 Step – The final step is to add a button with the Button widget which will be one of the CTA elements on your page saying Click Me.

Title, Label and Active Label

Now let’s have a look at what we have already created. If you need more complex header, just use the other JetBlocks widgets, such as Breadcrumbs, Hamburger Panel, Login Form, Registration Form, WooCommerce Shopping Cart, etc.

Title, Label and Active Label