Hiding a layer from displaying on mobile or desktop

If you’d like to hide a certain element on mobile or desktop for any reason, you can do this by clicking on 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.

Swapping between two 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.

Please note that this should be done sparingly, as it will add some extra code to your HTML export each time.

Optimising responsive images. Emailify will automatically detect any 2 adjacent “image” layers inside of any content column layer, which have alternating Hide On Mobile/Hide On Desktop toggles enabled on them, and will treat them as a single image element in your HTML code export, reducing the size of your HTML.