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

Pastaba:

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.

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.

For more on converting an existing email into an Email Designer-compatible email, see this section.

Email Designer limitations

  • You cannot use personalization fields in a fragment. For more on fragments, see this section.

  • You cannot save directly as a fragment some content of an email that you are editing within the Email Designer. You need to copy-paste the HTML corresponding to that content into a new fragment. For more on this, see Saving content as a fragment.

  • When editing styles, only the web fonts officially supported by most email clients are available.

  • Styles cannot be saved as a theme for future reuse. However, the CSS style can be saved in a content template or in an email. For more on styles, see this section.

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.

Pastaba:

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:

Designing an email using existing contents

This section explains how to convert an existing email into an Email Designer-compatible email.

By default, if you just upload any HTML (see Importing content from a file), the content is loaded in ' compatibility mode', which limits the edition possibilities through the UI (only in-place edition, no drag-and-drop).

However, if you want to build a framework of modular templates and fragments that can be combined to reuse in multiple emails, you should consider converting your email HTML into an Email Designer template.

When designing content with the Email Designer, you have three options:

Building content from an out-of-the-box template

  1. Create an email and open its content. For more on this, see Creating an email.

  2. Click the home icon to access the Email Designer home page.

  3. Click the Templates tab.

  4. Choose an out-of-the-box HTML template.

    The different templates present various combinations of several types of elements. For example, 'Feather' templates have margins while 'Astro' templates do not have ones. For more on this, see Content templates.

  5. You can combine these elements to build a number of email variants. For example, you can duplicate an email section by selecting a structure component and clicking Duplicate from the contextual toolbar.

  6. You can move the elements around using the blue arrow on the left to drag a structure component below or above another. For more on this, see Editing the email structure.

  7. You can also move components around to change the organization of each structure element. For more on this, see Adding fragments and components.

  8. Modify the content of each element according to your needs: images, text, links.

  9. Adapt the styling options to your content if needed. For more on this, see Editing email styles.

Using fragments and components

To simply make an external content compliant with the Email Designer, Adobe recommends creating a message from scratch and copy the content from your existing email into fragments and components.

When you have a content that cannot be recreated, you can copy-paste the HTML code from the original email using the Html content component. Make sure you are familiar with HTML before proceeding.

A full example is presented below.

Pastaba:

The new content will not be the exact copy of your original email, but the steps below will guide you through the creation of a message that will be as close as possible.

Let's say that you want to use an existing newsletter that was created outside of Adobe Campaign.

You want to have the same header and footer in all the emails that you will send with Adobe Campaign. The body of the email will change according to the content that you intend to display in each newsletter.

Prerequisites

  1. In your original email, identify the reusable sections from the sections that will be unique to each email that you will send.

  2. Save all the images and assets that you want to use.

  3. If you are familiar with HTML, split your original HTML content into different parts.

Creating fragments for your reusable content

Using the Email Designer, create a fragment for each reusable section. In this example, you will create two fragments: one for the header and one for the footer. You can then copy the relevant parts from your existing content into these fragments.

To do this, follow the steps below:

  1. In Adobe Campaign, go to Resources > Content templates & fragments and create a fragment for your header. For more on this, see Creating a content fragment.

  2. Add as many structure components as you need to your fragment.

    des_loading_compatible_fragment_1
  3. Insert image and text components into your structure.

    des_loading_compatible_fragment_2
  4. Upload the corresponding image, enter your text and adjust the settings.

    For more on managing style settings and inline attributes, see Editing email styles.

    des_loading_compatible_fragment_3
  5. Save your fragment.

  6. Proceed similarly to create your footer and save it.

    des_loading_compatible_fragment_4

    If you are familiar with HTML, you can copy-paste the HTML code from the original footer using the Html content component. For more on this, see About content components.

    des_loading_compatible_fragment_9

Your fragments are now ready to be used in a template.

Inserting fragments and components into your template

