How-To: Use Show & Hide for Responsive Design

This is an expert concept

Responsive & Embed

When editing a responsive page, you will also have show & hide styling options to show/hide certain elements for certain screen sizes. When deciding to hide a given element, simply select the screen size for which you would like to hide your content. Below, please find a key of what type of device each size typically corresponds to:

XS = Portrait Mobile

SM = Landscape Mobile

MD = Tablet

LG = Desktop

So if you would like to hide a block of copy when viewing a given page on a mobile device, you can check the "Hide in XS" checkbox and it will not render when the page is viewed on a mobile device.

Embed

Within the same style section of your creative studio, you will find the "Hide when embedded" checkbox. This option is great for pages that you would like to embed into your website! This option allows you to publish pages as you normally would for your typical traffic but also use the ion embed code to embed certain portions of the page on your website.

For example, after building a page, you may decide that you would really love to embed the form and Thank You page content into your website. You can do this with a single experience by simply selecting the content you don't want to show on your website, and checking the "hide when embedded" checkbox. You will then be able to use the ion embed code to embed the form and Thank You page content into your website. For more information on ion embed code, click here.

Show & Hide Conditions

The ion platform also gives you the ability to show and hide content conditionally based on the presence of data for a given data field. This allows you to show different content to to different visitors based on the presence of certain query string values or data collected elsewhere in the experience.

For example, you could set your email address form field to hide if you’ve previously collected that visitor's email address. You could also show and hide different headlines and images based on query string information to tailor the experience based on where the visitor is coming from. You could even set a value on the submission of the form so that when that visitor returns, they are shown a different form to put together a progressive profile of the respondent.

Simulate Page Conditions

You can test out your conditional content directly within creative studio as well! After setting up your conditional content, you will see an icon at the top of your creative studio to simulate page conditions.

After enabling this feature, simulate whether or not data is present as well as test out different values to see how the page will look for different visitors based on data that has been collected about them. You can also use this feature to show how your page would look if it were embedded on an external site.