轉換舊版編輯器電子郵件內容

開始使用電子郵件設計工具，並從在舊版編輯器中建立的電子郵件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. 插入 HTML component 在每個 Structure component .

   

2. 對於每個區段，按一下 Show source code .

   

3. 插入HTML區段。

4. 按一下​Save。

您現在可以檢查電子郵件的呈現。

管理樣式以符合行動檢視

1. 插入CSS元素，確保您的電子郵件適合行動裝置檢視。

2. 切換至原始程式碼，並將您的樣式區段複製貼到新的樣式區段中。

有關詳細資訊，請參閱 管理電子郵件的風格.

電子郵件設計工具現在會提供您的舊版電子郵件。