Editing existing contents with the Email Designer

To fully leverage the edition possibilities of the Email Designer, your uploaded HTML must contain specific tagging that makes it compliant with the WYSIWYG editor.

If all or part of the HTML does not have this tagging, the content is then loaded in ' compatibility mode'.

To make an existing external content fully editable within the Email Designer, you have two options:


Adobe recommends the first option which is faster and does not require any specific technical skills. The second option is reserved for more advanced users.

You can also create a message with the Email Designer, copy-paste the HTML code from your original email using Html content components and adjust them according to your needs. For more on this, see About content components.

However, like the compatibility mode, a HTML component is editable with limited options. If you create an email using Html content components, you will not be able to use all the editing functionalities of the Email Designer.

Using fragments and components to create contents supported by the Email Designer

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.

A full example is presented below.


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.


  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.

  3. Insert image and text components into your structure.

  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.

  5. Save your fragment.

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


    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.


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.


    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.


    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.


    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.

  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:

HTML tagging to ensure compatibility with the Email Designer

The Email Designer uses specific tagging. Standard HTML contents uploaded to Adobe Campaign must match the expected tagging to be fully compatible and editable.

This section lists the specific hierarchy and attributes needed to make a content compliant with the Email Designer.

DOM hierarchy

Use the following DOM hierarchy:

└─ <BODY>
  └─ <DIV> Main container [1]
    └─ <DIV> Structure [2]
      └─ <TABLE> Structure table [3]
        └─ <TBODY>
          └─ <TR>
            └─ <TH> Structure column [4]
              └─ <DIV> Fragment/component container [5]
                └─ <DIV> Fragment/component content wrapper [6]
                  └─ <DIV> Fragment/component content [7]

CSS class names

Use the following CSS class names within the DOM hierarchy described above:

  • container - on the main <div> node [1]: defines the first container element of the content.

  • structure - on a <div> node [2]: defines a node as a structure container.

  • structure__table - on a <table> node [3]: defines a node as a table structure wrapper.

  • colspan1 / colspan2 / colspan3 / colspan4 - on a <th> node [4]: defines the number of columns that will compose a structure.

  • fragment - on a <div> node [5]: defines a node as a fragment.

  • component - on a <div> node [5]: defines a node as a component.

  • button-container - on a <div> node [6]: button component wrapper class name.

  • text-container - on a <div> node [6]: text component wrapper class name.

  • image-container - on a <div> node [6]: image component wrapper class name.

  • divider-container - on a <div> node [6]: divider component wrapper class name.

Data attributes

Use the following data attributes within the DOM hierarchy described above:

  • data-structure-id - on a structure <div> node [2]: defines the ID of the structure corresponding to its column arrangement.

    Possible values: 1-1-column | 1-2-column | 1-3-column | 2-1-column | 2-2-column | 3-1-column | 3-3-column | 4-4-column

  • data-structure-name - on a structure <div> node [2]: defines the name of the structure. It is namespaced with richtext.

    Example: richtext.structure_1_1_column

  • data-component-id - on a component <div> node [5]: defines the ID of a component.

    Possible values: button | image | text | divider | social | carousel

  • data-component-name - on a component <div> node [5]: defines the name of the component. It is namespaced with richtext.

    Example: richtext.component_button

Other attributes

  • contenteditable - on a component wrapper <div> node [6]: allows to make the component editable (for text type components).

    Possible values: true | false


    The component container node ([5]) should have the contenteditable="false" attribute.

DOM example

              <thclass="colspan1" >
                <divclass="fragment component"data-component-id="button"data-component-name="richtext.component_button"contenteditable="false">

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea