Showing and hiding elements in your emails on desktop or mobile

Show or hide layers on mobile or desktop, including separate image variants for each viewport.

Hiding a layer from displaying on mobile or desktop ​

If you want to hide a certain element on mobile or desktop for any reason, you can do this by clicking the Settings button in the plugin header, then click any layer in your Emailify container frame and enable the Hide On Mobile toggle to hide the element on mobile, or enable on the Hide On Desktop toggle to hide the element on desktop.

You can visually preview your visibility overrides using the preview HTML feature in the plugin.

Using separate image layers for mobile and desktop ​

To achieve the effect of showing a variation of a content element on mobile and another on desktop, you can duplicate the Figma layer, open the Settings panel with either image selected, and then set one to Hide on Mobile and the other to Hide on Desktop, which will ensure that each only appears on desktop or mobile.

Note that this should be done sparingly, as it will add some extra code to your HTML export each time because both image layers are exported as normal image elements with their own visibility settings.

You can apply settings in bulk by opening Settings, then selecting multiple Emailify layers of the same type in Figma. Any setting you change will be applied to all selected layers.