Editing plain text, HTML and mobile email formats plain-text-and-html-modes
The Email Designer enables you to edit several rendering of your emails. You can generate a text version of your email, edit the HTML source of an email and design emails for mobile view.
Generating a text version of the email generating-a-text-version-of-the-email
By default, the Plain text version of your email is automatically generated and synchronized with the Edit version.
Personalization fields and content blocks added to the HTML version are also synchronized with the plain text version.
To have a plain text version different from the HTML version, you can disable this synchronization by clicking the Sync with HTML switch from the Plain text view of your email.
You can then edit the plain text version as desired.
Editing an email content source in HTML editing-an-email-content-source-in-html
For the most advanced users and debugging, you can view and edit the email content directly in HTML.
You have two ways to edit the HTML version of the email:
-
Select Edit > HTML to open the HTML version of the entire email.
-
From the WYSIWYG interface, select an element and click the Source code icon.
Only the source of the selected element is displayed. You can edit the source code if the selected element is a HTML content component. Other components are in read-only mode, but can still be edited in the full HTML version of the email.
If you modify the HTML the code, the responsiveness of the email could be broken. Make sure to test it using the Preview button. See Previewing messages.
Designing emails for mobile rendering switching-to-mobile-view
You can fine-tune the responsive design of an email by separately editing all style options for mobile display. For example, you can adapt margins and padding, use smaller or bigger font sizes, change buttons, or apply different background colors that will be specific to the mobile version of your email.
All style options are available in mobile view. The Email Designer style settings are presented previously on this page.
-
Create an email and start editing the content. For more on this, see Designing an email content from scratch.
-
To access the dedicated mobile view, select the Switch to mobile view button.
The mobile version of the email is displayed. It contains all the components and styles that were defined in desktop view.
-
Edit independently all style settings such as background color, alignment, padding, margin, font family, text color, and so on.
-
When editing any style setting in mobile view, the modifications are only applied to the mobile display.
For example, reduce the size of an image, add a green background and change the padding in mobile view.
-
You can hide a component when displayed on a mobile device. To do this, select Show only on desktop devices from the Display options.
You can also choose to hide this component on desktop devices, which means that it will be displayed on mobile devices only. To do this, select Show only on mobile devices.
For example, this option enables you to display a specific image on mobile devices and another image on desktop devices.
You can either set this option from the mobile or desktop view.
-
Click again the Switch to mobile view button to go back to the standard desktop view. The style changes you just made are not reflected.
note note NOTE The only exception is the Style inline settings. Any style inline setting change is also applied to the standard desktop view. -
Any other change to the structure or the content of the email such as text edits, uploading a new image, adding a new component, etc. is also applied to the standard view.
For example, switch back to mobile view, edit some text and replace an image.
-
Click again the Switch to mobile view button to go back to the standard desktop view. The changes are reflected.
-
Removing a style in mobile view takes you back to the style that was applied in desktop mode.
For example, in mobile view, apply a green background color to a button.
-
Switch to desktop view and apply a grey background to the same button.
-
Switch again to mobile view, and now disable the Background color setting.
The background color defined in desktop view is now applied: it turns grey (not blank).
The only exception is the Border color setting. When disabled in mobile view, no border is applied anymore, even if a border color is defined in desktop view.