{"id":80246,"date":"2017-04-10T10:50:47","date_gmt":"2017-04-10T14:50:47","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=80246"},"modified":"2017-08-08T06:03:39","modified_gmt":"2017-08-08T10:03:39","slug":"wordpress-blogging-themes-hideshow-elements-certain-devices-using-power-builder","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-blogging-themes-hideshow-elements-certain-devices-using-power-builder.html","title":{"rendered":"WordPress Blogging themes. How to hide\/show elements for certain devices using Power Builder"},"content":{"rendered":"<p>Hello! This video tutorial shows how to <strong>show\/hide different elements for certain devices using Power Builder<\/strong>.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/0zw2ALR1Mek\"><\/iframe>\r\n<\/div>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<p>There is a great feature in Power Builder plugin which allows to <strong>show\/hide different elements of your site for specific devices<\/strong>, e.g. phones, tablets etc.<\/p>\r\n<p>Let&#8217;s learn how to do that.<\/p>\r\n<p>The tutorial assumes you are already logged into your WordPress dashboard.<\/p>\r\n<ol>\r\n<li>\r\n<p>Navigate to <strong>Pages<\/strong> tab in your dashboard and click on the title of the page you would like to edit:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_1.png\" alt=\"\" width=\"1248\" height=\"686\" class=\"alignnone size-full wp-image-80247\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_1.png 1248w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_1-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_1-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_1-768x422.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_1-1024x563.png 1024w\" sizes=\"(max-width: 1248px) 100vw, 1248px\" \/><\/a>\r\n<p>Let&#8217;s say, you would like to <strong>hide the slider<\/strong> for specific devices.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Click the <strong>&#8220;gear&#8221;<\/strong> icon in the Slider module to open module settings:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_2.png\" alt=\"\" width=\"1247\" height=\"686\" class=\"alignnone size-full wp-image-80248\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_2.png 1247w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_2-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_2-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_2-768x422.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_2-1024x563.png 1024w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>At the appeared pop-up scroll down to find the <strong>&#8220;Disable on:&#8221;<\/strong> setting.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Mark the desired option to disable the slider on certain device as described in the screenshot below:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_3.png\" alt=\"\" width=\"1260\" height=\"686\" class=\"alignnone size-full wp-image-80249\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_3.png 1260w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_3-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_3-300x163.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_3-768x418.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_3-1024x558.png 1024w\" sizes=\"(max-width: 1260px) 100vw, 1260px\" \/><\/a>\r\n<p>Then click <strong>&#8220;Save &amp; Exit&#8221;<\/strong> button.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Do not forget to click <strong>&#8220;Update&#8221;<\/strong> button to apply your changes:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_4.png\" alt=\"\" width=\"1247\" height=\"686\" class=\"alignnone size-full wp-image-80250\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_4.png 1247w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_4-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_4-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_4-768x422.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_4-1024x563.png 1024w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>Navigate to your site frontend on any mobile device or use the emulator to see the changes.<\/p>\r\n<p>As you can see, the slider is no longer displayed on mobile devices:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_5.png\" alt=\"\" width=\"270\" height=\"540\" class=\"alignnone size-full wp-image-80251\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_5.png 270w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_5-75x150.png 75w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_5-150x300.png 150w\" sizes=\"(max-width: 270px) 100vw, 270px\" \/><\/a>\r\n<\/li>\r\n<\/ol>\r\n<p>Now let&#8217;s disable the slider both on mobile phones and desktops and leave it enabled for tablets only.<\/p>\r\n<p>Navigate back to your Home page and open the Slider module for editing. Then mark the required options there:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_6.png\" alt=\"\" width=\"1260\" height=\"686\" class=\"alignnone size-full wp-image-80252\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_6.png 1260w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_6-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_6-300x163.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_6-768x418.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_6-1024x558.png 1024w\" sizes=\"(max-width: 1260px) 100vw, 1260px\" \/><\/a>\r\n<p>Update the page and refresh it on desktop to see the changes. The slider is no more displayed there:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_7.png\" alt=\"\" width=\"1247\" height=\"655\" class=\"alignnone size-full wp-image-80253\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_7.png 1247w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_7-150x79.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_7-300x158.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_7-768x403.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_7-1024x538.png 1024w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/a>\r\n<p>Now let&#8217;s check the site on a tablet to see if the slider is there.<\/p>\r\n<p>The slider is still present on tablets:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_8.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_8.png\" alt=\"\" width=\"768\" height=\"576\" class=\"alignnone size-full wp-image-80254\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_8.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_8-150x113.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/wordpress_blogging_show_hide_elements_certain_devices_using_powerbuilder_8-300x225.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a>\r\n<p>This is the end of the tutorial. Now you know how to <strong>show\/hide different elements for certain devices using Power Builder<\/strong>.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=0zw2ALR1Mek?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress Blogging themes. How to hide\/show elements for certain devices using Power Builder<\/a>\r\n<p>Browse the <a href=\"https:\/\/www.templatemonster.com\/blog-wordpress-themes\/\" title=\"WordPress Blogging Templates\" target=\"_blank\">WordPress Blogging Templates<\/a> and learn more about WordPress functionality.<\/p>","protected":false},"excerpt":{"rendered":"<p>Hello! This video tutorial shows how to <strong>show\/hide different elements for certain devices using Power Builder<\/strong>.<\/p>\n","protected":false},"author":68,"featured_media":80257,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[2424,1586,2302],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80246"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=80246"}],"version-history":[{"count":5,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80246\/revisions"}],"predecessor-version":[{"id":82611,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80246\/revisions\/82611"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/80257"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=80246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=80246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=80246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}