Editing plain text, HTML and mobile email formats

Documentation Campaign Campaign Standard Documentation

Editing plain text, HTML and mobile email formats plain-text-and-html-modes

Last update: Mon Sep 13 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Email Design

CREATED FOR:

Intermediate
User

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.

NOTE

To use content blocks in plain text version, make sure they do not contain HTML code.

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.

NOTE

If you edit the Plain text version while synchronization is disabled, the next time you enable the Sync with HTML option, all the changes you made in the plain text version will be replaced with the HTML version. The changes made in Plain text view cannot be reflected in HTML view.

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.