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 get started with the Email Designer, watch this set of videos that explain the general functionality of the Email Designer and how to design an email from scratch or using templates.

Email Designer home page

When creating an email, the Email Designer home page automatically displays upon selecting the email content.

email_designer_home_page

The Properties tab enables you to edit the email details such as the label, the sender's address and name, or the email subject. You can also access this tab by clicking the email label on top of the screen.

email_designer_home_properties

The Templates tab enables you to choose from the out-of-the-box HTML contents or the templates that you already created to quickly start designing your email. See Content templates.

email_designer_home_templates

The Learn & support tab gives you easy access to the related documentation and tutorials.

email_designer_home_support

If you do not select a template, the Email Designer home page also enables you to choose how you want to start designing your content:

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 (1), drag and drop structure components and content fragments into the main Workspace (2). Select a component or element in the Workspace (2) and customize its main styling and display characteristics from the Settings pane (3).

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.

email_designer_toolbar

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.

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

    email_designer_mobile_view
  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. You can also hide a component. When checking this option, the corresponding component will be hidden when displayed on a mobile device.

    email_designer_mobile_hide
  6. 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.

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

    email_designer_mobile_view_background_mobile
  9. Switch to desktop view and apply a grey background to the same button.

    email_designer_mobile_view_background_desktop
  10. Switch again to mobile view, and now disable the Background color setting.

    email_designer_mobile_view_background_mobile_disabled

    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.

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 capability 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 Standard. Refer to this document.

Email design options comparison

Adobe Campaign offers several email authoring options. The table below shows the main possibilities, benefits and limitations for each of them.

Email Designer
Experience Manager
Dreamweaver
Start blank email
Supported
Supported
Supported
Write HTML
Supported
Not supported
Supported
Update HTML
Only inside an HTML component
Not supported
Supported
Basic personalization
Supported
Supported
Supported
Advanced personalization
Supported
Not supported
Not supported
Proof/Preview
Supported
Preview in AEM
Proof in Campaign
Preview and proof in Campaign
Product listings
Supported in email transactional messages
Not supported
Not supported
Benefits
  • Easy email building through drag-and-drop experience
  • Functionalities similar to legacy content editor
  • Reusable content with fragments
  • Reusing assets from website in emails
  • Leveraging the power of Experience Manager in email contents
  • Capability for a developer to directly code an email
  • Bi-directional synchronization
  • Editing offline in Dreamweaver and synchronizing later
  • Uploading images to Adobe Campaign through Dreamweaver
  • Limitations
  • No conditional content within fragments
  • Using Experience Manager fragments not possible
  • Advanced personalization difficult to implement
  • Need to send tests in Adobe Campaign
  • Dynamic content not supported
    Audience
    Marketers who want to keep the flexibility to use HTML components in combination with drag-and-drop features Marketers already using Experience Manager who want to use standard email templates with little personalization Developers who want to code email contents and integrate directly with Adobe Campaign
    To learn more
    See About the Email Designer
    See Integrating with Experience Manager
    See Dreamweaver and Campaign and watch this video

    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