{"id":2130,"date":"2024-01-17T16:38:13","date_gmt":"2024-01-17T16:38:13","guid":{"rendered":"https:\/\/wpeagle.com\/?p=2130"},"modified":"2024-01-17T23:14:23","modified_gmt":"2024-01-17T23:14:23","slug":"how-to-hide-blocks-and-patterns-on-mobile","status":"publish","type":"post","link":"https:\/\/wpeagle.com\/wordpress\/how-to-hide-blocks-and-patterns-on-mobile\/","title":{"rendered":"Hide Blocks and Patterns on Mobile with WordPress"},"content":{"rendered":"<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Hide Patterns and Blocks on Mobile with WordPress\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/1wMWOXYxR-I?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>At this moment in time WordPress doesn&#8217;t have an easy way to hide blocks and patterns on mobile.<\/p>\n\n\n\n<p>You can do it with <a href=\"https:\/\/wpeagle.com\/wordpress\/should-you-use-a-wordpress-page-builder\/\" data-type=\"post\" data-id=\"1809\" data-lasso-id=\"9807\">Page Builders<\/a> and custom CSS; just not with the default block editor.<\/p>\n\n\n\n<p>It&#8217;s a handy thing to do as some elements just look better on certain screen sizes. So you might want to hide some and show others to get your design looking perfect no matter what size of device your visitors are using.<\/p>\n\n\n\n<p>Here&#8217;s how to do it with the <a href=\"https:\/\/wordpress.org\/plugins\/content-control\/\" target=\"_blank\" rel=\"noopener\" data-lasso-id=\"9808\">Content Control plugin<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Guide to hiding blocks on mobile with the WordPress editor<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1 &#8211; Install the plugin<\/h3>\n\n\n\n<ul class=\"is-style-popcorn-icon-plus wp-block-list\">\n<li>Login to your website<\/li>\n\n\n\n<li>Go to <strong><em>Plugins \u27a1 Add New Plugin<\/em><\/strong><\/li>\n\n\n\n<li>Search for <strong><em>Content Control<\/em><\/strong><\/li>\n\n\n\n<li>It should be the first one that comes up. Click install, then Activate.<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;674ebe95a0aac&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image size-full is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1000\" height=\"538\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Add-the-content-control-plugin.jpg\" alt=\"\" class=\"wp-image-2133\" style=\"width:800px;height:auto\" title=\"\" srcset=\"https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Add-the-content-control-plugin.jpg 1000w, https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Add-the-content-control-plugin-300x161.jpg 300w, https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Add-the-content-control-plugin-768x413.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge image\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2 &#8211; Set the options on the block you want to hide<\/h3>\n\n\n\n<ul class=\"is-style-popcorn-icon-plus wp-block-list\">\n<li>Go into Edit the Page, Post, Template or whatever it is that has the block you want to hide<\/li>\n\n\n\n<li>Select the block. You can use list view to make sure you get the right one<\/li>\n\n\n\n<li>On the right you&#8217;ll find &#8216;<strong><em>block controls<\/em><\/strong>&#8216;. Toggle it on.<\/li>\n\n\n\n<li>Select which devices you&#8217;d like it to be hidden on<\/li>\n\n\n\n<li>Save your changes<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"526\" src=\"https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Set-which-content-to-hide.jpg\" alt=\"\" class=\"wp-image-2134\" title=\"\" srcset=\"https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Set-which-content-to-hide.jpg 1000w, https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Set-which-content-to-hide-300x158.jpg 300w, https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Set-which-content-to-hide-768x404.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>And that&#8217;s it! <\/p>\n\n\n\n<p>Easy!<\/p>\n\n\n\n<p>Let me know how you get on in the comments<\/p>","protected":false},"excerpt":{"rendered":"<p>WordPress doesn&#8217;t currently have an easy way to hide blocks and patterns depending on screen size. Here&#8217;s how you can do it with a free plugin.<\/p>\n","protected":false},"author":2,"featured_media":2132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"_uag_custom_page_level_css":"","footnotes":""},"categories":[4],"tags":[12],"class_list":["post-2130","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-tutorial"],"spectra_custom_meta":{"_edit_lock":["1705533267:2"],"rank_math_internal_links_processed":["1"],"rank_math_primary_category":["4"],"rank_math_seo_score":["23"],"_thumbnail_id":["2132"],"_edit_last":["2"],"_prlipro-post-options":["a:5:{s:14:\"requested_slug\";s:0:\"\";s:19:\"hide_social_buttons\";b:0;s:20:\"disable_replacements\";N;s:28:\"disable_keyword_replacements\";b:0;s:24:\"disable_url_replacements\";b:0;}"],"_oembed_4f9c71796c78e85c8002f60006de038e":["<iframe title=\"How to Hide Patterns and Blocks on Mobile with WordPress\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/1wMWOXYxR-I?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>"],"_oembed_time_4f9c71796c78e85c8002f60006de038e":["1705511430"],"_oembed_635777ece398eede568c99090dcc23cd":["<iframe title=\"How to Hide Patterns and Blocks on Mobile with WordPress\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/1wMWOXYxR-I?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>"],"_oembed_time_635777ece398eede568c99090dcc23cd":["1712205681"],"_uag_page_assets":["a:9:{s:3:\"css\";s:263:\".uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media (max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media (max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}\n\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:41:{i:0;s:10:\"core\/group\";i:3;s:14:\"core\/site-logo\";i:5;s:15:\"core\/navigation\";i:9;s:12:\"core\/columns\";i:10;s:11:\"core\/column\";i:12;s:15:\"core\/post-title\";i:13;s:17:\"core\/post-excerpt\";i:16;s:10:\"core\/image\";i:18;s:14:\"core\/paragraph\";i:21;s:15:\"core\/post-terms\";i:22;s:14:\"core\/post-date\";i:23;s:24:\"outermost\/social-sharing\";i:24;s:29:\"outermost\/social-sharing-link\";i:26;s:17:\"core\/post-content\";i:28;s:13:\"core\/comments\";i:30;s:19:\"core\/comments-title\";i:32;s:21:\"core\/comment-template\";i:35;s:11:\"core\/avatar\";i:37;s:24:\"core\/comment-author-name\";i:39;s:17:\"core\/comment-date\";i:40;s:22:\"core\/comment-edit-link\";i:41;s:20:\"core\/comment-content\";i:42;s:23:\"core\/comment-reply-link\";i:43;s:23:\"core\/post-comments-form\";i:45;s:24:\"core\/comments-pagination\";i:46;s:33:\"core\/comments-pagination-previous\";i:47;s:32:\"core\/comments-pagination-numbers\";i:48;s:29:\"core\/comments-pagination-next\";i:50;s:12:\"core\/heading\";i:53;s:10:\"core\/query\";i:54;s:18:\"core\/post-template\";i:55;s:24:\"core\/post-featured-image\";i:57;s:18:\"core\/template-part\";i:60;s:9:\"core\/list\";i:61;s:14:\"core\/list-item\";i:62;s:10:\"core\/embed\";i:63;s:11:\"core\/search\";i:64;s:17:\"core\/latest-posts\";i:65;s:20:\"core\/latest-comments\";i:66;s:13:\"core\/archives\";i:67;s:15:\"core\/categories\";}s:8:\"uag_flag\";b:0;s:11:\"uag_version\";s:10:\"1731230888\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"_oembed_faaedd170a6f396ed01621e05ca0b36d":["{{unknown}}"],"_uag_css_file_name":["uag-css-2130.css"]},"uagb_featured_image_src":{"full":["https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Hide-elements-on-Mobile.jpg",1280,720,false],"thumbnail":["https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Hide-elements-on-Mobile-150x150.jpg",150,150,true],"medium":["https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Hide-elements-on-Mobile-300x169.jpg",300,169,true],"medium_large":["https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Hide-elements-on-Mobile-768x432.jpg",768,432,true],"large":["https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Hide-elements-on-Mobile-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Hide-elements-on-Mobile.jpg",1280,720,false],"2048x2048":["https:\/\/wpeagle.com\/wp-content\/uploads\/2024\/01\/Hide-elements-on-Mobile.jpg",1280,720,false]},"uagb_author_info":{"display_name":"Alex","author_link":"https:\/\/wpeagle.com\/author\/alex\/"},"uagb_comment_info":1,"uagb_excerpt":"WordPress doesn't currently have an easy way to hide blocks and patterns depending on screen size. Here's how you can do it with a free plugin.","_links":{"self":[{"href":"https:\/\/wpeagle.com\/wp-json\/wp\/v2\/posts\/2130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpeagle.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpeagle.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpeagle.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wpeagle.com\/wp-json\/wp\/v2\/comments?post=2130"}],"version-history":[{"count":5,"href":"https:\/\/wpeagle.com\/wp-json\/wp\/v2\/posts\/2130\/revisions"}],"predecessor-version":[{"id":2141,"href":"https:\/\/wpeagle.com\/wp-json\/wp\/v2\/posts\/2130\/revisions\/2141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpeagle.com\/wp-json\/wp\/v2\/media\/2132"}],"wp:attachment":[{"href":"https:\/\/wpeagle.com\/wp-json\/wp\/v2\/media?parent=2130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpeagle.com\/wp-json\/wp\/v2\/categories?post=2130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpeagle.com\/wp-json\/wp\/v2\/tags?post=2130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}