Widget settings for tablet/mobile

You can adjust settings of your widget to looks different on desktop, tablet and mobile devices. It can be achieved with single widget. You do not need to create separate widget for mobile.

If you have an upgraded widget, please go to your edit widget page. If you don’t know how to do that, please read following article – How to change settings of my widget? . If you have free widget or you are just starting, please go to our frontpage and use our widget generator.

 

Example widget assumptions

Let’s say that you want to create a widget with following settings:

  • Desktop (default settings) – 1 row and 6 columns grid with hover effect.
  • Tablet 2 rows and 3 columns grid without hover effect.
  • Mobile – 1 column slideshow without hover effect.

 

Decision which settings (default/tablet/mobile) will be applied depends on our 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

You can change your widget width in preview. Click and hold your left mouse button over orange arrow next to the widget. Move it left or right to resize the widget. In top right corner there is an information about current width of the widget.

 

Creating widget

Using widget generator form setup you Desktop (default) widget.

 

Click Add button which is located above Lazy-load images option.

 

It will create new breakpoint which can have alternate settings. Start with implementing settings for tablet breakpoint. First you need to specify width of the widget when alternate settings will be applied. In our case it is 960 pixels.

 

Next configure settings for the widget. Change number of rows, columns and hover effect.

 

Hit Preview button to update preview of the widget.

 

You can now resize the widget width to be lower than 960 pixels. When widget has width lower than 960 pixels tablet settings are applied. If width is higher, default desktop settings are applied.

 

In order to create another breakpoint for mobile, click Add button again.

 

Change width and settings to match our assumptions (apply settings when width is between 0-640 pixels, slideshow type)

 

Again click Preview button and resize your widget to see if it is working fine.

When you will be happy with the result download widget code or save changes to your upgraded widget.

Comments (8)

You must be logged in to post comments.