.png){kind=logo}
內容、區塊及更多
這款拖曳式編輯器目的是讓建立美觀且高效的郵件變得輕鬆簡單。它主要由兩個部分組成：內容與區塊。區塊讓您新增並排列內容元素，如圖片、欄位、按鈕、文字等等。另外，整體設定則是協助您設定郵件的整體風格，包括選擇預設文字顏色、背景以及其他設計細節。
您可以上傳自己的圖片，或是從我們的圖庫選擇現成的素材。此外，檢查功能可讓您隨時追蹤修改進度。
本篇文章將帶領您了解編輯器中的各項功能。您可以點擊下方標題，直接跳轉至您感興趣的工具。
開始之前
內容元素必須放置在區塊內才能使用。例如，您可以將標題文字元素新增至郵件中的單欄區塊內。
請參閱以下範例。
區塊
每個區塊由一個或多個欄位組成。在這些欄位中，您可以新增不同的內容元素，例如文字、標題、圖片或按鈕。
如何查看區塊樣式選項：
在郵件中點擊內容以外的區域，您會看到區塊的輪廓。點擊輪廓的任何地方，左側將顯示樣式選項，稱為「列」。
以下我們將說明「區塊」可用的各項樣式選項。
|
欄位：區塊可以分割成不同比例，例如 50:50、33:33:33、25:25:25:25 等。 您可以在選擇區塊之前或之後，自行選擇要使用的區塊類型。 選擇之前 點擊「區塊」選單，選擇 100%（最上方第一個選項），然後將您選中的區塊拖入編輯器。 選擇之後 在編輯器中點擊區塊，並在左側選單中選擇您要使用的欄位數量。 當選擇兩個或兩個欄位以上時，您將看到每個欄位的編輯選項，也可以在此刪除或新增更多欄位。
|
|
|
欄屬性 您可以在此設定背景顏色、內距、並新增邊框及邊框顏色。 「邊框」與「內距」區段中設有「更多選項」，讓您能分別為上、下、左及右側設定樣式。 提示：利用邊框選項可以製作出「框線文字」的效果。 |
|
區塊-列屬性
|
區塊內的「列屬性」可讓您預設整列與欄的背景顏色，也可以為新增的內容設定不同的顏色。如果沒有設定「欄」的背景顏色，則會套用「列」的背景顏色。 注意：「欄」的「背景顏色」設定將優先顯示，並蓋過「列」的「內容背景顏色」。 上傳圖片 您可以為「列」的背景新增圖片。 使用「圖片選項」調整圖片的顯示範圍。 |
|
|
|
|
已儲存區塊
若想儲存郵件的某個區塊，點擊區塊後，左下角會出現「儲存」選項。您可以命名或加上標籤以便管理。
儲存後的區塊可在左側的「區塊」選單中找到。
範例
新增區塊（1 欄）+ 圖片元素、調整圖片大小並更改列的背景顏色。
內容元素
在編輯器中，「內容」元素是放在「區塊」內部的組件。有時，我們可能會將列稱為列或欄。透過「內容」元素，您可以新增文字、圖片、按鈕等豐富內容。
| 樣式選項會根據您使用的元素而有所不同，以下我們將逐一說明各元素的選項。 |
|
點擊下方選項以瞭解更多資訊，或繼續閱讀全文。
| 欄 | 文字 |
| 標題 | 圖片 |
| 按鈕 | 分隔線 |
| 選單 | HTML |
| 影片 | 社群 |
| 計時器 |
|
|
|
|
欄
| 使用「欄」元素可在郵件版面中新增多個欄位。設定好欄位後，您便可在每個欄位中加入其他內容元件，例如文字、圖片或按鈕。 |
|
|
文字
|
使用「文字」元件即可在郵件模板中加入文字。 |
|
|
「文字」元素有兩個可編輯區域：彈出式工具列及編輯器左側選單。請務必點擊文字區塊以編輯內容，兩者將會同時開啟。 |
|
文字工具列
|
懸浮在文字上方的工具列可讓您進行快速編輯，例如： （請務必先選取您要套用變更的文字）
|
|
文字左側選單選項 編輯器左側的「文字選單」讓您可以透過以下選項來自訂文字：
|
標題
| 使用標題元素建立主標題與副標題。 |
|
|
「標題」文字工具列與一般的文字工具列略有不同。 標題工具列允許您對標題進行微調，但是不可以新增表格、清單或使用「智慧內容」的選項。 |
|
圖片
|
「圖片」區塊讓您可以上傳自己的圖片，或使用圖庫中的圖片。將此區塊新增至郵件範本後，您可以執行以下操作：
💡 提示： 從圖庫中使用的圖片，將會自動同步儲存至您的「上傳」項目中。 |
|
|
|
|
|
|
按鈕
| 透過「按鈕」區塊，為您的郵件加入明確的行動呼籲。您可以自訂文字、連結、顏色、大小和對齊方式，以符合您的品牌和版面配置。「智慧按鈕」選項會根據您的按鈕文字提供建議，您也可以輸入幾個關鍵字，讓「智慧助手」生成新的建議。 |
|
郵件按鈕是用來引導讀者採取行動。它們是郵件中最重要的元素之一，因為它們作為清楚且可點擊的行動呼籲 （CTA），能引導您的讀者進行下一步。
動作類型
每種動作類型都有不同的可用選項：
開啟網站
- 輸入一組 URL
- 新增目標
- 原本分頁：在同一分頁開啟網址
- 新增分頁：在新分頁開啟
發送郵件
預填電子郵件資訊
可用的選項包括：
- 收件者
- 主旨
- 內文
撥打電話號碼
- 電話號碼
- 點擊後，將僅顯示收件人的電話應用程式。
移至指定區塊
|
所有先前命名過的區塊都會顯示在下拉式選單中。您可以使用此選項建立可點擊的連結，引導收件人跳轉到郵件中的其他區塊。 例如：您可以在郵件頂部放置一個「閱讀更多」的按鈕，當讀者點擊該按鈕時，郵件就會自動捲動到該特定區塊。 |
|
要使用「移至指定區塊」功能，您必須先為區塊命名。請點擊您想設定的區塊，接著在左側選單中找到「區塊名稱」並輸入名稱。
按鈕選項
請使用以下選項來設定您的按鈕外觀風格。
- 背景顏色
- 文字顏色
- 字型
- 字型粗細
- 標準
- 粗體
- 顏色
- 此設定將套用至該區塊中新增的文字。
- 文字對齊
- 這會對齊該區塊內的所有文字。如果您希望其他文字有不同的對齊方式，則需要新增一個獨立的文字區塊。
- 行高
- 調整文字行與行之間的間距。
- 字距
- 控制每個字元之間的間距。
間距
「間距」選項能讓您控制按鈕的大小、形狀與擺放位置，使其完美融入您的郵件版面。以下為可調整的選項：
- 對齊
- 內距
- 邊框
- 圓角邊框
一般
內容內距
指按鈕在容器（外框）範圍內的周圍留白空間。
分隔線
「分隔線」區塊能在您的郵件中加入一條水平線，可用於在不同區塊之間建立視覺上的區隔效果。
您可以自訂分隔線的寬度、粗細以及周圍的間距，以完美符合您的郵件風格。
範例：您可以使用分隔線將「主打產品」與「結尾作答」區隔開來，或是用它來區分電子報中的不同文章。
選單
| 「選單」區塊類似於網站的導覽選單，讓您可以在郵件中加入一列可點擊的連結。每個選單項目都可以連結至特定網頁、撥打電話號碼、移至郵件內的指定區塊，或是開啟郵件撰寫選項（mailto 連結）。 |
|
|
要使用此區塊，請直接將其拖曳至郵件中，然後點擊「+ 新增項目」。 接著，您就可以選擇想要使用的連結類型。 您可以使用「樣式」頁籤來客製化選單的外觀與風格，使其完美符合您品牌的顏色、字型與版面配置。 |
|
範例：您可以在郵件的頂部或底部加入一個包含「資源中心」、「關於我們」和「聯絡我們」等連結的選單，以提升導覽便利性並增加讀者互動。
HTML
「HTML」區塊讓您能直接在郵件模板中插入自訂的 HTML 程式碼。您可以使用此區塊來加入個人簽名檔、表單以及其他自訂的 HTML 功能。
影片
只需貼上影片的網址（URL），即可將影片新增至您的郵件中。這會在郵件版面中直接新增一個帶有播放按鈕的可點擊影片預覽圖。由於影片並非直接內嵌或在郵件內播放，因此當讀者點擊播放圖示時，系統會在新的瀏覽器視窗中開啟該影片的原始託管網站（例如 YouTube 或 Vimeo）並進行播放。
|
使用「影片」區塊可以在您的郵件中加入影片預覽。影片不會直接在郵件內播放，而是會顯示一張帶有播放圖示的影片縮圖。 要使用影片區塊，您需要準備該影片的網址（URL），接著您可以使用一些內建選項來進行編輯與調整。 由於影片並非直接託管或在郵件內播放，因此當讀者點擊播放圖示時，系統會在新的瀏覽器視窗中開啟該影片的原始託管網站並進行播放。 |
|
新增影片網址後，您可以自訂以下項目：
- 播放圖示類型（可選擇不同的形狀）
- 播放圖示顏色（白色、黑色或紅色）
- 播放圖示大小
- 影片周圍的內距（用以調整間距與版面配置）
- 任何對影片本身的編輯（例如修改標題或更換縮圖），都必須在該影片原始託管的平台上進行。
- 大多數的郵件客戶端都不支援在郵件內直接播放影片。「影片」區塊僅會生成一張帶有播放圖示的預覽圖片，吸引讀者點擊。
社群
「社群」區塊讓您能輕鬆加入社群媒體圖示，並連結至您品牌的社群官方帳號。在郵件中加入這些連結，是提升讀者互動、為社群頁面導入流量並增加品牌曝光度的簡單有效方法。
要使用「社群」區塊：
- 將「社群」區塊拖放至您的郵件版面中。
- 在左側選單中，點擊社群媒體圖示，將其新增至您的郵件。
- 在「社群連結」欄位中，貼上您的社群檔案網址（例如：https://facebook.com/yourbrand）。
- 依需求重複上述步驟，以新增更多圖示。
樣式選項
- 「圖示類型」可選擇以下選項：
- 圓形、圓形黑色、圓形白色、圓角、圓角黑色、圓角白色、正方形、以及正方形黑色。
- 圖示類型僅提供黑色與白色。如果您選擇「圓形白色」樣式，並為該區塊設定了背景顏色，則該顏色將會顯示在圖示後方的圓圈內。請參考下方範例：
-
- 對齊
- 圖示大小
- 圖示間距
計時器
| 「計時器」區塊讓您能在郵件中加入即時的倒數計時。當收件人開啟郵件時，計時器就會根據您所選擇的時區，自動且即時地倒數到您設定的目標時間。 |
|
「計時器」區塊非常適合用來為促銷活動、盛會、產品上市或限時優惠營造急迫感，有效提升轉換率。
要使用「計時器」區塊，請按照以下步驟操作：
- 將「計時器」區塊拖放至您的郵件版面中。
- 接著在郵件中點擊該「計時器」區塊，系統便會顯示其設定選項。
- 在左側選單中，選擇「結束時間」、「時區」及「語言」。
- 「結束時間」即為計時截止的確切時刻。如果收件人在倒數結束後才開啟郵件，看到的計時器畫面將會顯示為 00-00-00。
計時器樣式選項
- 計時器標籤
- 您可以根據想要的外觀，自由開啟或關閉標籤顯示（如：天、小時、分鐘等）。
- 背景顏色
- 數字顏色
- 標籤顏色
- 數字字型
- 標籤字型
- 圖片寬度
- 控制計時器的整體大小。寬度（像素 px）設定得越大，計時器畫面就越大。
- 對齊
- 替代文字
- 為計時器圖片新增替代文字。這能協助螢幕閱讀器運作，並在圖片無法正常載入時提升無障礙體驗。
- 動作（可點擊連結）
- 您可以透過指定網址（URL）讓計時器支援點擊功能。當收件人點擊倒數計時器時，系統會將他們引導至您設定的連結頁面。
整體設定
「整體設定」是您為整封郵件定義主要設計基調的地方。它能設定關鍵元素的預設樣式，確保您的郵件能擁有統一且專業的外觀，而無需單獨去調整每個區塊。
您可以在「整體設定」中配置的項目：
- 文字顏色
- 設定整封郵件中所有「文字」區塊的預設字型顏色。
您仍然可以在個別區塊中覆蓋此設定，但此處將作為基礎樣式。
- 背景顏色
- 控制郵件內容後方的整體背景顏色。
- 內容寬度
- 設定郵件內容區域的寬度。
- 預設值為 600 px，這是大多數郵件客戶端為達到最佳顯示效果所支援的標準寬度。
- 內容對齊
- 在郵件設計中，將您的郵件內容設定為靠左、置中或靠右對齊。
- 字型
- 定義整封郵件所使用的預設字型（例如：Arial、Helvetica 等）。
- 字型粗細
- 標準
- 粗體
- 連結顏色
- 設定郵件內容中所有超連結的預設顏色。
- 您可以在個別區塊（例如「文字」或「按鈕」區塊）中覆蓋這些樣式；但如果沒有作任何更改，每個區塊都將自動套用「整體設定」中所設定的樣式。
- 在「整體設定」中設定統一樣式，不僅能節省您的時間，還能確保整封郵件呈現一致品牌形象。
圖庫與上傳
「圖庫」與「上傳」選項僅在郵件編輯器內提供。
圖庫
| 郵件編輯器中的「圖庫」區塊提供了一個庫存圖片庫，您可以瀏覽這些圖片並直接將其拖曳至郵件。此外，您也可以使用內建的 AI 工具，根據您輸入的提示詞來生成客製化的圖片。 |
|
「圖庫」區塊與「圖片內容」區塊不同，因此您不需要在插入圖庫的圖片前先新增一個內容區塊。在插入圖片後，您一樣可以使用圖片區塊的所有樣式設定選項。
從圖庫或透過 AI 生成的圖片都會自動儲存到您的「上傳」區塊。
上傳
|
「上傳」區塊會儲存您上傳的所有圖片以及您在郵件中使用過的任何圖庫的圖片或 AI 生成圖片。就是您的個人圖庫，讓您在不同的電子報中輕鬆重複使用這些視覺素材。 在「上傳」區塊中，您可以直接上傳圖片、將新圖片拖曳進來，或是重複使用先前已上傳過的圖片。 |
|
「上傳」區塊與「圖片內容」區塊不同，因此您不需要在插入上傳的圖片前先新增一個內容區塊。在插入圖片後，您一樣可以使用圖片區塊的所有樣式設定選項。
要重複使用圖片，只需將該圖片直接拖曳至編輯器中即可。
檢查
「檢查」功能可協助您在發送郵件前，重新檢查是否有任何潛在問題。它的作用就像是最後的檢查清單，確保您的郵件已達到最佳化且沒有錯誤。如果您的郵件存有潛在問題，您將會在「檢查」圖示上看到通知提示。
|
「檢查」功能可識別以下潛在問題：
|
|
要使用「檢查」功能，請點擊編輯器左側選單中的「檢查」選項。
建議：
在定案並送出任何郵件之前，請執行一次「檢查」。這是確保您的郵件內容完整、符合無障礙標準且完美無瑕的快速方法。