{"id":27329,"date":"2022-03-22T13:41:37","date_gmt":"2022-03-22T13:41:37","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=27329"},"modified":"2023-07-19T09:48:00","modified_gmt":"2023-07-19T09:48:00","slug":"jetthemecore-how-to-create-responsive-wordpress-page-templates","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/","title":{"rendered":"How to Create Responsive WordPress Page Templates"},"content":{"rendered":"\n

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

Full JetThemeCore<\/strong> Dashboard settings overview is provided in this tutorial<\/strong><\/a>.<\/p>\n\n\n\n

Information about all Conditions <\/strong>you can find here<\/strong><\/a>.<\/p>\n\n\n\n

For the template creation, you need to upload the Elementor<\/strong> free version, or you can use the Block Editor<\/strong>.<\/p>\n\n\n\n

To make the templates responsive on the dedicated devices, you can set the \u0421onditions <\/strong>in two ways.<\/p>\n\n\n\n

How to Create a New Page Template with the Responsive Condition<\/h2>\n\n\n\n
\n

To create a new page template, navigate to Crocoblock > Theme Builder <\/em><\/strong>and hit the \u201cCreate new page template\u201d <\/strong>button.<\/p>\n\n\n\n\"crocoblock\n\n\n\n

Click on the \u201cAdd Condition\u201d <\/strong>button.<\/p>\n\n\n\n\"add\n\n\n\n

Choose the \u201cInclude\u201d (or \u201cExclude\u201d if you want to hide the template on some devices), \u201cAdvanced,\u201d and \u201cDevice\u201d options and select the needed device or devices in the last field (\u201cDesktop,\u201d \u201cTablet,\u201d and \u201cMobile\u201d options are in the disposal).<\/p>\n\n\n\n\"advanced\n\n\n\n

Then, push the \u201cCreate\u201d<\/strong> button.<\/p>\n\n\n\n

In the newly created Page Template <\/strong>window, click on one of the buttons (\u201c+ Add header,\u201d \u201c+ Add body,\u201d<\/strong> or \u201c+ Add footer\u201d<\/strong>) to add a template to the page with the \u201cDevice\u201d condition.<\/p>\n\n\n\n\"page\n\n\n\n

Hit the \u201cCreate template\u201d <\/strong>button, or you can add the previously created template from the library to the page.<\/p>\n\n\n\n\"create\n\n\n\n

You can create a new template in the Elementor <\/strong>editor or WordPress Block Editor <\/strong>(Gutenberg). For that, select the needed Template content type. <\/strong>Then, enter the Template name <\/strong>and press the \u201cCreate\u201d <\/strong>button.<\/p>\n\n\n\n\"template\n\n\n\n

After the template creation, click on the \u201cGo to editor\u201d <\/strong>button to proceed to the Elementor <\/strong>or Gutenberg <\/strong>editor. If you press the \u201cEdit later<\/strong>\u201d button, you will return to the Theme Builder<\/strong>.<\/p>\n\n\n\n\"go\n\n\n\n

You can add the template from the library by clicking on the \u201cAdd from library\u201d <\/strong>button. All newly created templates or those ready for editing will be kept here even if you remove them from the Page Template.<\/p>\n\n\n\n\"template\n<\/div><\/div>\n\n\n\n

How to Add the Responsive Condition to the Dedicated Template <\/h2>\n\n\n\n
\n

To add the device condition to the existing template, proceed to Crocoblock > Theme Templates <\/em><\/strong>and hit the \u201cEdit Condition\u201d<\/strong> button in the needed template.<\/p>\n\n\n\n\"edit\n\n\n\n

Hit the \u201cAdd condition\u201d <\/strong>button.<\/p>\n\n\n\n\"add\n\n\n\n

Choose the \u201cInclude\u201d (or \u201cExclude\u201d if you want to hide the template on some devices), \u201cAdvanced,\u201d \u201cDevice\u201d options and select the needed device or devices in the last field (\u201cDesktop,\u201d \u201cTablet,\u201d and \u201cMobile\u201d options are in the disposal).<\/p>\n\n\n\n\"header\n\n\n\n

Finally, hit the \u201cSave Conditions\u201d <\/strong>button.<\/p>\n<\/div><\/div>\n\n\n\n

Responsive Condition Use Case<\/h2>\n\n\n\n
\n

For instance, we have the Header<\/strong> for the home page and the Secondary Header<\/strong> for the entire site.<\/p>\n\n\n\n\"travengo\n\n\n\n

The first header contains the menu, and the second contains breadcrumbs.<\/p>\n\n\n\n

With the \u201cDevice\u201d condition, we can hide the secondary header with the breadcrumbs on the mobile. We\u2019ve clicked on the \u201cEdit Conditions\u201d <\/strong>button near the needed header and added the <\/strong>additional \u201cExclude,\u201d \u201cAdvanced,\u201d \u201cDevice,\u201d and \u201cMobile\u201d Conditions<\/strong>. Then we hit the \u201cSave\u201d <\/strong>button.<\/p>\n\n\n\n\"additional\n\n\n\n

We\u2019ve moved to the front end. Two headers are visible on the desktop.<\/p>\n\n\n\n\"two\n\n\n\n

On the mobile, the secondary header is hidden.<\/p>\n\n\n\n\n<\/div><\/div>\n\n\n\n

That\u2019s all. Now you know how to create responsive page templates and add such a condition to the created template.<\/p>\n","protected":false},"excerpt":{"rendered":"

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.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[415],"yoast_head":"\nHow to Create Responsive WordPress Page Templates \u2014 JetThemeCore | Crocoblock<\/title>\n<meta name=\"description\" content=\"This tutorial describes how to create responsive page templates and how to add the responsive condition to the dedicated header, body, or footer template with the WordPress JetThemeCore plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Responsive WordPress Page Templates \u2014 JetThemeCore | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"This tutorial describes how to create responsive page templates and how to add the responsive condition to the dedicated header, body, or footer template with the WordPress JetThemeCore plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-19T09:48:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/03\/theme-builder-2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/\",\"name\":\"How to Create Responsive WordPress Page Templates \u2014 JetThemeCore | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2022-03-22T13:41:37+00:00\",\"dateModified\":\"2023-07-19T09:48:00+00:00\",\"description\":\"This tutorial describes how to create responsive page templates and how to add the responsive condition to the dedicated header, body, or footer template with the WordPress JetThemeCore plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Responsive WordPress Page Templates\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Responsive WordPress Page Templates \u2014 JetThemeCore | Crocoblock","description":"This tutorial describes how to create responsive page templates and how to add the responsive condition to the dedicated header, body, or footer template with the WordPress JetThemeCore plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Responsive WordPress Page Templates \u2014 JetThemeCore | Crocoblock","og_description":"This tutorial describes how to create responsive page templates and how to add the responsive condition to the dedicated header, body, or footer template with the WordPress JetThemeCore plugin.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/","og_site_name":"Help Center","article_modified_time":"2023-07-19T09:48:00+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/03\/theme-builder-2.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/","name":"How to Create Responsive WordPress Page Templates \u2014 JetThemeCore | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2022-03-22T13:41:37+00:00","dateModified":"2023-07-19T09:48:00+00:00","description":"This tutorial describes how to create responsive page templates and how to add the responsive condition to the dedicated header, body, or footer template with the WordPress JetThemeCore plugin.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/jetthemecore-how-to-create-responsive-wordpress-page-templates\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create Responsive WordPress Page Templates"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/27329"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=27329"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=27329"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=27329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}