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:
Create a message with the Email Designer and copy the content from your existing email into fragments and components. See Using fragments and components to create contents supported by the Email Designer.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<HTML> │ └─ <BODY> | └─ <DIV> Main container  | └─ <DIV> Structure  | └─ <TABLE> Structure table  | └─ <TBODY> | └─ <TR> | └─ <TH> Structure column  | └─ <DIV> Fragment/component container  | └─ <DIV> Fragment/component content wrapper  | └─ <DIV> Fragment/component content 
<html> <head></head> <body> <divclass="container"> <divclass="structure"data-structure-id="1-1-column"data-structure-name="richtext.structure_1_1_column"> <tableclass="structure__table"align="center"> <tbody> <tr> <thclass="colspan1" > <divclass="fragment component"data-component-id="button"data-component-name="richtext.component_button"contenteditable="false"> <divcontenteditable="true"class="button-container"> <ahref="#">Button</a> </div> </div> </th> </tr> </tbody> </table> </div> </div> </body> </html>