Few years back most of the platforms use fixed layout design where you need to have a separate mobile website for smaller devices. This has been changed with popularity of responsive web designing as single layout can work on all size of devices. The latest trend in WordPress world is have a sidebar less layout. In fact, the default twenty-twenty-two WordPress theme does not even have a sidebar for that matter. This is in line with full site editing where you can build the templates or page layouts on your own. However, many users still want to have a sidebar on desktop but want to remove unnecessary clutters on mobile devices. If you are looking for hiding specific block or widget on mobiles, then here is how you can do that in WordPress.
Hiding Specific Blocks and Widgets
Let’s say, you have three widgets on your sidebar. These widgets may occupy lengthy space in smaller mobile devices and disturb the user experience. The best solution is to keep all the widgets in desktop and hide them in mobile view port. Similarly, you may have full width block like social sharing in the content area. This is redundant as mobile browsers have their own sharing options. What you can do here is to simply hide the social sharing block on mobile device and retain it on desktop.
The situation can also be other way that you want to hide an element on larger desktop devices and show in mobiles. We can give numerous examples and use cases for hiding specific blocks on specific devices.
Widget Controls and Visibility
There are many ways to control the visibility of widgets and blocks in WordPress. We will explain the following options and you can use the one that fits your need.
- Using Gutenberg add-on plugin
- Control widget visibility with another plugin
- CSS max-width property
1. Spectra – WordPress Gutenberg Blocks Plugin
Gutenberg block editor has lot of hidden features that many users are not aware of. In addition, there are plugins that add features to the block editor. Ultimate Add-ons for Gutenberg is one such a plugin from Brainstorm Force who is behind the most popular Astra theme. The plugin is recently renamed to “Spectra – WordPress Gutenberg Blocks”. So, search with these keywords and install the plugin on your site. this plugin will add additional meta box in post and widget editors for conditional displaying of blocks.
- After activating the plugin, edit any of your existing post in which you want to hide a block. In this example, we will hide a paragraph with a green background on mobile devices.
- Select the block and click on the three dots “Option” icon. If it shows “Show more settings”, click on that option. If the menu shows “Hide more settings”, then it already shows the settings on the sidebar.
- On the right sidebar, select “Block” and scroll to the bottom section that shows “Advanced”.
- Expand “Advanced” section to see there is a new “Display Conditions” meta box available there.
- Click its dropdown to view multiple options. The plugin offers to hide or show any block based multiple conditions like user state (logged or logged out), user role, browser and operating system.
- To hide the selected block in mobiles, select “Responsive Visibility” option.
- You will see additional options are shown and turn on “Hide on Mobile” option.
Now, publish your post and check it in a desktop device to see the colored paragraph block is available. However, the paragraph will automatically disappear when you see the page on mobiles.
Note: The plugin will add “Display Conditions” meta box to each block, even you deactivate all its modules under “Settings > UAG” section. If you deactivate the plugin, the blocks will be visible on all devices.
Similarly for hiding a block widget, navigate to “Appearance > Widgets” section. Select any widget and set “Hide on Mobile” from “Display Conditions” to hide that block.
2. Widget Options – Plugin
Though Spectra plugin is a cool option to hide any block or widget, it works only if you are using Gutenberg editor. So, this is not an option if you are still using old Classic Editor or using custom post types that do not support Gutenberg. In such a case, you have other plugin that works only for hiding sidebar and footer widgets.
- Install and activate “Widget Options – Add Context To WordPress Widgets” plugin.
- Go to “Settings > Widgets Options” menu and make sure “Classic Widgets Screen” is showing as enabled (showing “Disable button means, the option is enabled).
- This will disable Gutenberg widgets blocks and enable classic widgets interface. You do have few other settings on the page to control page visibility, add custom CSS classes, etc., which you can configure if required.
- Now, go to “Appearance > Widgets” section and expand the widget that you like to hide on mobiles. You will find the plugin added lot of options to the widget.
- Click on the “Devices” icon and then select “Hide on checked devices” option from the “Hide/Show” dropdown. Then select, “Mobile” check box and click “Save” button.
Check your site on a mobile device and you will not find this widget. Remember, at this moment the plugin only works with classic widgets interface and also you can’t hide elements in the content area.
3. Custom CSS
Finally, this is a manual option which does not need any plugin. You can use CSS max-width property to hide any block or widget on mobile devices.
- When you are in Gutenberg post editor, select the block and expand the “Advanced” settings from the right sidebar.
- Enter a custom CSS class name in “Additional CSS class(es)” text box. For example, we add a new class called hideonmobile in the text box.
- Publish you post and navigate to “Appearance > Customize > Additional CSS” section.
- Add the following CSS code and publish your changes.
@media (max-width: 767px){
.hideonmobile{
display: none;
}
}- It should look like below in the customizer screen.
Now, the block will be hidden on any device having width smaller than 767 pixels. Similarly, you can also hide the widgets by adding custom CSS in the widget block editor. You can take the advantage of using the same CSS class (hideonmobile in our example) for multiple blocks and widgets to hide all of them on mobile using same CSS.
Final Words
As you can see the there are multiple options available in WordPress to show or hide a block in mobile devices. If you are using Gutenberg, the best option to use the last manual method as it does not need any third-party plugins. Otherwise, the blocks will become visible when you deactivate the plugin. However, for getting additions features like hiding a block on a specific browser or OS, you can use Spectra plugin. If you still using classic widgets, then Widget Options is the plugin you should go for.
1 Comment
Leave your reply.