Control Layout Visibility by Device in Email Builder

You can now control the visibility of entire layouts in your email templates! This powerful setting lets you hide or show full sections based on device type—making responsive email design faster and more flexible than ever.

What Is Layout-Level Visibility?

Previously, you could only control visibility at the element level, which made hiding large sections for mobile or desktop tedious. Now you can apply visibility settings directly to layout blocks, allowing you to show or hide entire sections depending on the device.

Why Use Layout Visibility Controls?

These controls help you build more responsive and device-optimized emails with less effort:

• Save Time – Hide entire sections in one click instead of adjusting elements individually
• Consistency – Unified editing flow between elements and layouts
• Device Optimization – Customize mobile vs desktop versions of your email layout
• Better Previews – Use mobile/desktop views to test visibility logic
• Improved Testing – Send test emails with the correct visibility settings reflected

How to Use Layout Visibility

1. Create or open an email template in the drag-and-drop builder
2. Add a layout block to your email design
3. Hover over the layout — you'll see desktop and mobile icons appear on the block
4. Click either icon to toggle visibility for that device (a grayed-out icon means the layout is hidden on that view)
5. Alternatively, click on the layout block and use the Visibility tab in the left-hand panel
6. Switch between Desktop and Mobile view using the preview icons in the builder toolbar
7. Send a test email to confirm how visibility behaves in a real inbox

Best Practices for Responsive Layouts

To create polished, device-specific email experiences for parents and families:

• Use desktop-only layouts for wide or multi-column designs
• Use mobile-only layouts for single-column content or CTA buttons
• Always preview and test send to confirm what's shown or hidden
• Pair layout visibility with element-level visibility for extra precision

Pro Tip: Most parents check email on mobile devices. Consider creating a mobile-first design, then add desktop-only layouts for supplementary content like detailed schedules or multi-column program comparisons.

Frequently Asked Questions

What happens if I hide a layout for both desktop and mobile?

The layout will be hidden from all views and will not be sent. Make sure at least one view is active.

Can I adjust element visibility separately inside a layout?

Yes, but if the layout itself is hidden, the visibility of inner elements won't matter—they will not render.

Are visibility settings reflected in test emails?

Yes. Both desktop and mobile visibility settings are preserved when sending test or live emails.

How is this different from hiding individual elements?

Layout-level visibility saves time by letting you hide entire sections, rather than toggling each component individually.

Next Steps

• Open an email template and try out layout visibility settings
• Use the desktop/mobile preview toggle to test layout behavior
• Send a test email to validate how your layout appears across devices
• Save time by using layout-level controls instead of adjusting individual elements