教程：如何創建阻止顏色的電子郵件

我們非常喜歡電子郵件中的所有顏色。 我們非常喜歡（並且經常看到）的一種風格是色塊，其中大約一半的電子郵件具有粗體背景色，另一半是白色。 這是一項簡單的技術，在收件箱中大有幫助。 在本教程中，我們將向您展示如何通過幾個簡單的步驟構建您自己的彩色屏蔽電子郵件。 我們還將探索如何：

• 在電子郵件中添加多種 HTML 背景顏色
• 建立多列
• 格式化文本（顏色、大小、行高、鏈接等）
• 通過微調間距和填充來潤色電子郵件

靈感：屏幕外調度

Offscreen是一份印刷雜誌和每週時事通訊，“對技術和網絡進行了深思熟慮、以人為本的觀點”。 它的時事通訊稱為 Offscreen Dispatch，我們長期以來一直欣賞它簡單、獨特的設計。 Offscreen 在每封電子郵件中都使用相同的色塊技術，非常漂亮的效果使電子郵件看起來像是雜誌中的一頁。 網頁設計師 Kai Brach 給訂閱者寫便條的頂部始終是粉紅色的。 電子郵件的其餘部分始終是白色的。 一探究竟：

這裡沒有什麼特別花哨的東西——沒有藝術或攝影——但是動態的佈局、格式良好的文本和色塊設計將這封電子郵件結合在一起。

第 1 步：構建結構

在 MailUp 上打開 BEE 編輯器並從一個基本的空白單欄模板開始。

在我們開始拖入結構元素之前，讓我們花一點時間檢查 Offscreen Dispatch 電子郵件並確定佈局組件。 這是一個標記版本：

電子郵件在單列和兩列結構之間交替，在 BEE 中易於組裝。

從右側的“行”菜單中拖過相應的行格式。 我們需要這封電子郵件的前兩個選項：

以下是我們的電子郵件在行結構就位的情況下的外觀：

第 2 步：用文本/圖像排列內容塊

現在我們已經組裝好了電子郵件的骨架，將與我們想要的內容類型（文本和/或圖像）對應的內容塊拖到每個部分。 然後，粘貼文本並拖入圖像。

這是關於如何定位您的內容的 1-2-3。 從第一行（標題）開始，方法如下：

(1)拉入兩列結構：

(2)在左側添加文本塊； 右側的圖像內容塊：

(3)放入你的文字和圖片：

讓我們通過每一行來安排內容。

這是我們的電子郵件，其中包含剩餘的內容塊：

現在，我們將完成添加文本：

瞧！ 接下來，讓我們格式化。

第 3 步：格式化背景顏色

現在是有趣的部分。 觀看創建色塊效果是多麼容易。

首先，為了匹配 Offscreen Dispatch 電子郵件中淡粉色的確切陰影，我們使用HTML-Color-Codes.info來識別標題中圖像的顏色。

HTML 顏色代碼將十六進制代碼標識為 #F5BBA2。 為了使第一行顏色正確，我們將：

1. 選擇行
2. 導航到右側菜單中的行背景顏色
3. 粘貼顏色代碼（或手動選擇）

無縫邊到邊顏色！ 現在讓我們完成粉紅色的色塊。 我們將簡單地選擇下一行並再次執行相同的操作。

現在，我們的電子郵件被顏色屏蔽了。 是的，就是這麼簡單。

第 4 步：格式化文本

讓我們通過一些格式調整來完成這個電子郵件設計。 我們將從文本開始。

為電子郵件選擇默認字體

不要通過每個單獨的內容塊來選擇電子郵件的字體，而是導航到右側的“設置”菜單，然後選擇要用於整個電子郵件的字體。

之後，您可以更改標題字體或選擇您想要的部分。

調整字體大小

點擊任何文本塊並使用下拉菜單微調字體大小。

自定義文本顏色

使用相同的菜單選擇您喜歡的顏色。 同樣，使用相同的匹配顏色代碼來獲得所需的精確陰影。

格式化鏈接樣式

不要忘記鏈接！ 在您選擇默認正文字體的同一設置菜單中，您還可以設置鏈接樣式的格式。 在這種情況下，我們將選擇黑色。

在向電子郵件添加鏈接時，請確保選中“下劃線鏈接”框。 （這甚至是電子郵件可訪問性最佳實踐！）

行高

確保您的正文有喘息的空間。 對於您編輯的任何內容塊，調整文本的行高。

提示：重複行

如果您花費大量時間在特定行中格式化文本，您可以簡單地複制它，而不是在另一行中手動進行相同的調整。

點按您要復制的行。 然後，一直單擊右側的雙框圖像。

您的行將被複製！ 然後，只需拖動它並抓住左側的方向圖標，即可在電子郵件中放置新行。

第 5 步：調整填充

最後一步！ 這是一個重要的。 在完成電子郵件之前，請仔細查看內容塊之間的間距。 如果仍然有太多差距——或者其他地方沒有足夠的喘息空間——很容易進行調整。

例如，我們的電子郵件草稿標題中的“Offscreen”和“Dispatch”之間仍然存在差距。 要收緊它，請點擊任一內容塊，向下滾動到右側菜單中的塊選項，並確保在填充下打開“更多選項”。 然後，您可以減少（或增加）任何內容中任何一側的內邊距。

第六步：預覽完成的色塊郵件！

好的——最後一步，最後一步。 在設計任何電子郵件時，請一路預覽它以確保您喜歡它在桌面和移動設備上的顯示效果。 以下是我們如何塑造的一瞥：

包起來

創建彩色屏蔽電子郵件比您想像的更簡單，並為您的消息增加了很多視覺價值。 如果您想真正掌握最先進的電子郵件設計技巧，請確保立即下載我們的免費電子郵件設計指南！