About email content design

Adobe Campaign provides you with two editors that allow you to design content for your emails.

  • The new Creative Designer enables you to smoothly edit the content of your emails in a variety of ways.

  • You can still use the content editor to modify your emails. It also enables you to customize landing pages, SMS messages and push notifications.

Note:

To modify email content, Adobe recommends leveraging the extended functionality of the new Creative Designer which is user-friendly, powerful and faster.

The Creative Designer offers extended functionalities compared to the default content editor. However, it does not support yet the following features:

  • The use of dynamic images from Adobe Target. See Working with Campaign and Target.

  • The ability to retrieve content from a URL automatically at preparation time. See this section.

  • Fully compliant out-of-the box content templates. To create compatible templates, see this section.

Using the Creative Designer

The Creative 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.

When creating an email, choose the Use the Creative Designer option. When editing the content of an email, click Content in the email dashboard. The Creative Designer opens by default.

If you wish to use the simple content editor, click Use the default editor. For more on the content editor, see this section.

Note:

The Creative Designer is currently in Beta mode. To use it, you have to agree with the Terms and Conditions displayed when selecting this editor in the interface. To help us improve it, you can provide feedback on the Adobe dedicated forum.

Check out this introduction video.

About the Creative Designer interface

The Creative 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 Creative Designer

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

Example: Designing an email content from scratch

To design an email from scratch, follow the instructions of this video.

To summarize, here are the main steps to create an email content from scratch using the Creative Designer:

  1. Create an email and open its content.

  2. Add structure components to shape the email. See Editing the email structure with the Creative Designer.

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

  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 delivery after making sure that you have defined an audience and properly scheduled the sending.

Related topics:

About the Creative 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 Creative 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

Note:

Default content templates are not fully compatible with the Creative Designer. You can still use them in compatibility mode or create your own content templates from the Creative Designer.

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.

If you want to reuse an Adobe Campaign template or an existing external content and make it fully compliant with the Creative Designer, refer to this section.

Generating a text version of the email

By default, the Plain text version of your email is automatically generated and synchronized with 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

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 Creative Designer.

Using the email content editor

The content editor allows you to easily define, modify, and personalize content in Adobe Campaign. You can access it by clicking the Content block in an email dashboard.

Note:

Adobe recommends leveraging the Creative Designer, which enables to quickly create captivating personalized emails. See Using the Creative Designer. The content editor also enables you to customize landing pages, SMS messages and push notifications.

Related topics:

Email content editor interface

The content editor is organized into three different sections. These sections allow you to view and edit the content.

delivery_content_1
  1. The palette on the left-hand side of the screen allows you to modify the general options linked to a selected block. The options that can be modified are: background color, border, text alignment, visibility condition, etc. See Inserting a personalization field.

  2. The action bar contains the general options for the page. You can select a template, change the display mode or preview the email from here. See Email content editor action bar.

  3. The editing zone on the right-hand side of the screen allows you to directly interact with the content using the contextual toolbar: insert a link into an image, change the font, delete a field, etc. See Email content editor toolbar.

Email content editor action bar

The action bar contains different buttons that allow you to interact with the content that is being created.

delivery_content_2
Icon
Button name
Channel
Description

Change content
Landing page and email
Allows you to select out-of-the-box content or import your own HTML content. Refer to Loading an existing content.

Tracked URLs
Email
Displays the list of each URL. You can enable or disable the tracking separately for each URL in the message.

Preview
Email and SMS
Allows you to view how the email is rendered for a recipient. Refer to Previewing messages.

Expand content editor
Email
Hides the palette and expands the content editor.

Undo
All
Cancels the last action carried out.

Redo
All
Redoes the last action that you canceled.

Show blocks
Landing page and email
Allows you to show the boxes around the content blocks (corresponds to the <div> HTML tag).

Show source
Landing page and email
Allows you to show the HTML source code of the page.

Dreamweaver
Email
Allows you to edit email content in the Dreamweaver interface.

Email content editor toolbar

The toolbar is a contextual element of the editor interface that 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. Once you select a block, you can delete or duplicate it for example. After selecting the text inside a block, you can turn it into a link or make it bold.

delivery_content_17

Caution:

Certain toolbar functions let you format the HTML content. However, if the page contains a CSS style sheet, the instructions from the style sheet may prove to take priority over the instructions specified via the toolbar.

Icon
Button name
Context
Description

Link to an external URL
Any element
Allows you to add a link to a URL. Details of how to configure a link are presented in the Inserting a link section.

Link to a landing page
Any element
Allows access to an Adobe Campaign landing page. Details of how to configure a link are presented in the Inserting a link section.

Subscription link
Any element
Allows you to insert a service subscription link. Details of how to configure a link are presented in the Inserting a link section.

Unsubscription link
Any element
Allows you to insert a service unsubscription link. Details of how to configure a link are presented in the Inserting a link section.

Remove link
Link
Allows you to delete the link, as well as all the configurations linked to it, after confirming.

Insert a personalization field
Text element
Allows you to add a field from the database to the content. Refer to Inserting a personalization field.

Insert a content block
Text element
Allows you to add a personalization block to the content. Refer to Adding a content block.

Enable dynamic content
Text element
Allows you to insert dynamic content in the content. Refer to Defining dynamic content.

Disable dynamic content
Text element
Allows you to delete dynamic content.

Enlarge font
Text element
Increases the size of the selected text (adds <span style="font-size:">).

Reduce font
Text element
Reduces the size of the selected text (adds <span style="font-size:">).

Bold
Text element
Adds the bold style to the selected text (wraps the text with the <strong></strong> tags).

Italic
Text element
Adds the italic style to the selected text (wraps the text with the <em></em> tags).

Underline
Text element
Underlines the selected text (wraps the selected text with the <span style="text-decoration: underline;"> tag).

Change background color
Text element
Allows you to change the background color of the block selected (adds style="background-color: rgba(170, 86, 255, 0.87)).

Change font color
Text element
Allows you to change the color of all the text in the block or just the text selected in the block (<span style="color: #56ff56;">).

Image
Block containing an image
Allows you to insert an image from a file saved locally.

Delete
Any block
Deletes the block and its content.

Duplicate
Any block
Duplicates the block including any styles linked to it.

Default edition modes

The content editor lets you edit your email's content in two different formats: HTML and text format.

HTML Mode

The HTML mode is a WYSIWYG editor where you can easily see and modify the general display of your message, as well as interact with the content, including images.

This mode makes it easy to select blocks of content to duplicate or edit them.

The HTML functionalities allow you to:

  • Define a visibility condition

  • Add a border and a frame

  • Edit image properties

  • Add links

  • Add personalization fields

  • Add content blocks

  • Edit the text style

delivery_content_edition3

Text mode

Text mode in the editor offers the following functionalities:

The editor operates in text mode in the same way as it does in HTML mode.

delivery_content_18

Note:

This editing mode is used for the Subject and From fields, and for the Text tab in the email content.

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