Setting content visibility on Desktop and Mobile

By default content will be visible on any device but with the Style Editor you can choose to set the visibility of the element to show only on Mobile or Desktop.

To hide or unhide a snippet block 

• Click into the snippet block on your page you would like to change the visibility for, 
• then click the RED COG ICON that appears on the row tools icons top left of the snippet. This will launch the Style Settings Popup / Style Editor.

Select the element to hide and choose your visibility setting

In the popup that appears, select the element you would like to change visibility for. 

By default this is the entire block (ROW), but you can also choose columns or specific elements within it such as paragraphs and images.

To hide the entire Snippet Block

• Leave the ROW button highlighted as-is
• Click the small PALETTE ICON tab (shown below highlighted in blue)
• From the options that appear, click VISIBILITY to open the visibility options
• Click the relevant option e.g. Hide on Desktop This setting will hide the element when viewed on desktop.

You can also click the MOBILE icon, and set the visibility for mobile/desktop mode there.

To hide a specific element within a Snippet Block

• Click another element at in the top buttons, to select the element. 
• If there is more that one of the element, use the arrow buttons <> below, or click the left-right arrow keys on your keyboard to navigate to the required element of that type.
• Click the small PALETTE ICON tab (shown below highlighted in blue)
• From the options that appear, click VISIBILITY to open the visibility options
• Click the relevant option e.g. Hide on Desktop This setting will hide the element when viewed on desktop.

You can also click the MOBILE icon, and set the visibility for mobile/desktop mode there.

The change will be automatically applied to the element, which will then have a highlight colour and caption to indicate its status e.g. MOBILE ONLY.

Remember to save your changes.

Hidden content - visual indicators

Hidden content will be indicated by a pale blue background with a dotted line around it. There will be a label in the corner indicating its visible status.

In the screenshot below - the entire snippet block will only show on mobile mode (Mobile Only) it will not be visible on desktop browsers.