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

開始使用電子郵件設計工具，並從舊版編輯器中建立的電子郵件HTML中建立可重複使用的範本和片段。

此使用案例可讓您使用HTML電子郵件，並將其分為「電子郵件設計器」中的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. 切換至原始碼，並將樣式區段複製貼至新的樣式區段。

如需詳細資訊，請參 閱「管理電子郵件樣式」。

您的舊式電子郵件現在可從電子郵件設計工具取得。

本頁內容