Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetThemeCore: How to Create a Custom WordPress Header

With the JetThemeCore plugin, create catchy headers on your own or save time relying on pre-designed variants.

Before we start, make sure you have the following plugins installed and activated:

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

Create a Custom Header in Elementor

Making a header from scratch may be complicated, but not when using the JetThemeCore plugin. Thanks to it, you’ll adjust your own custom header to a website of any type.

1Step — Plugin installation

First of all, check if JetThemeCore is installed on your WordPress site. Go to Plugins > Installed Plugins.

jetthemecore plugin

2 Step — Add a new header

On this step, click on Crocoblock > Theme Templates. As soon as you see the “Theme Parts” screen, choose Header > Add New.

add a new header

3 Step — Come up with the header name

You will be asked to choose a type of template, which should be “Header.” Also, set the Template Content Type to Elementor. Enter its name and tap “Create Template.”

adding a header

4 Step — Customize the header

Using diverse widgets from the Elementor and JetPlugins kit, feel free to build headers of any complexity.

Just drag and drop a widget you like to the purposed place on a page and continue customizing.

header elements

You can now play with options setting the background color, buttons, navigation menu, etc. Hopefully, you’ll like this process and find it not only time-saving but also really engaging. That is how the workflow with JetPlugins is meant to be.

At last, do not forget to click on Publish > Update to save the result.

header with jetthemecore

Build a Header in Gutenberg

JetThemeCore works not only with the Elementor page builder. This plugin allows building a header using Gutenberg as well.

To create a header in the default WordPress Editor, head back to the Crocoblock > Theme Templates directory. Click on the “Add New button.

The Template Type will be “Header.” Proceed to the Template Content Type and set it to “Block Editor.” Don’t forget to enter the template’s name and click on the “Create Template” button.

creating a header with Gutenberg

Unlike Elementor, Gutenberg has blocks, not widgets, and the header will look differently. Besides, not all Crocoblock widgets are available in the default WordPress editor. For now, you can add the Site Logo block and the Profile Menu one.

block for header in Gutenberg

Get a Ready-Made Header with the Magic Button 

Why not import a pre-designed header template from the Magic Button library? That’s very helpful when you don’t want to make a header on your own. So, let’s check how it works!

Start with repeating the first three steps described above.

4 Step — Customize the header

Click on the Magic Button icon. After that, you will be redirected to Elementor. 

elementor buttons

In the Header section, you’ll find multiple Crocoblock pre-made templates. Just decide which one matches your page the best and import it by tapping “Insert.”

header templates

Now, style up the header with the amazing JetPlugins widgets. In the Edit section, adjust the background color, buttons, and anything you prefer.

Header with JetThemeCore.

Add a Header to the Page Template

The JetThemeCore plugin got updated to 2.0.0, so now you can create page templates and assign header, body, and footer in a couple of clicks.

To add a freshly built header to the template, go to WordPress Dashboard > Crocoblock > Theme Builder and click on “Create new page template.”

theme builder dashboard

There will be a new pop-up window where you can set one or multiple conditions, according to which the given template will be either shown on specific pages or not.

create a page template

Click on the “Add Condition” button and choose whether you want the header to be shown on the entire site or a specific page.

template condition

With JetThemeCore, you’re not limited to the number of conditions, so you can add as many conditions as needed. Just click on “Add Condition” and adjust the settings according to your needs.

add more conditions to the template

Once you hit the “Create” button, you will see a new template in the JetThemeCore dashboard.

To add a header template, click on “Add header” and either create a new one by clicking on the “Create template” button or choose an existing header from the library.

add a header to the template

Let’s add an already created header. Select the needed one in the Template Library pop-up window and hit “Use.”

template library

Now you can see that the chosen header is assigned to the page’s template.

assigned header

Add more sections to the template, and if you want to delete/duplicate the template or quickly change the conditions, click the three dots in the right upper corner of the template section.

edit the template

JetThemeCore allows controlling all settings and conditions. You can adjust the created header for one exact page or the entire website. Moreover, the plugin enables you to create as many headers (or footers) as needed and apply them wherever you want.