Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

How to Set an Element's Visibility to Specific Devices - Device Visibility

The number one tool you have in your school is device visibility, which means that an element can be visible to a specific set of devices. Visibility allows you to show or hide widgets or even entire sections based on the device the user is accessing your site from. Being able to control visibility to specific devices can enhance the customization and tailor the learning experience to individual needs. 


In this article, we will go through the process of configuring this feature while offering practical examples of its usefulness and advantages. 


Use cases

Setting up device visibility is ideal if you want to add extra padding to a text box when it is viewed on phones only, make a button smaller on tablets, or even change the layout's appearance.


Additionally, you could duplicate a button, but each button will have opposite visibilities (for example, one element will have Desktop and Tablet device enabled, and the duplicated button will only have Phone device enabled). With this approach, you can adjust each button to have a different layout for different devices!


Another great benefit is the possibility of adjusting the size of a screen or image widget based on the device from which the user is accessing the site.

To set up device visibility, click on an element and navigate to the Actions in the sideform .

Choose if a whole section or a specific widget will be visible to a specific group of devices:

  • Desktop / Laptop 
  • Tablet Landscape 
  • Tablet Portrait  
  • Phone Landscape 
  • Phone Portrait 


You also have the option to activate the timeframe setting. This setting allows you to show/hide an element for a designated duration. For example, you could opt to conceal a button exclusively on mobile devices for a period of two days or any other timeframe you prefer.


After the timeframe is completed, the widget's settings won't revert back to the previous/default settings.

  • When creating a section or a widget that is intended to be viewed on another device apart from the desktop, it is suggested to first make all the necessary changes, and then apply the device visibility. As soon as you click on Apply device visibility, the element will then be visible only to the respective authoring devices, and only the Layout Tab will be available to further edit the element.
  • If you have selected a whole section to be visible only to specific devices, this will apply to the included widgets as well.
  • Due to the different infrastructure of the settings, device visibility is not supported in the top-bar menu. If you have already applied device visibility, though, you can contact us at support@learnworlds.com to further assist you in reverting the changes.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.