You can now create an email template with the Email Designer. Use content components to reflect the different sections of your email and adjust the settings to make them as close as possible to your original newsletter. Finally, insert the fragments that you just created.

  1. Using the Email Designer, create a template. For more on this, see Content templates.

  2. Insert several structure components into your template - corresponding to the header, footer and body of your email. For more on adding structure components, see Editing the email structure with the Email Designer.

  3. Insert as many content components as needed to create the body of your newsletter. This will be the editable content of your email that you will update every month.

    des_loading_compatible_fragment_5

    If you are familiar with HTML code, Adobe recommends leveraging Html components where you can copy-paste the more complex elements of the original email. Use other components such as Button , Image or Text for the rest of the content. For more on this, see About content components.

    Pastaba:

    Using the Html component results in creating components that are editable with limited options. Make sure you know how to handle HTML code before selecting this component.

  4. Adjust the content components to match your original email as much as you can.

    des_loading_compatible_fragment_6

    For more on managing style settings and inline attributes, see Editing email styles.

  5. Insert the two fragments (header and footer) that you previously created into the desired structure components.

    des_loading_compatible_fragment_10
  6. Save your template.

You can now fully manage this template within the Email Designer to create and update the newsletter that you will send every month to your recipients.

To use it, create an email and select the content template that you just created.

Related topic:

Converting an HTML content

This use case offers a quick way to convert an HTML email into Email Designer components.

Įspėjimas:

This section is for advanced users who are familiar with HTML code.

Pastaba:

Like the compatibility mode, a HTML component is editable with limited options: you can only perform in-place edition.

Outside of the Email Designer, make sure the original HTML is divided into reusable sections.

If this is not the case, cut out the different blocks from your HTML. For example:

<!-- 3 COLUMN w/CTA (SCALED) -->
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width:680px;">
<tbody>
<tr>
<td class="padh10" align="center" valign="top" style="padding:0 5px 20px 5px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- //3 COLUMN w/CTA (SCALED) -->

Once you have identified all your blocks, in the Email Designer, repeat the following procedure for each section of your existing email:

  1. Open the Email Designer to create an empty email content.

  2. Set the body level attributes: background colors, width, etc. For more on this, see Editing email styles.

  3. Add a structure component. For more on this, see Editing the email structure.

  4. Add an HTML component. For more on this, see Adding fragments and components.

  5. Copy-paste your HTML into that component.

  6. Switch to mobile view. For more on this, see this section.

    The responsive view is broken, because your CSS is missing.

  7. To fix this, switch to source code mode and copy-paste your style section into a new style section. For example:

    <style type="text/css">
    a {text-decoration:none;}
    body {min-width:100% !important; margin:0 auto !important; padding:0 !important;}
    img {line-height:100%; text-decoration:none; -ms-interpolation-mode:bicubic;}
    ...
    </style>

    Pastaba:

    Do not modify the CSS generated by the Email Designer:

  8. Go back to the mobile view to check that your content is correctly displayed and save your changes.

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

    Pastaba:

    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.

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

Pastaba:

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.

email_designer_textversion

You can then edit the plain text version as desired.

Pastaba:

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

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.

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.

  • Bidirectional syncing

    Whenever an edit is made in one product, it is updated in real time in the other. If you want to change the color of text in Dreamweaver, as soon as you make that edit, the color of the text is live in Campaign. Additionally, when you select code in either Dreamweaver or Campaign, since the line numbers are the same, the selection remains between the two products, which is very useful when looking for something specific in the code.

  • Upload local images to AC through Dreamweaver

    When creating or editing an email within Dreamweaver, you can simply select an image from your desktop or local machine. While Dreamweaver has always allowed you to do this, when Dreamweaver and Campaign are connected, the local file is immediately uploaded to the Adobe Campaign server: no need to manually upload images as content changes. Additionally, it ensures that the latest images are always live in Campaign.

  • Add Campaign personalization in Dreamweaver

    For the email developer there is no longer a need to add text like [[FIRSTNAME_PLACEHOLDER]] nor to look up the syntax of your data model’s tables. The Campaign toolbar in Dreamweaver connects directly to your Campaign instance's data model. That means you can pull in any data you want for personalization from something like First Name to Address. If you’ve created Content Blocks within Campaign, you can also pull those directly into Dreamweaver.

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

Šis darbas yra licencijuotas pagal licenciją „Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License“  „Twitter™“ ir „Facebook“ skelbimams „Creative Commons“ sąlygos netaikomos.

Teisiniai pranešimai   |   Privatumo internete politika