- Section
- Troubleshooting – Icons missing from the blocks
- Spectra Patterns
- How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?
- Styling Checkbox / Radio / Acceptance control in Contact Form 7 Designer block of Spectra
- Unable to Style Checkbox / Radio Buttons / Acceptance Control using Contact Form 7 Styler of Spectra
- Tab Index – for multiple Gravity Forms
- How to Get Started with Spectra
- How to Exclude A Heading from Table of Contents?
- Spectra – Display Conditions for Blocks
- Installing and Importing Starter Templates
- How to Get Started with Spectra
- Manually Install Spectra via FTP
- Automatic Beta Updates for Spectra
- How to Rollback to Previous Spectra Versions
- How to Load Google Fonts Locally
- Activate the Spectra Pro License Key
- How to Install Spectra Pro Plugin
- Translate Spectra Strings using Loco Translate
- How to add a Transparent / Sticky header?
- How to Change the Site Logo?
- How to Change Global Styles?
- How to Disable Title on Posts, Pages?
- How to add a transparent/ sticky header for a single page/post?
- Change Header and Footer Patterns in Spectra One Theme
- Add Custom/Google Fonts In Spectra One
- How To Reset Global Default Styling?
- Manually Install Spectra One via FTP?
- Disable or Enable Header/Footer for Specific Pages/Posts
- How can I Change the Contents of the Sidebar?
- Templates and Template Parts in FSE
- How to create Custom Front Page in WordPress
- Frequently Asked Questions
- How to Hide and Show Block Elements?
- How to use Group Blocks or create Containers in Spectra One
- How to clear customizations in Spectra One theme
- What are the Actual Sizes of the Predefined Font Sizes?
- How to make changes to single pages like 404, Archive, Single
- How to change the post/page hero section?
- How to Install Spectra One Theme?
- How to Global Change the Width Using Layouts
- How to Use Sidebar for Page and Post
- What is a Stylebook in FSE?
- How to Change the Global Color Palette?
- Customizing Block Styles in Spectra One Theme
- Understanding Patterns and How to Modify Them in Spectra One Theme
- Changing Sidebar Position for Pages and Posts
- Understanding Duotone and Adding Dynamic Color to SVG
- Exploring Full Site Editing: Creating Websites Made Easy!
- Exploring the “Edit Template” Feature in the Admin Bar
- How to Change the Favicon in Spectra One
- Sticky Header in WooCommerce Based Template
- Integrating Google Analytics into Spectra One Theme
- How to Create a Child Theme for Spectra One
- How to Use WPML for Translating Spectra One Websites
- Accessing the Additional CSS Section in an FSE Theme
- Creating and Managing Templates for Custom Post Types in Spectra One
How to Hide and Show Block Elements?
Introduction
People engage with your website in different ways on desktop, mobile, and tablet devices so you may sometimes want to show or hide content on your website to these specific users. If you want to hide certain blocks when a visitor is viewing on those devices you can easily do so with the built-in disable settings in the Spectra One theme. All you need to do is use the toggle options and choose which devices to hide. This article provides instructions and options on how to effectively show or hide block elements using the Spectra One theme.
Hide blocks in Spectra One theme
One of the notable challenges with Gutenberg, the block editor in WordPress, is its limited responsiveness options. However, the Spectra One theme addresses this issue by introducing a feature that allows you to hide elements or blocks specifically on desktop, tablet, or mobile devices. It’s important to note that this feature currently applies only to core blocks and not to third-party blocks.
Utilizing the toggle options
To hide blocks based on specific devices in the Spectra One theme, you can take advantage of the built-in disable settings. These settings offer convenient toggle options that enable you to choose which devices you want to hide content from. By selecting the appropriate toggle options, you can easily tailor the display of your website’s content to provide a more optimized experience for your visitors on different devices.
Customizing the user experience
The ability to show or hide block elements using the Spectra One theme provides you with greater control over the user experience on various devices. For instance, you may want to simplify the layout on mobile devices by hiding certain blocks that may not be as crucial for smaller screens. On the other hand, you may want to showcase additional content or features on desktops to take advantage of the larger screen space. With these customization options, you can ensure that your website is engaging and accessible to users across different devices.
Conclusion
Incorporating responsive design principles is crucial for ensuring a seamless user experience across different devices. With the Spectra One theme’s built-in disable settings, you have the flexibility to hide blocks selectively on desktop, tablet, and mobile devices. By utilizing the toggle options and following the instructions provided, you can easily customize the display of your website’s content, providing a more optimized experience for your visitors. Take advantage of this powerful feature to tailor your website’s layout and enhance engagement across various devices.
We don't respond to the article feedback, we use it to improve our support content.