從頭開始設計電子郵件

了解如何掌握電子郵件內容版本。 使用電子郵件設計工具，您可以建立電子郵件和範本，開頭使用或不使用您自己的預先定義內容。

以下是使用電子郵件設計工具從草稿開始建立和設計電子郵件內容的主要步驟：

  1. 建立電子郵件並開啟其內容。
  2. 新增結構元件以塑造電子郵件。 請參閱編輯電子郵件結構。
  3. 在結構元件中插入內容元件和片段。 請參閱新增片段和內容元件。
  4. 新增影像及編輯電子郵件的文字。 請參閱插入影像。
  5. 新增個人化欄位、連結等，以個人化您的電子郵件。 請參閱插入個人化欄位、插入連結和定義電子郵件中的動態內容。
  6. 定義電子郵件的主旨行。 請參閱個人化電子郵件的主旨行。
  7. 預覽您的電子郵件.
  8. 儲存內容，並在確定您已定義對象並正確排程傳送後繼續處理訊息。

您也可以查看此簡介影片。

注意

為避免從草稿開始設計電子郵件內容，您可以使用現成可用的內容範本。 如需詳細資訊，請參閱內容範本。

定義電子郵件結構

電子郵件設計工具可讓您輕鬆定義電子郵件的結構。 透過新增和移動結構元素並執行簡單的拖放動作，您可以在數秒內設計電子郵件的形狀。

若要編輯電子郵件的結構：

  1. 開啟現有內容或建立新的電子郵件內容。

  2. 選取左側的​+​圖示，以存取​Structure components。

  3. 拖放您塑造電子郵件所需的結構元件。

    在放置結構元件之前，藍線會實體化其確切位置。 您可以將其放置在其他元件之上、之間或之下，但不放在內部。

    注意

    請注意，列堆疊與所有電子郵件程式不相容。 不支援時，不會堆疊欄。

    放入電子郵件後，您必須先放入內容元件或片段，才能移動或移除元件。

  4. 由一個或多個列組成的多個結構元件可用。

    選取​n:n column​元件以定義所選欄數（3到10之間）。 您也可以移動每欄底部的箭頭，以定義每欄的寬度。

    注意

    每個列大小不能低於結構元件總寬度的10%。 無法刪除非空的列。

定義結構後，您就可以將內容片段和元件新增至電子郵件。

使用前置詞

前置標題是從收件匣檢視電子郵件時，主旨行後面的簡短摘要文字。 預報頭提供較高的開放率。

選擇​Preheader​編輯框並完成內容。

您可以在標題前內容中新增​Content block、Dynamic content​或​Personalization fields。

注意

請注意，preheader與所有電子郵件程式不相容。 不支援時，將不會顯示preheader。

使用內容元件

內容元件是原始的空白元件，放入電子郵件後，您就可以編輯這些元件。

您可以在結構元件中新增任意數量的內容元件。 也可以在結構元件內或將它們移動到另一個結構元件。

以下是電子郵件設計工具中可用元件的清單：

Button

如果您需要使用多個按鈕，而不是從頭開始編輯每個按鈕，可以使用上下文工具欄複製​Button​元件。

您也可以將按鈕儲存至可重複使用的片段中。 如需詳細資訊，請參閱建立內容片段和將內容儲存為片段。

選取​Fallback view​以在電子郵件設計工具中顯示後援影像。

Text

使用此元件在電子郵件中插入文字。 您可以調整​Component Settings​中文本的顏色、樣式和大小。

Divider

使用此元件在電子郵件中插入分行。 您可以在​Component Settings​中選擇斷行的顏色、樣式和大小。

HTML

使用此元件來複製並貼上現有HTML的不同部分。 這可讓您建立免費的模組化HTML元件。

注意

可用的HTML元件可以編輯，但選項有限。 如果未內嵌所有樣式，請務必在HTML程式碼的​head​區段中新增正確的CSS，否則電子郵件將無法回應。 使用​Preview​按鈕來測試內容的回應（請參閱預覽訊息）。

為了讓外部內容與電子郵件設計工具相容，Adobe建議從草稿開始建立訊息，並將內容從您現有的電子郵件複製到片段和元件中。

當您有無法重新建立的內容時，可以使用​Html​內容元件，從原始電子郵件複製並貼上HTML程式碼。 繼續之前，請確定您熟悉HTML。

注意

新內容不會是原始電子郵件的確切副本，但下列步驟將引導您完成建立盡可能接近的訊息的程式。

複製內容之前

  1. 在原始電子郵件中，識別可重複使用的區段，這些區段將對您要傳送的每個電子郵件都是唯一的。
  2. 儲存您要使用的所有影像和資產。
  3. 如果您熟悉HTML，請將原始HTML內容分割為不同的部分。

影片

將視訊元件插入電子郵件的結構元件中，並在​Component Settings​中輸入視訊連結。

注意

請注意，視訊與所有電子郵件程式不相容。 若不支援，則會顯示後援。

影像

使用此元件在電子郵件中插入影像。

將影像元件插入結構元件中，然後按一下「瀏覽」從電腦上傳影像檔案。

Social

使用此元件，在電子郵件中插入社交媒體頁面的連結。 您可以選取要顯示哪些連結及其​Component Settings​中圖示的大小。

  1. 將​Carousel​元件拖放到結構元件內。

  2. 瀏覽以從您的電腦選擇影像。

  3. 從​Settings​窗格中，設定輪播中要的縮圖數。

  4. 從您的電腦選取後援影像。

轉盤元件與所有電子郵件程式不相容。 上傳後援以在電子郵件不支援輪播時改為顯示影像。

注意

轉盤元件與下列電子郵件平台相容：Apple Mail 7、Apple Mail 8、Outlook 2011 for Mac、Outlook 2016 for Mac、Mozilla Thunderbird、iPad和iPad mini iOS、iPhone iOS、Android、AOL（Chrome、Firefox和Safari）。

相關主題：

本頁內容