Set the visibility of a widget for different screen sizes

Widgets allow you to add and manage content such as text, images, custom HTML, and embedded scripts within your website pages. They provide flexibility when building layouts and integrating third-party tools, while allowing you to control how content appears across different screen sizes, such as desktop, tablet, and mobile.

Each widget includes visibility controls so you can tailor layouts for different devices without duplicating content. This feature is crucial for enhancing user experience and usability by allowing you to hide content on devices where it may slow down page loading, such as tablets or mobile phones, while still displaying it on larger or more capable screens.

In this article

• Prerequisites
• Why widget visibility rules exist
• How widget visibility works across screen sizes
• Managing widget visibility
• Required visibility behavior
• Best-practice tips
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why widget visibility rules exist

Widget visibility controls are designed to improve the experience for visitors using different devices.

• They allow you to selectively hide content that may negatively affect performance on smaller or less powerful devices.
• Reducing the amount of content loaded on tablets or mobile phones helps prevent slower load times that can hinder usability.
• This ensures pages remain responsive and easier to use, while still allowing full functionality on devices where performance is less constrained.

How widget visibility works across screen sizes

Each widget can be configured to show or hide on individual screen sizes, including, wide desktop, desktop, tablet, or mobile. This allows you to optimize layouts for different devices without duplicating content.

Visibility is controlled per screen size, rather than as a single global setting. However, each widget must remain visible on at least one size to ensure it remains accessible for editing.

Managing widget visibility

1. Go to Edit Website → Website Pages.
2. Select the page containing the widget.
3. Open the page in the editor.
4. Move your mouse over the widget to display the drop-down menu.
5. Click on the down arrow beside the widget icon.

6. Choose the Settings item from the menu.

   

   The widget Settings popup will be displayed.

   

   You can also double-click on the widget to open the widget Settings popup (excludes Text, Page Title, and Heading Widgets).

7. Click on the Responsive Properties tab.

   

8. Set the widget's visibility on each supported device size:

   • Wide Monitor
   • Monitor
   • Tablet
   • Mobile

   Select the Visible option to show the widget.

   Select the Hidden option to hide the widget.

   A widget cannot be set to hidden across all screen sizes.

   If you attempt to hide a widget on every screen size, the editor will require that the widget remain visible on at least one size. This ensures the widget can always be accessed and managed within the Website Pages editor.

   Improvement implemented in V8.610.

   This applies to all widget types, including HTML widgets that contain scripts or embedded integrations.

9. Click OK, once you have finished configuring the settings.
10. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

Best-practice tips

• Keep management access: If a widget is meant to be “invisible” to visitors (for example, an HTML widget with a script), leave it visible on at least one screen size so it remains easy to find and edit.
• Choose a consistent “management” screen size: Many users keep utility widgets visible on a single desktop size (for example, wide desktop) so they can reliably locate them in the editor.
• Minimize layout impact: Avoid adding unnecessary text, padding, or spacing inside script-only widgets. A widget can remain editable without affecting page layout if it contains minimal visible content.
• Document purpose: Use the widget title/label (where available) or add an internal note in the widget’s content to record what it does (for example, “Tawk.to chat script”). This makes future maintenance easier.
• Review before publishing: If you are changing visibility across multiple screen sizes, double-check that at least one screen size remains visible before you publish.

Troubleshooting

The widget is not appearing where I expect on some devices

• Re-check the widget’s Visibility settings for each screen size.
• Confirm you edited the correct page and the correct widget.

I’m trying to hide the widget everywhere, but the editor won’t allow it

• This is expected behavior. Widgets must remain visible on at least one screen size so they can be managed in the editor.
• If the widget is for background functionality only, keep it visible on one screen size and ensure it contains minimal visible content.

I can’t find my “utility” widget (for example, a script widget)

• Check a desktop screen size view in the editor, then review the widget list/order in that section of the page (such as the footer).
• Look for widgets with labels such as “HTML”, “Embed”, or any internal note you may have added.

FAQs

Why can’t I hide a widget on all screen sizes?

Hiding a widget on all screen sizes can make it impossible to select or edit within the Website Pages editor. Requiring visibility on at least one screen size prevents widgets from becoming inaccessible.

Does this affect widgets that contain only scripts?

Yes. All widgets, including HTML widgets that load scripts, must remain visible on at least one screen size so they can be managed in the editor.

Will visible widgets always appear to customers?

Not necessarily. Widgets with no visible content or layout elements may still be technically visible in the editor without displaying noticeable content on the live website.

Additional Resources

• Using Widgets in Website Pages
• Widget Settings - Advanced
• Widget Settings - Layout Properties
• Widget Settings - Responsive Properties
• Widget Settings - Background Properties