如何創建真正完美運行的自定義 Mailchimp 模板

已發表: 2021-06-22

從頭開始編寫每封電子郵件需要很長時間，因此擁有一個可重複使用、久經考驗的電子郵件模板可以為您的工作流程效率創造奇蹟。但是，根據我們的電子郵件服務提供商狀況報告，構建自己的模板本身也是一種冒險，即使對於 Mailchimp 來說也是如此，它是第二大最受歡迎的電子郵件服務提供商 (ESP)。

您可能有一種首選的電子郵件開發方式，但是當涉及到 Mailchimp 的自定義模板時，重要的是要遵循一些非常具體的指導方針，以確保您不會因為讓模板工作而浪費時間。我說這是我自己損失了很多小時！

在我引導您創建自定義 Mailchimp 模板時，請注意您構建代碼的方式、創建按鈕的方式，甚至圖像的大小都需要從 Mailchimp 技術觀點來解決。

這就是為什麼我們在這篇博文中與 Mailchimp 和其他專家合作，以確保您的 Mailchimp 模板能夠完美運行。

Mailchimp 的預建模板和自定義模板的區別

Mailchimp 擁有大量可用於創建電子郵件的模板庫。它們中的每一個都可以在拖放編輯器和多個電子郵件模塊中進行編輯，以供選擇以佈置您的內容。

那麼為什麼要創建自定義模板呢？

Mailchimp 的模板具有高度可編輯性，因此任何品牌都可以將它們與自己的品牌顏色和样式一起使用。這使得監控他們的使用以及品牌標識在電子郵件之間保持一致變得具有挑戰性。創建自定義模板可確保您在模板中構建的許多樣式不會被更改。

此外，自定義模板的編輯環境不同。沒有拖放編輯器。相反，根據您實現的模板語言，創建可以復制、切換或刪除的模塊和元素。這是防止不需要的佈局和編輯的另一種方法。

如何編寫自定義 Mailchimp 模板

準備好創建自己的 Mailchimp 電子郵件模板了嗎？繼續閱讀有關正確操作所需的提示和技巧。

考慮您的目標和最終用戶

在開始之前，首先要考慮模板的目標以及將要使用它的人，這一點很重要。例如，您可能需要一個具有很多細節和靈活性的模板。或者，您的團隊中技術含量較低的成員可能需要簡單易行。

電子郵件營銷顧問和營銷推動者 Joolz Joseph 說：

喬爾茲約瑟夫

“問問自己'我們想通過這個實現什麼？'

它是一個可用於多種電子郵件類型的全能模板，因此需要對不同的塊有很大的靈活性嗎？或者更嚴格的內容，例如促銷模板、入門系列或時事通訊？

具有許多可以調整的塊的模板有很大的優勢，但有時 2 或 3 個較短的模闆對於可能被大量選項淹沒的人來說更容易管理。

開始時的這個簡短考慮使您能夠在考慮目標和最終用戶的情況下構建模板。

例如，促銷模板需要關注主要目標和號召性用語 (CTA)，而時事通訊可能有多個不同的 CTA。

這一切都需要反映在您的模板設計中。如果他們的選擇有限，這也將使運行促銷的人更容易加入相關內容！

做一個捕捉所有可能性的單一模板可能會導致一封帶有品牌效應的電子郵件，但效果不如預期，因此值得先退後一步，看看你想要實現什麼以及什麼樣的模板（或模板）最能幫助您做到這一點。”

謝謝，Joolz，給小費！一旦您知道模板的目標，您就可以開始構建。

嵌入您的 CSS 樣式

值得一提的第一件事是 Mailchimp 在您將模板保存在平台中時自動內聯您嵌入的 CSS 樣式。因此，當您開始開發工作時，您可能會發現更容易嵌入所有樣式並限制代碼膨脹。

創建模塊行

在構建代碼時，請考慮您希望可編輯的塊，尤其是那些您希望能夠重新排序的塊。這些塊應該位於行內，例如：

<!--modules that can be re-ordered-->
<!--module 1-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 1-->
<!--module 2-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 2-->

關閉父表後，您將無法重新排序超過這一點的行。

考慮按鈕限制

有很多方法可以對按鈕進行編碼。但是，只有帶襯墊的按鈕才能在您的自定義 Mailchimp 模板中使用。這是因為應用於可編輯按鈕的錨標記的許多樣式會被自動刪除。 VML 代碼的格式以及您放置在錨標記中的任何跨度也可能會進行調整。

填充按鈕方法意味著只有按鈕的文本是可點擊的，因為您需要將填充和其他按鈕樣式應用到父表格單元格。 Mailchimp 的大量文檔提供了有關按鈕代碼的更多詳細信息（以及其他 HTML 電子郵件限制，如果您好奇的話）。

使用精確大小的圖像作為可編輯的佔位符

像按鈕一樣，圖像在可編輯時會產生一些代碼。這一次，刪除的是定義寬度和高度的 HTML 屬性。 Outlook 依賴於這些，Mailchimp 編輯環境還將呈現圖像的實際大小，直到您使用編輯器將這些屬性放回原處。

這使得在電子郵件中使用視網膜圖像（即兩倍大小的圖像）變得有點棘手。

我建議對您編碼到模板中的任何占位符使用 1x 圖像。然後，當模板用於活動時，將佔位符切換為 2x 圖像（視網膜圖像），在圖像編輯器的設置選項卡中定義寬度和高度。

應用 Mailchimp 的模板語言

要在模板中定義可編輯區域，您需要實現 Mailchimp 的模板語言。有大量可用的文檔概述了您需要包含的內容，具體取決於您創建的模板類型。

對於可能被多個品牌使用的高度可定制的模板，您可以使 CSS 樣式可編輯。為此，請遵循 Mailchimp 關於可編輯樣式的指南。

出於本演練的目的，我們將了解如何創建將可編輯性限制為僅內容的模板。為此，我們需要向模板中的 HTML 元素添加以下語言：

mc:edit用於為模板中的特定元素提供內容編輯操作。 確保為模板中的每個實例使用唯一名稱。

mc:hideable用於為模板中的特定元素提供隱藏/顯示操作。

mc:label是一個可選標籤，用於命名應用程序中的可編輯部分。

mc:repeatable用於為模板中的特定元素提供複製操作。

mc:variant用於提供一種在 HTML 的離散塊之間切換的方法。

有關 Mailchimp 模板語言的更多詳細信息，這是我的首選文檔。

包括 Mailchimp 合併標籤

您可以在模板和活動中利用許多合併標籤。我建議應用的標籤是：

*|MC_PREVIEW_TEXT|*
將此預覽文本合併標籤添加到您的構建中，以確保在活動設置期間，添加到預覽文本字段的內容被注入到電子郵件中。在我們的預覽文本在 Mailchimp 中不起作用後，我們通常添加到 Litmus 電子郵件中的預覽文本黑客來創建空格。不要害怕。 Mailchimp 記錄了為自定義模板執行此操作的理想方法。

*|取消訂閱|*
在模板的頁眉和/或頁腳中，將此合併標籤添加到您的取消訂閱鏈接，以確保人們可以選擇將自己從您的列表中刪除。另外，這是一項法律要求，所以您絕對不想忘記這一點。

*|UPDATE_PROFILE|*
讓訂閱者有機會更新他們的信息或管理他們的偏好。

*|存檔|*
將此合併標籤添加到“在線查看”鏈接，讓人們有機會在他們的網絡瀏覽器中查看您的電子郵件。

如何將模板添加到 Mailchimp

現在您已經對模板進行了編碼，您可以開始使用它了。

前往“活動 > 電子郵件模板”，然後單擊“創建模板”按鈕以導入您的模板。

將模板帶入 Mailchimp 的最簡單方法是上傳包含 HTML 和圖像的 zip，因為 Mailchimp 將為您管理圖像路徑。

Mailchimp：為您的模板選擇一個起點

為模板命名並導航到 zip 文件後，模板將在模板編輯器中打開。在這裡，您可以進行調整、訪問存儲圖像和其他資產的內容工作室，並測試您的模板渲染。

在此編輯器中完成後，您可以保存並關閉，您的模板就可以使用了。

確保您的模板在 Mailchimp 中有效

有許多常見的 HTML 錯誤，因此在將 Mailchimp 發送給您的團隊、客戶或其他人使用之前，最好先了解一下 Mailchimp 中的編輯體驗是什麼樣的。為此，請前往主菜單上的“創建”，然後選擇“電子郵件”並堅持“常規活動”。

您可以添加一些營銷活動詳細信息，例如主題行和預覽文本。這將使您有機會檢查是否正確實施了合併標籤和預覽文本代碼。

單擊“設計電子郵件”後，您將能夠選擇要使用的模板。在“保存的模板”選項卡中找到您的自定義模板。

在 Mailchimp 中選擇一個模板

選擇模板後，您將進入 Mailchimp 編輯環境，您可以在其中測試所有可編輯部分。

要編輯可編輯元素，只需單擊它，右側就會出現一個編輯窗格。

編輯 Mailchimp 模板中的元素

需要注意的是：有時重新排列我的內容塊不起作用，因此如果您在單擊一個塊時看不到帶有向上和向下箭頭的圖標，請嘗試複製您想要重新排序的塊。將要移動的塊拖動到新位置後，您可以刪除不需要的額外塊。

重新排列 Mailchimp 模板中的塊

不要忘記測試電子郵件渲染

與往常一樣，查看不同的電子郵件客戶端如何呈現您的模板非常重要，尤其是在使用它創建電子郵件活動之後。

正是通過這樣的測試，我發現了我的模板問題並遇到了 Mailchimp 的一些代碼刪除怪癖。您可以通過將“預覽”和“發送測試電子郵件”發送到您的收件箱或 Litmus 測試地址來輕鬆地在營銷活動和模板編輯器中進行測試，以進行徹底、自動化的預發送測試。

Litmus 和 Mailchimp 還以多種方式集成，以幫助您盡可能徹底和有效地測試電子郵件。前往“進入預覽模式”並選擇“收件箱”選項卡，以在 Mailchimp 的收件箱預覽中運行 Litmus 驅動的電子郵件測試。使用 Litmus Plus 或 Enterprise 計劃，您可以獲得額外的測試和節省時間的集成，包括在您使用 Chrome 中的 Litmus 擴展程序構建時測試關鍵的預發送元素以及在 Litmus 和 Mailchimp 之間同步電子郵件的能力。