About email content design

Use the Email Designer drag-and-drop interface to create and modify the content of your emails in Adobe Campaign.

This section describes the specificities of the Email Designer:

To know more about actions that are common to one or more marketing activities, refer to the following sections:

About the Email Designer

The Email Designer allows you to create email content and email content templates. It is compatible with simple emails, transactional emails, A/B test emails, multilingual emails, and recurring emails.

To learn how to design an email from scratch using the Email Designer, watch this introduction video.

Email Designer interface

The Email Designer provides many options that allow you to create, edit and customize every aspect of your content.

The interface is composed of several areas offering different functionalities:

email_designer_overview

From the elements available in the Palette (3), drag and drop structure components and content fragments in the main Workspace (1). Select a component or element in the Workspace (1) and customize its main styling and display characteristics from the Settings pane (2).

Access more general options and settings from the main Toolbar (4).

Note:

The Settings pane can move to the left according to your screen resolution and display.

The Contextual toolbar of the editor interface offers various functionalities depending on the zone selected. It contains action buttons and buttons that allow you to change the style of the text. The modifications carried out always apply to the zone selected.

General recommendations for using the Email Designer

To make proper use of the Email Designer and create the best emails as simply as possible, we recommend applying the following principles:

  • Use inline styling rather than a separate CSS and CSS in the <head> section of the HTML. By using inline styling, you can optimize content fragment save and reuse.

  • Settle your branding easily by creating and reusing content fragments to keep consistency across your marketing campaigns.

Email Designer compatibility mode

When you upload a content, it must contain specific tagging to be fully compliant and editable with the WYSIWYG editor of the Email Designer. For more on this specific tagging, see this section.

If all or part of the uploaded HTML is not compliant with the expected tagging, the content is then loaded in 'compatibility mode', which limits the edition possibilities through the UI.

When a content is loaded in compatibility mode, you can still perform the following modifications through the interface (unavailable actions are hidden):

  • Changing the text or changing an image

  • Inserting links and personalization fields

  • Edit some styling options on the selected HTML block

  • Defining conditional content

email_designer_compatibility

Other modifications such as adding new sections to your email or advanced styling must be done directly in the source code of the email via the HTML mode.

Designing an email content from scratch

Here are the main steps to create and design an email content from scratch using the Email Designer:

  1. Create an email and open its content.

  2. Add structure components to shape the email. See Editing the email structure.

  3. Insert content components and fragments in the structure components. See Adding fragments and content components.

  4. Add images and edit the text of the email. See Inserting images.

  5. Personalize your email by adding personalization fields, links, and so on. See Inserting a personalization field, Inserting a link and Defining dynamic content in an email.

  6. Define the subject line of your email. See Personalizing the subject line of an email.

  7. Preview your email.

  8. Save your content, and proceed with your message after making sure that you have defined an audience and properly scheduled the sending.

You can also check out this introduction video.

Note:

To avoid designing email content from scratch, you can use out-of-the-box content templates. For more on this, see Content templates.

Related topics:

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 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 in the Editing email styles section.

  1. Create an email and start editing the content. For more on this, see Designing an email content from scratch.

  2. To access the dedicated mobile view, select the Switch to mobile view button.

    email_designer_mobile_view_switch

    The mobile version of the email is displayed. It contains all the components and styles that were defined in desktop view.

    email_designer_mobile_view
  3. You can edit independently all style settings such as background color, alignment, padding, margin, font family, text color, and so on.

  4. 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.

    email_designer_mobile_view_change
  5. 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.

    email_designer_mobile_view_desktop_no-change

    Note:

    The only exception is the Style inline settings. Any style inline setting change is also applied to the standard desktop view.

  6. However, 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.

    email_designer_mobile_view_change_content

    Click again the Switch to mobile view button to go back to the standard desktop view. The changes are reflected.

    email_designer_mobile_view_desktop_content-change
  7. Removing a style in mobile view takes you back to the style that was applied in desktop mode.

    For example, in desktop view, apply a grey background color to a button.

    email_designer_mobile_view_background_desktop
  8. Switch to mobile view and apply a green background to the same button.

    email_designer_mobile_view_background_mobile
  9. While still in mobile view, now disable the Background color setting.

    email_designer_mobile_view_background_mobile_disabled

    The background color defined in desktop view is still 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.

Plain text and HTML modes

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.

You can disable this synchronization by clicking the Sync with HTML switch from the Plain text view of your email.

email_designer_textversion

Personalization fields added to the HTML version are also synchronized with the plain text version.

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.

    email_designer_html1
  • 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.

    email_designer_html2

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 with the Email Designer.

Design through Adobe Campaign integrations

Editing content in Dreamweaver

The Adobe Campaign Standard integration with Dreamweaver lets you edit an email's content in the Dreamweaver interface. You have access to the powerful interface of Dreamweaver to design and develop responsive email content.

This feature is detailed in the Dreamweaver Documentation accessible here. A demonstration video is also available.

Editing content in Experience Manager

Email content can be edited in Experience Manager and then used for one or several email messages in Adobe Campaign. Refer to this document.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy