Product Documentations

Zonus

Create, Edit, Delete and use Custom Header

With inLaw Theme and OneElementsPro plugin installed and activated on your site, you can create a custom dynamic header using the most popular page builder Elementor. You can then use your custom header on any post, page or archive. Let’s see how we can create a custom header first.

Creating a custom header

Before creating a custom header, let’s see how our current example header looks. We will replace this default theme header with our custom header in this article.

Our Default Theme Header

Please follow the following step to create your first custom header.

Step by Step guide:

Step 1. Go to Templates > Save Templates and click Add New.

Step 2. Choose page or Section in the template type. We recommend choosing the page type because you can use the elementor canvas template with page type in the elementor editor. Elementor canvas template gives you a completely white and clean layout where you can add and view your design nicely.

Step 3. Give your template a name like Custom Header and then click Create Template button. You can see in the screenshot below. You will see the elementor editor.

Adding New Header Template from Dashboard > Templates > Add New

Step 4. Optionally, you can open page settings if you have selected page type in step 2 by clicking the cog/setting icon on the bottom left corner of the editor. Then select “Elementor Canvas” from the Page Layout dropdown. This will give you a clean layout to design your header. You can see the screenshot below to see it in action.

Showing how to set Template as Header type and using canvas layout
Showing how to set Template as Header type and using canvas layout

Step 5. Design your header by dragging and dropping widgets from the left widget section. Or you can use a pre-designed header template from our live template library. We will use a pre-defined header in this example for easy and fast implementation. However, you can also design your own custom template by dragging and dropping widgets from the left widget panel.

Now click on the Crown Icon as shown in the previous screenshot to open the live template window. Then click on the “Blocks” Tab as shown in the screenshot below and search for a header. Hover on the header design that you like and click the insert button to use the header. Please see the screenshot below and follow the number points in each screenshot.

Adding A pre-designed header from Live Template library
After inserting the new header, it will look like this.

You can preview your design by clicking the Eye icon near the Green Publish button.

Step 6. You can customize the imported header like changing the logo etc and then save your changes by clicking the green Publish/Update button.

Showing how to customize the logo in the imported header and save it.

Using Custom Header

Now it is time to use the custom header you created above. The inLaw theme provides the most flexible way to use a custom header. Here is how. You can set custom header 3 places and they have priority. Let me explain a bit. This is a very important concept. So, please make sure you understand this. the inLaw theme TRIES to load a Header Template from 4 PLACES. And each place has different priorities. And we are going to know about these priorities.

Suppose, you want to set the custom header of WordPress’s default posts.

  1. You can set a specific header for each post by editing the post and choose a custom header from the layout settings. This header has the highest priority, it means it will be loaded for that specific posts and it will override any other headers set in any other places for that specific post. See the screenshot below and see how you can do that.


  2. You can set a header for all single items of a post type like WordPress Default Page, Post, Case Study, Practice Area, etc. in the Dashboard > inLaw > theme options > Single > Post > Header section. You can set different headers for different post types here. This template has a second priority. It will override the header template set in the General section of the Theme Options and also the theme’s default header.



  3. You can set a header for all single items of ALL post types. in the Dashboard > inLaw > theme options > Single > Post > Header section. This template has a third priority. It will override the default header of the theme.


So, in short, post header has higher priority over the Theme Options’ Single Header. Theme Option’s Single Header has higher priority over the Theme Option’s General Single Header.
For example. Post Header > Single Header > General Header > Theme Default header.

Check the Changes in Effect

Visit your site after setting a header. You should see your new header has been loaded.

Our Custom Header is working on the frontend.

You can use a custom header for custom post types too in a similar way. For example, suppose you want to change the header of the practice area. You can do that easily.

  1. If you want to custom header only in a specific practice area, then edit that specific practice area and set a header in the custom layout section.
  2. If you want to use a custom header for all practice areas, then set a custom header in inLaw > Theme Options > Single > Practice Area > Header Section.
  3. If you want to use a custom header for all single practice area as well as all single details page of all post types, then set a custom header in inLaw -> Theme Options > General > Single page.

You can also change the header for all archives page of all post types similarly.