Widget Settings - Responsive Properties

All widgets within DecoNetwork's Website Editor feature a dedicated Responsive Properties tab in their settings. These responsive properties let you control the visibility of widget on different screen sizes. This capability is invaluable for optimizing user experience by adapting the layout and content that may impact performance on certain devices, such as tablets or mobile phones where slower loading times could detract from usability.

Watch the video below for a quick overview of the responsive properties for widgets, and read below for more detailed instructions and information on configuring these settings.

In this article

• Prerequisites
• Why Responsive Properties exist
• What Responsive Properties control
• Widget visibility rules
• How to access the responsive properties of a widget
• Responsive settings overview
• Behavior by visibility configuration
• Troubleshooting
• Tips and best practices
• FAQs

Prerequisites

Why Responsive Properties exist

Responsive Properties are designed to help you optimize page layouts for different devices without sacrificing editor accessibility or content control.

• Improve performance and usability on smaller devices by selectively hiding widgets
• Allow layouts to adapt to different screen sizes without duplicating content

What Responsive Properties control

The Responsive Properties tab allows you to:

• Show or hide widgets per screen size
• Fine-tune layouts for desktop, tablet, and mobile

The available screen sizes are:

• Wide Monitor
• Monitor
• Tablet
• Mobile

Widget visibility rules

Widgets must be visible on at least one screen size

A widget cannot be hidden across all screen sizes. At least one screen size must remain visible so the widget stays accessible in the editor.

Visibility is controlled per screen size

Visibility settings apply independently to desktop, tablet, and mobile views. There is no single global visibility toggle for widgets.

How to access the responsive properties of a widget

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. 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).

6. Click on the Responsive Properties tab.

   The Responsive Properties are displayed.

   

Responsive settings overview

Setting	Description	Result
Visible on Wide Monitor	Controls widget visibility on wide monitor desktop screens	Widget appears only on wide monitor desktop when enabled
Visible on Monitor	Controls widget visibility on standard monitor desktop screens	Widget appears only on standard monitor desktop when enabled
Visible on Tablet	Controls widget visibility on tablet screens	Widget appears on tablet when enabled
Visible on Mobile	Controls widget visibility on mobile screens	Widget appears on mobile when enabled

Behavior by visibility configuration

Visible on all screen sizes

The widget appears on desktop, tablet, and mobile, and remains fully accessible in the editor.

Hidden on one screen size

The widget does not display on that device type, but remains visible and editable on the other screen sizes.

Hidden on two screen sizes

The widget displays only on the remaining two screen sizes and stays accessible in the editor.

Hidden on three screen sizes

The widget displays only on the remaining screen size and stays accessible in the editor.

Hidden on all screen sizes

This configuration is not allowed. The editor will prevent all visibility options from being disabled at the same time.

Troubleshooting

I can’t hide a widget on all screen sizes

The widget must still visible on at least one screen size to stay accessible in the editor. If you try hide the widget on all screen sizes, the editor will block the change.

A widget is not visible on my website

Switch between desktop, tablet, and mobile previews in the editor to verify which screen sizes the widget is enabled for.

I can’t find a widget in the editor

Ensure the widget is visible on the currently selected screen size. Enabling desktop visibility can make it easier to locate and manage the widget.

Why can’t I completely hide a widget with only script content?

Widgets must remain visible on one screen size to prevent them from becoming inaccessible in the editor, regardless of their content type.

Tips and best practices

• Hide performance-heavy widgets on mobile while keeping them visible on desktop
• Use editor screen previews to validate layout behavior before publishing

FAQs

Can I hide a widget everywhere?

No. Widgets must remain visible on at least one screen size so they stay editable.

Does hiding a widget remove it from the page?

No. The widget remains part of the page but is not rendered on the selected screen sizes.

Additional resources

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