Controlling Layout Visibility in Email Templates

Layout Visibility Controls for Email Templates

You can now control the visibility of entire layout sections within your email templates. This feature allows you to show or hide complete layout blocks based on the device type viewing the email, making it easier to create responsive designs that adapt to different screen sizes.

Understanding Layout-Level Visibility

Previously, visibility settings were only available for individual elements within an email. With layout-level visibility, you can apply show/hide settings to complete sections, saving time and ensuring consistent behavior across all elements within a layout block.

Benefits of Layout Visibility

• Time Efficiency: Hide entire sections with a single click instead of adjusting multiple elements individually
• Consistent Design: Maintain uniform visibility settings across all elements within a layout
• Device Optimization: Create different email experiences for desktop and mobile viewers
• Improved Testing: Preview and test emails with accurate visibility settings

How to Set Layout Visibility

Follow these steps to control layout visibility in your email templates:

1. Open an email template in the drag-and-drop builder
2. Add a layout block to your email design
3. Hover over the layout block to reveal desktop and mobile visibility icons
4. Click the appropriate icon to toggle visibility for that device type
5. A grayed-out icon indicates the layout is hidden on that view
6. Alternatively, select the layout and use the Visibility tab in the left-hand panel
7. Use the preview toggle in the builder toolbar to switch between desktop and mobile views
8. Send a test email to verify visibility behavior

Conditional Visibility for Layouts

You can also apply conditional visibility rules to entire layouts based on contact data:

1. Select the layout in the Email Builder
2. Open the Visibility tab
3. Enable conditional visibility
4. Select the custom field to evaluate
5. Choose a condition: Is, Is Not, Is Empty, or Is Present
6. Enter a value if required by the selected condition
7. Save your changes

Best Practices

• Use desktop-only layouts for wide or multi-column designs
• Use mobile-only layouts for single-column content or call-to-action buttons
• Always preview and test emails to confirm visibility settings
• Combine layout visibility with element-level controls for precise customization
• Ensure at least one view (desktop or mobile) is active for each layout

Common Questions

What happens if I hide a layout for both desktop and mobile?
The layout will be completely hidden and won't appear in the sent email.

Can I control element visibility within a visible layout?
Yes, but if the layout itself is hidden, individual element visibility settings won't take effect.

Do visibility settings work in test emails?
Yes, both desktop and mobile visibility settings are preserved when sending test or live emails.