Help Center

How to Create Responsive WordPress Page Templates

How to Create Responsive WordPress Page Templates

This tutorial describes how to create responsive page templates and add the responsive condition to the dedicated header, body, or footer template with the JetThemeCore WordPress plugin.

Before you start, check the tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg)

  • JetThemeCore installed and activated

With the JetThemeCore 2.0 plugin version, you can create page templates in the Crocoblock > Theme Builder Dashboard tab, add header, body, and footer to them, and set the conditions, which can also be applied to the dedicated template.

Full JetThemeCore Dashboard settings overview is provided in this tutorial.

Information about all Conditions you can find here.

For the template creation, you need to upload the Elementor free version, or you can use the Block Editor.

To make the templates responsive on the dedicated devices, you can set the Сonditions in two ways.

How to Create a New Page Template with the Responsive Condition

To create a new page template, navigate to Crocoblock > Theme Builder and hit the “Create new page template” button.

crocoblock theme builder

Click on the “Add Condition” button.

add condition button

Choose the “Include” (or “Exclude” if you want to hide the template on some devices), “Advanced,” and “Device” options and select the needed device or devices in the last field (“Desktop,” “Tablet,” and “Mobile” options are in the disposal).

advanced device condition

Then, push the “Create” button.

In the newly created Page Template window, click on one of the buttons (“+ Add header,” “+ Add body,” or “+ Add footer”) to add a template to the page with the “Device” condition.

page template

Hit the “Create template” button, or you can add the previously created template from the library to the page.

create template or add from library

You can create a new template in the Elementor editor or WordPress Block Editor (Gutenberg). For that, select the needed Template content type. Then, enter the Template name and press the “Create” button.

template content type

After the template creation, click on the “Go to editor” button to proceed to the Elementor or Gutenberg editor. If you press the “Edit later” button, you will return to the Theme Builder.

go to editor button

You can add the template from the library by clicking on the “Add from library” button. All newly created templates or those ready for editing will be kept here even if you remove them from the Page Template.

template library

How to Add the Responsive Condition to the Dedicated Template

To add the device condition to the existing template, proceed to Crocoblock > Theme Templates and hit the “Edit Condition” button in the needed template.

edit conditions

Hit the “Add condition” button.

add condition button

Choose the “Include” (or “Exclude” if you want to hide the template on some devices), “Advanced,” “Device” options and select the needed device or devices in the last field (“Desktop,” “Tablet,” and “Mobile” options are in the disposal).

header with responsive condition

Finally, hit the “Save Conditions” button.

Responsive Condition Use Case

For instance, we have the Header for the home page and the Secondary Header for the entire site.

travengo headers

The first header contains the menu, and the second contains breadcrumbs.

With the “Device” condition, we can hide the secondary header with the breadcrumbs on the mobile. We’ve clicked on the “Edit Conditions” button near the needed header and added the additional “Exclude,” “Advanced,” “Device,” and “Mobile” Conditions. Then we hit the “Save” button.

additional condition for the secondary header

We’ve moved to the front end. Two headers are visible on the desktop.

two headers are visible on desktop responsive mode

On the mobile, the secondary header is hidden.

secondary header hidden on mobile

That’s all. Now you know how to create responsive page templates and add such a condition to the created template.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.