Show Menu
主題×

電子郵件設計人員快速入門

電子郵件設計人員提供四種建立電子郵件的方式。
您可以在電子郵件設 計器中建立新的電子郵件 :
  • 您可以輕鬆新增結構和內容元件，並個人化其內容，以便快速傳送，從空白畫布建立電子郵件。 您也可以完全管理樣式元素。 如需詳細資訊，請 快速上手 ，或查看完 整的檔案 。
  • 您可以從現成可用的範本建立電子郵件，方法是選取範本並從此處建立新的電子郵件內容。 進一步瞭解
您也可以建立包含現有內 容的電子郵件 :
  • 您可以轉換現有的HTML內容（在外部或舊版編輯器中建立）。 進一步瞭解
  • 您可以直接在相容性模式中匯入現有的HTML內容。 進一步瞭解
無內容
使用內容
從頭開始建立電子郵件
轉換現有HTML內容
從現成可用的範本建立內容
匯入現有的HTML

使用編輯器設計電子郵件

在這兩種建立策略中，在傳送電子郵件之前先填妥主題行是十分重要的。 瞭解如何 新增主旨行 。

從頭開始建立電子郵件

您可以輕鬆建立電子郵件、新增元件並個人化其內容，以便快速傳送。 您可以視需要調整樣式選項以配合您的內容。 如需有關管理樣式設定和內嵌屬性的詳細資訊，請參閱「編 輯電子郵件樣式」 。
  1. 建立電子郵件。
  2. 關閉首頁。

新增主旨行

傳送電子郵件時，主旨行是必填的。 如需詳細資訊，請 參閱定義電子郵件的主旨行 。
  1. 轉至「電 Properties 子郵件設計器」首頁的標籤（可透過首頁圖示存取）並填寫 Subject 章節。

添加結構元件

結構元件將定義電子郵件的版面配置。 如需詳細資訊，請 參閱定義電子郵件結構 。
在「結構」元件中，拖放您要使用的版面的元件。
您可以選取不同的內容版面，這些版面會加入您的電子郵件中。

新增內容元件

您可以在電子郵件中新增數種內容元件，例如影像、文字和按鈕。 如需詳細資訊，請參閱「 內容元件」 。
  • 影像
  1. 在「 內容元件 」中，將影像拖放至其中一個結構元件中。
  2. 按一 下瀏覽 。
  3. 從您的電腦選取影像檔案。
  • 文字與個人化
  1. 在「 內容元件 」中，將文字拖放至其中一個結構元件中。
  2. 按一下元件並輸入文字。
  3. 若要新增個人化欄位，請按一下工 具列中的「插入個人化 」欄位。
  4. 選擇您需要的欄位，例如名字。
  • HTML
  1. 在「 內容元件 」中，將HTML拖放至其中一個結構元件中。
  2. 按一 下顯示原始碼 。
  3. 輸入您的HTML內容。
  4. 按一下 儲存 。
如果您熟悉HTML，則可使用內容元件，從原始頁尾複製並貼上HTML **Html**程式碼。 如需詳細資訊，請參閱關於 內容元件 。

設定電子郵件元件的樣式

您可以調整電子郵件樣式，例如變更元件的間距。 如需有關管理樣式設定和內嵌屬性的詳細資訊，請參閱「編 輯電子郵件樣式」 。
  1. 按一下您的 文字元件 。
  2. 在調色板的右側，轉到「填充 」 。
  3. 按一下鎖定圖示，可中斷上下或左右參數之間的同步。
  4. 視需 要調整 「填補」。
  5. 按一下 儲存 。
您現在可以儲存並傳送電子郵件。

從現成可用的範本建立內容

