You can adjust the settings of your widget so it can look different on desktop, tablet, and mobile devices. It can be achieved with a single widget. You do not need to create a separate widget for mobile devices.
If you have an upgraded widget, please go to your edit widget page. If you don’t know how to do that, please read the following article – How to change settings of my widget? If you have a free widget or you are just starting out, please create a new widget.
Example widget assumptions
Let’s say that you want to create a widget with the following settings:
- Desktop (default settings) – 2 rows and 6 columns grid with hover effect.
- Tablet – 2 rows and 3 columns grid without hover effect.
- Mobile – 1 column slideshow without hover effect.
Given settings are applied based on the widget width. If the widget width is between:
- 0-640 pixels – mobile settings with slideshow should be active
- 641-960 pixels – tablet settings should be active
- 960- ∞ pixels – desktop settings (which are default) should be active
Creating the widget – desktop configuration
When you create a new widget or edit the existing one, you will always start with the desktop preview and desktop settings. This is indicated by the highlighted device icon above your widget preview.
According to our assumptions, we need a grid with 1 row and 6 columns and the hover effect when the user will view our widget from a desktop device.
Open the Layout section on the left side to configure the basic widget layout. The desktop icon next to the Layout label indicates that you are configuring your widget for desktop devices.
Set the Post layout to Grid, use the slider or the input field to set the Number of columns to 6 and the Number of photos to 12 to get two rows of photos.
We also want to have a hover effect on desktop devices. Open the Posts section and in Post hover effect select one of the available hover effects, for instance, the Instagram icon.
Configuration for tablet devices
All the settings that you set for the desktop device are automatically copied to tablet and mobile settings unless they were already modified. The settings are copied only downwards (from desktop to tablet and mobile, or from tablet to mobile), never up. This means that changing the settings for a mobile device will not affect the configuration of the tablet or desktop.
Click the middle button with the Tablet icon in the device selector above your widget preview.
All the icons next to the section names will also change to tablet, which will indicate that you are changing tablet settings. Sections without device icons are globally adjusted and can’t be changed based on the device.
The assumptions for tablet devices are 2 rows and 3 columns but without the hover effect. Let’s start with the hover effect since most probably the Posts section is still open. Select None to disable the hover effect.
Open the Layout section and adjust the settings to show 2 rows and 3 columns. Set the Number of columns to 3 and make sure that the Number of photos is set to 6.
Try to switch between Desktop and Tablet devices using the device selection above your widget preview to see how to widget changes.
Configuration for mobile devices
It is time to configure the widget for mobile devices. Using the device selector above your widget preview click the last button with the Mobile icon.
The assumption for mobile devices was 1 column slideshow without any hover effect. We don’t need to change the hover effect, since all the settings from tablet devices were copied to mobile device settings.
Open the Layout section. Change the Post layout value from Grid to Slider and update the Number of columns to 1.
You can try to switch between the different devices to see if the widget is showing the proper settings.
Adjusting the settings for proper widths
Lastly, we need to adjust on which widget width the settings will be applied. We assumed that tablet settings should be loaded when the widget width is lower or equal to 960 pixels and mobile when widget width is lower than 640 pixels.
Open the Advanced section. Update the Widget width for tablet settings to 960 pixels and the Widget width for mobile settings to 640 pixels.
Testing the responsive preview
You may have noticed that every time you change the device with the device selector, the widget reloads. Likewise, if you reduce or increase the size of the browser window, the widget will only show the settings for the selected device, regardless of the real size of the widget.
This is due to the widget creator settings. You can change this behavior and let the widget behave like on your website without reloading on the device change.
Click the button with 3 dots next to the device selector. A context menu will appear. Make sure that the Responsive preview option is turned on.