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](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/theme-builder-2.png)
Click on the “Add Condition” button.
![add condition button](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/create-page-template-2.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/advanced-device-condition-2.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/page-template-2.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/12/create-template-or-add-from-library-1.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/Template-Content-Type-2.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/go-to-editor-2.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/template-library-2.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/theme-templates-2.png)
Hit the “Add condition” button.
![add condition button](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/set-the-page-template-visibitity-conditions-2.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/mobile-2.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/travengo-headers-2.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/additional-condition-for-the-secondary-header-2.png)
We’ve moved to the front end. Two headers are visible on the desktop.
![two headers are visible on desktop responsive mode](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/two-headers-are-visible-on-desktop-responsive-mode-1.png)
On the mobile, the secondary header is hidden.
![secondary header hidden on mobile](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/03/secondary-header-is-hidden-on-mobile-1.png)
That’s all. Now you know how to create responsive page templates and add such a condition to the created template.