{"id":120363,"date":"2023-06-23T11:08:29","date_gmt":"2023-06-23T05:38:29","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=120363"},"modified":"2023-06-26T16:26:19","modified_gmt":"2023-06-26T10:56:19","slug":"set-elementor-display-condition-based-on-single-page-template","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/set-elementor-display-condition-based-on-single-page-template\/","title":{"rendered":"How to Set Elementor Display Condition Based on Single Page Template?"},"content":{"rendered":"\n<p>Creating a successful website is all about creating an optimal user experience. It\u2019s important to create a dynamic website with a seamless user experience, and using Elementor to design and customise web pages is a great way to do that. Setting display conditions can help you to easily control and customise the way content is presented on your page.<\/p>\n\n\n\n<p>With the Display Condition extension of The Plus Addons for Elementor you can set different visibility rules for different single page templates like posts, pages, terms etc. of your website.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: These display conditions should be applied to the content in common templates like Header, Footer, Sidebar or Specific template.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Display Condition extension, <a href=\"\/docs\/display-conditions-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This extension is a part of The Plus Addons for Elementor, make sure it&#8217;s installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/plus-extras\/display-rules?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To add display conditions for single page templates, add any Elementor widget on the page.&nbsp;<\/p>\n\n\n\n<p>1. Go to <strong>Advanced<\/strong> &gt; <strong>Plus Extras : Display Condition<\/strong>.&nbsp;<\/p>\n\n\n\n<p>2. Turn on the <strong>Display Condition<\/strong> toggle.<\/p>\n\n\n\n<p>Now you\u2019ll see an option called <strong>Keep HTML<\/strong>. Enabling this will hide the content in the frontend if the condition is false but it will remain in the HTML (DOM).<\/p>\n\n\n\n<p>3. After selecting the appropriate option from the <strong>Display When<\/strong> dropdown, go to the <strong>Rules<\/strong> section. Here you have to set the actual display condition. You can have one or multiple conditions\/rules.<\/p>\n\n\n\n<p>4. Then click on the <strong>Rule<\/strong> tab. Here you\u2019ll find different options under the <strong>Single <\/strong>label.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Elementor Display Condition Based on Pages?<\/h2>\n\n\n\n<p>With this option, you can set display conditions for a content on specific pages of your website.<\/p>\n\n\n\n<p>To set display conditions for specific pages &#8211;&nbsp;<\/p>\n\n\n\n<p>1. Select <strong>Page<\/strong> from the first dropdown under the <strong>Rule<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"266\" height=\"1038\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/display-condition-page.gif\" alt=\"display condition page\" class=\"wp-image-120364\"\/><\/figure>\n\n\n\n<p>2. Then in the second dropdown, you have two options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Is<\/strong> &#8211; This will make the statement true.<\/p>\n\n\n\n<p><strong>Not<\/strong> &#8211; This will make the statement false.<\/p>\n\n\n\n<p>3. In the last<strong> <\/strong>field, add the page names.<\/p>\n\n\n\n<p>For example, we want to show the contact number only in the contact us page header. To do this, go to the header template and select the widget with the contact number.&nbsp;<\/p>\n\n\n\n<p>After selecting <strong>Page<\/strong> from the first dropdown, choose <strong>Is<\/strong> from the second dropdown.<\/p>\n\n\n\n<p>Then in the last field, add the Contact Us page.<\/p>\n\n\n\n<p>This will show the contact number only on the Contact Us page.<\/p>\n\n\n\n<p>If the option is set to <strong>Not<\/strong> in the second dropdown, it will reverse the condition.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You can add multiple pages together.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Elementor Display Condition Based on Posts?<\/h2>\n\n\n\n<p>This option allows you to show or hide content based on different blog posts on your site. This can be useful if you want to show additional content on a particular post in some common places of your website.<\/p>\n\n\n\n<p>To set display conditions for specific posts &#8211;&nbsp;<\/p>\n\n\n\n<p>1. Select <strong>Post<\/strong> from the first dropdown under the <strong>Rule<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"269\" height=\"1037\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/display-condition-post.gif\" alt=\"display condition post\" class=\"wp-image-120365\"\/><\/figure>\n\n\n\n<p>2. Then in the second dropdown, you have two options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Is<\/strong> &#8211; This will make the statement true.<\/p>\n\n\n\n<p><strong>Not<\/strong> &#8211; This will make the statement false.<\/p>\n\n\n\n<p>3. In the last<strong> <\/strong>field, add the post names.<\/p>\n\n\n\n<p>For example, we want to offer a lead magnet in the sidebar on a specific post. To do this, go to the sidebar template and select the widget with the lead magnet offer.&nbsp;<\/p>\n\n\n\n<p>After selecting <strong>Post<\/strong> from the first dropdown, choose <strong>Is<\/strong> from the second dropdown.<\/p>\n\n\n\n<p>Then in the last field, add the specific post name.<\/p>\n\n\n\n<p>This will show the lead magnet in the sidebar of that post only.<\/p>\n\n\n\n<p>If the option is set to <strong>Not<\/strong> in the second dropdown it will reverse the condition.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You can add multiple posts together.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Elementor Display Condition Based on Static Pages?<\/h2>\n\n\n\n<p>With the Display Condition extension of The Plus Addons for Elementor you can set display conditions for content based on different static pages of your website line Homepage, Blog, 404 Page etc.<\/p>\n\n\n\n<p>To set display conditions for static pages &#8211;&nbsp;<\/p>\n\n\n\n<p>1. Select <strong>Static Page<\/strong> from the first dropdown under the <strong>Rule<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1857\" height=\"946\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/display-condition-static-page.gif\" alt=\"display condition static page\" class=\"wp-image-120366\"\/><\/figure>\n\n\n\n<p>2. Then in the second dropdown, you have two options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Is<\/strong> &#8211; This will make the statement true.<\/p>\n\n\n\n<p><strong>Not<\/strong> &#8211; This will make the statement false.<\/p>\n\n\n\n<p>3. In the last<strong> <\/strong>dropdown, select your static page.<\/p>\n\n\n\n<p>For example, we want to show a different version of the logo on the homepage only. To do this, go to the header template. You should have both versions of the logo there.&nbsp;<\/p>\n\n\n\n<p>First select the widget with the normal logo.&nbsp;<\/p>\n\n\n\n<p>After selecting <strong>Static Page<\/strong> from the first dropdown, choose <strong>Not<\/strong> from the second dropdown.<\/p>\n\n\n\n<p>Then in the last dropdown, select <strong>Static Homepage<\/strong>.<\/p>\n\n\n\n<p>This will hide the normal logo on the homepage.<\/p>\n\n\n\n<p>Then select the other version of the logo and follow the same process, just make sure to choose <strong>Is<\/strong> from the second dropdown.<\/p>\n\n\n\n<p>This will show the different version of the logo on the homepage only.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Default Homepage is the default homepage set by WordPress itself.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Elementor Display Condition Based on Post Type?<\/h2>\n\n\n\n<p>With this option, you can set display conditions for content based on different post types like pages, posts, custom post types etc. This can be used if you want to show additional content on a specific post type.<\/p>\n\n\n\n<p>To set display conditions for specific post types &#8211;&nbsp;<\/p>\n\n\n\n<p>1. Select <strong>Post Type<\/strong> from the first dropdown under the <strong>Rule<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"267\" height=\"1047\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/display-condition-post-type.gif\" alt=\"display condition post type\" class=\"wp-image-120367\"\/><\/figure>\n\n\n\n<p>2. Then in the second dropdown, you have two options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Is<\/strong> &#8211; This will make the statement true.<\/p>\n\n\n\n<p><strong>Not<\/strong> &#8211; This will make the statement false.<\/p>\n\n\n\n<p>3. In the last<strong> <\/strong>field, add the post type names.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: If left blank, it will be applied to all post types.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>For example, we want to show a specific banner on the sidebar of a custom post type called Book.&nbsp;<\/p>\n\n\n\n<p>To do this, go to the sidebar template and select the image.&nbsp;<\/p>\n\n\n\n<p>After selecting <strong>Post Type<\/strong> from the first dropdown, choose <strong>Is<\/strong> from the second dropdown.<\/p>\n\n\n\n<p>Then in the last field, add the post as Book.<\/p>\n\n\n\n<p>This will show the image in the sidebar of the posts of CPT Book only.<\/p>\n\n\n\n<p>If the option is set to <strong>Not<\/strong> in the second dropdown, it will reverse the condition.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You can add multiple posts types together.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Elementor Display Condition Based on Terms?<\/h2>\n\n\n\n<p>With this option, you can set display conditions for content based on terms like different categories, tags, custom taxonomies etc. This can be useful for displaying additional content based on different terms.<\/p>\n\n\n\n<p>To set display conditions for different terms &#8211;&nbsp;<\/p>\n\n\n\n<p>1. Select <strong>Term<\/strong> from the first dropdown under the <strong>Rule<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"269\" height=\"1002\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/display-condition-term.gif\" alt=\"display condition term\" class=\"wp-image-120369\"\/><\/figure>\n\n\n\n<p>2. Then in the second dropdown, you have two options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Is<\/strong> &#8211; This will make the statement true.<\/p>\n\n\n\n<p><strong>Not<\/strong> &#8211; This will make the statement false.<\/p>\n\n\n\n<p>3. In the last<strong> <\/strong>field, add the term names.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: If left blank, it will be applied to all terms.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>For example, in the sidebar, we want to show an author bio for specific authors of the Author taxonomy.&nbsp;<\/p>\n\n\n\n<p>To do this, go to the sidebar template and select the widget.&nbsp;<\/p>\n\n\n\n<p>After selecting <strong>Term<\/strong> from the first dropdown, choose <strong>Is<\/strong> from the second dropdown.<\/p>\n\n\n\n<p>Then in the last field, add the author name.<\/p>\n\n\n\n<p>If the option is set to <strong>Not<\/strong> in the second dropdown, it will reverse the condition.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You can add multiple terms together.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Also, read <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/set-elementor-display-condition-based-on-archive-page\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Set Elementor Display Condition Based on Archive Page Content<\/a>.<\/p>\n","protected":false},"author":25,"featured_media":120456,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[565,525],"class_list":["post-120363","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-display-conditions","docs-plus-extras"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/120363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=120363"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/120363\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/120456"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=120363"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=120363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}