转换旧版编辑器电子邮件内容

开始使用电子邮件设计器，从旧版编辑器中创建的电子邮件HTML中构建可重用的模板和片段。

此用例允许您通过使用HTML电子邮件并在电子邮件设计器中将其划分为HTML组件来创建电子邮件设计器模板。

准备电子邮件内容

1. 选择HTML电子邮件。
2. 确定要划分HTML电子邮件的部分。
3. 从HTML中剪切不同的块。

创建电子邮件结构

1. 打开​Email Designer​以创建空的电子邮件内容。
2. 设置正文级别属性：背景颜色、宽度等。 有关更多信息，请参阅编辑电子邮件样式。
3. 添加任意数量的结构组件。 有关更多信息，请参阅编辑电子邮件结构。

添加HTML内容

1. 向每个结构组件添加一个HTML组件。 有关更多信息，请参阅添加片段和组件。
2. 将HTML复制粘贴到每个组件中。

管理电子邮件的样式

1. 切换到​Mobile view。 有关更多信息，请参阅此章节。

2. 要修复此问题，请切换到源代码模式，并将样式部分复制粘贴到新样式部分中。 例如：

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

   注意

   请确保在此之后在另一个自定义样式标签中添加样式。

   请勿修改电子邮件设计器生成的CSS:

   • <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. 返回移动视图，检查内容是否正确显示并保存更改。

用例

让我们尝试将在旧版编辑器中创建的此电子邮件转换为​Email Designer​模板。

识别电子邮件的

我们可以在此电子邮件中识别11个部分。

要确定HTML的哪个部分是哪个元素，您可以选择它。

要查看电子邮件的HTML版本，请单击​Show source。

创建电子邮件模板及其结构

1. 拖放​Structure components​可反映我们电子邮件的布局。

2. 根据需要重复多次。 我们需要创建11个结构组件。

   

插入HTML内容组件

1. 在每个​Structure component​中插入​HTML component。

   

2. 对于每个部分，单击​Show source code。

   

3. 插入HTML部分。

4. 单击 Save.

您现在可以检查电子邮件的呈现。

管理样式以适合移动视图

1. 插入CSS元素，确保您的电子邮件适合移动视图。

2. 切换到源代码并将样式部分复制粘贴到新样式部分。

有关详细信息，请参阅管理电子邮件的样式。

您的旧版电子邮件现在可在电子邮件设计器中使用。