Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetThemeCore: How to Set 2 Different Headers for Different Pages

Wondering how to apply different headers to separate WordPress pages? Keep reading this step-by-step tutorial and learn how to do it with JetThemeCore plugin.

From this tutorial, you’ll find out how to assign the two different header templates to different pages in case you’ve got several headers and the design of your pages is different, requiring the differently styled headers.

Tutorial requirements:

  • JetThemeCore plugin — create footers and headers, add the pre-made content blocks right to the page’s canvas;
  • Elementor free/Gutenberg — add the created header into the preferred editor to finalize the customization, style it up, and publish it right away;
  • Created header templates.

Setting the Header Template to the Specific Page

1Step — The first thing you should do is to choose the header which you want to assign for the specific page. Go to the Crocoblock > Theme templates section.

In case you still don’t have a header template, you should create it in Crocoblock > Theme Templates. Click Add New option. Select Header as a Template Type, choose a Template Content Type Elementor or Block Editor, and set its name. Then click on the Create Template button. You’ll proceed to the editor where you can create a new header template to your liking.

jetthemecore header

2Step — Then, proceed to the Instances.

‘Conditions not selected’ will be shown next to the header. To set them up click on the Edit Conditions button.

header instances

3Step — There will be a new pop-up window where you can define the specific pages you want to show the template on. Click on Add Condition.

add condition

4Step — As a result, a few dropdown lists will appear. To make a header visible on a certain page, the first option needs to be set to Include.

In the following drop-down list choose Singular.

header condition for singular

5Step — Afterwards, in the last drop-down list select a page you need, e.g. Front Page.

singular front page

Once you save the newly set conditions you will see a green checkmark meaning that the header is already active and visible on the chosen page.

active header conditions

Setting Conditions to Another Page

1Step — Go back to Theme Parts and choose the next header. Click on Edit Conditions.

set conditions for another page

2Step — Repeat the steps described above and choose another page where it should be displayed. Then save the changes.

conditions for another page

3Step — Both headers are active now. You can proceed to the front-end and view how the headers are applied to the different pages.

active headers

Now you know how to set different headers for different WordPress pages. Following this tutorial, you have an opportunity to apply a header to any page or single post.