Video Transcript:

EverWeb’s Show on Device feature lets you choose on which device types you want an object to be displayed upon. Using Show on Device is a great way to tailor your content specifically for use on mobile through wide desktop devices.

For example, you may want to see more text content on a desktop computer but less on a mobile phone, where images are more important.

In this video, I am going show you a couple of examples of how to use Show on Device.

In the first example, there are four Text Section widgets on the page but on a mobile phone I only want to see three of them as there is less display space so I do not want my visitors to have too much information to scroll through.

First I select the TextSection widget that I do not want displayed on  mobile devices.

Next, I go to the Metrics Inspector and uncheck the ‘Show on Mobile’ option in the Responsive section.

As I adjust the width of EverWeb application, the page automatically reorganises itself.

Eventually the widget becomes hidden and is replaced in the top left of the responsive row as a grey box with an ‘X’ through it, indicating that at this width the object is hidden.

Use the Window, Show Hidden Objects menu option to hide or reveal hidden objects.

To select a hidden object, secondary click in the Editor window and go to the Hidden objects menu option. Select the object you want.

In the second example I am going to replace one object with another as the browser width narrows.

In this example I have a FlexBox widget that contains quite a lot of text. This is fine on a desktop device, but on a mobile device I only want to show the text relating to ‘The Studio’.

First duplicate the widget by secondary clicking on it. Select ‘Duplicate’.

Next Secondary click on the duplicate. Use the Embed In option to add the widget in to the responsive row that contains the original widget.

Edit the text in the duplicate widget so that it only contains information about ‘The Studio’.

Now go to the Metrics Inspector and set the object to ‘Full Width’ before unchecking the  ‘Show on’ Tablet, Desktop and Wide Desktop options.

Select the original widget and uncheck the Show on Mobile option.

Preview to see the results.