Using the Email builder, you can format emails for mobile devices. Optimizing the mobile view of an email is critical to ensure it works well on a mobile device, which is how many people will view your email.
Step 1: Hiding Elements From Mobile or Desktop View
- Navigate to Marketing and then to the emails sub-tab. Choose Campaigns/Templates from the dropdown.
- After you’ve created the email template or email campaign, go to the editor view in your drag-and-drop email.
- Edit the element. Go to Visibility and choose to hide for mobile, desktop or both.
- Alternatively, when you hover over the element, you’ll see the action option to hide it on mobile or desktop.
- You can hide an element within the editor area or layer space, and it’s recommended to preview the Email Template or Campaign to ensure it displays as expected. However, be aware that some email clients, when viewed in a browser on mobile, may not honor hidden elements.
- Add mobile formatting for different font styles with size, alignment, and line spacing. These settings will only work in the mobile version of the email template in email clients that support media queries.
- Save to confirm any changes
Step 2: How to Preview and Test the Email
- Click the 3-dots menu and choose “Preview Template” to preview your mobile view.
- When you are redirected to the preview screen, you can toggle between the icons at the top to preview in desktop, tablet, or mobile device view.
- You can also preview it on a mobile device to see in real time how it will appear.
FAQ
1. How do I hide specific elements in an email for mobile or desktop view?
To hide elements from mobile or desktop view, navigate to the editor in your drag-and-drop email builder. Hover over the element you wish to hide, and use the action option to hide it specifically for mobile or desktop.
2. Can I adjust the font style and size only for the mobile view of my email?
Yes, you can customize the font style, size, alignment, and line spacing specifically for the mobile version of your email. These settings will apply only to email clients that support media queries.
3. How do I preview my email in mobile view?
To preview your email in mobile view, click the 3-dots menu in the email builder and select “Preview Template.” You can then toggle between desktop, tablet, and mobile views at the top of the preview screen.
4. Will the changes I make to the mobile view affect the desktop view?
No, changes made specifically for the mobile view will not impact the desktop view. You can customize each view independently to ensure optimal display on different devices.
5. How can I test how my email will look on an actual mobile device?
After setting up the mobile formatting, you can preview the email on an actual mobile device by sending a test email to yourself and viewing it on your mobile phone. This will help you see how it appears in real time.