DocumentationCampaign Standard Documentation

Converting Legacy editor email content converting-an-html-content

Last update: Mon Sep 13 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Intermediate
  • User

Start working with the Email Designer and build reusable templates and fragments from your email HTML created in the Legacy Editor.

This use case enables you to create an Email Designer template by using an HTML email and dividing it into HTML components in the Email Designer.

NOTE
Like the compatibility mode, an HTML component is editable with limited options: you can only perform in-place edition.
IMPORTANT
This section is for advanced users who are familiar with HTML code.

Preparing your email content

  1. Select an HTML email.
  2. Identify sections to divide the HTML email.
  3. Cut out the different blocks from your HTML.

Create your email structure

  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 as many structure components as you have sections. For more on this, see Editing the email structure.

Add HTML content

  1. Add an HTML component to each structure component. For more on this, see Adding fragments and components.
  2. Copy-paste your HTML into every component.

Manage the style of your email manage-the-style-of-your-email

  1. Switch to Mobile view. For more on this, see this section.

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

    code language-none 
    <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>
    note note
    NOTE
    Make sure you add your style after this in another custom style tag.
    Do not modify the CSS generated by the Email Designer:
    • <style data-name="default" type="text/css">(##)</style>
    • <style data-name="supportIOS10" type="text/css">(##)</style>
    • <style data-name="mediaIOS8" type="text/css">(##)</style>
    • <style data-name="media-default-max-width-500px" type="text/css">(##)</style>
    • <style data-name="media-default--webkit-min-device-pixel-ratio-0" type="text/css">(##)</style>

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

Use Case

Let’s try to convert this email, created in the legacy editor, into an Email Designer template.

Identify the section of your email

We can identify 11 sections in this email.

To identify which element is which section of the HTML, you can select it.

To see the HTML version of the email, click Show source.

Create the email template and its structure

  1. Drag and drop Structure components reflecting the layout of our email.

  2. Repeat as many times as needed. We need to create 11 structure components.

Inserting HTML content components

  1. Insert an HTML component in each Structure component .

  2. For each section, click Show source code .

  3. Insert the HTML section.

  4. Click Save.

You can now check the rendering of your email.

Managing styles to fit mobile view

  1. Insert CSS elements to ensure that your email is suitable for mobile view.

  2. Switch to source code and copy-paste your style section into a new style section.

For more on this, refer to Manage the style of your email.

Your legacy email is now available in the Email Designer.

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff