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.
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.
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.
7 Step – Now you should upload the usual image and retina one (.svg) in the respective fields.
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.
9 Step – Find the Nav Menu widget and drop it on the page in the center.
10 Step – Open the Menu accordion block and in the Select Menu dropdown select the menu you want to be visible on the page.
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.
14 Step – Let’s also add a title using the Heading widget to the very top of the page.
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.
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.