您可以利用現成可用的範本（例如客戶歡迎訊息、電子報和重新參與電子郵件）建立電子郵件，並個人化這些範本。
  1. 建立電子郵件並開啟其內容。 如需詳細資訊，請參 閱建立電子郵件 。
  2. 按一下首頁圖示以存取 **Email Designer**首頁。
  3. 按一下標 **Templates**簽。
  4. 選擇現成可用的HTML範本。 不同的範本呈現多種元素的組合。 例如，「羽化」範本有邊界，而「Astro」範本沒有邊界。 如需詳細資訊，請參閱「內 容範本」 。
  5. 轉至「電 Properties 子郵件設計器」首頁的標籤（可透過首頁圖示存取）並填寫 Subject 章節。
  6. 您可以結合這些元素來建立許多電子郵件變體。 例如，您可以選擇結構元件並從內容相關工具列按一下，以複製 **Duplicate**電子郵件區段。
  7. 可以使用左側的藍色箭頭將元素移動，以將結構元件拖曳到另一個元件下方或上方。 如需詳細資訊，請參閱「 編輯電子郵件結構」 。
  8. 您也可以移動元件以變更每個結構元素的組織。 如需詳細資訊，請參 閱新增片段和元件 。
  9. 根據您的需求修改每個元素的內容：影像、文字、連結。
  10. 視需要調整樣式選項以配合您的內容。 如需詳細資訊，請參閱「編輯 電子郵件樣式 」。

使用現有的電子郵件內容

如果您想要建立模組範本和片段的架構，以便結合在多封電子郵件中重複使用，您應考慮將電子郵件的HTML轉換為電子郵件設計人員範本。

轉換HTML內容

此使用案例提供將HTML電子郵件轉換為電子郵件設計器元件的快速方式。
本節適用於熟悉HTML程式碼的使用者。
和相容性模式一樣，HTML元件也可編輯，但選項有限：您只能執行就地版本。
在「電子郵件設計器」外，請確定原始HTML會分為可重複使用的區段。
  1. 開啟「電子郵件設計工具」以建立空的電子郵件內容。
  2. 設定主體級別屬性：背景顏色、寬度等。 如需詳細資訊，請參閱「編輯 電子郵件樣式 」。
如果不是這樣，請從HTML中剪下不同的區塊。 例如，以下是明確識別的章節： 
<!-- 3 COLUMN w/CTA (SCALED) -->
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width:680px;">
<tbody>
<tr>
<td class="padh10" align="center" valign="top" style="padding:0 5px 20px 5px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- //3 COLUMN w/CTA (SCALED) -->
在您識別所有區塊後，請在「電子郵件設計器」中，針對現有電子郵件的每個區段重複下列步驟：
  1. 添加結構元件。 如需詳細資訊，請參閱「 編輯電子郵件結構」 。
  2. 新增HTML元件。 如需詳細資訊，請參 閱新增片段和元件 。
  3. 將HTML複製並貼入該元件。
  4. 切換至行動裝置檢視。 For more on this, see this section .
    回應式檢視會中斷，因為您的CSS遺失。
  5. 若要修正此問題，請切換至原始碼模式，並將樣式區段複製貼至新的樣式區段。 例如： 
    <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>
  6. 返回行動裝置檢視，檢查您的內容是否正確顯示並儲存變更。

匯入和編輯HTML電子郵件

上傳內容時，它必須包含特定標籤，才能與「電子郵件設計器」的WYSIWYG編輯器完全相容並可編輯。
如果所上傳的HTML的全部或部分不符合預期的標籤，則內容會以「相容模式」載入，這會限制透過UI的版本可能性。
當內容以相容模式載入時，您仍可透過介面執行下列修改（隱藏不可用的動作）:
  • 變更文字或變更影像
  • 插入連結和個人化欄位
  • 在選取的HTML區塊上編輯某些樣式選項
  • 定義條件式內容
其他修改（例如在電子郵件中新增章節或進階樣式）必須直接在電子郵件的原始碼中透過HTML模式進行。 雖然相容性模式不允許您使用拖放功能，但它保證與舊版編輯器具有相同的功能集。
有關將現有電子郵件轉換為與電子郵件設計人員相容的電子郵件的詳細資訊，請參 閱本節 。