開源交易電子郵件模板

當您設置新的 SendGrid 帳戶時，為您的帳戶創建一組電子郵件模板是要完成的最重要的任務之一。 如果您計劃通過我們的 API 為您的應用或服務發送電子郵件，您很可能需要幾種不同類型的電子郵件模板。 一些最常見的是密碼重置、電子郵件確認和收據。

雖然網絡上有大量預製的電子郵件模板可供選擇，但要找到一套易於定制以匹配您的品牌的模板並不總是那麼容易。

徹底測試常見電子郵件客戶端中的模板也很重要。 此過程可能會很耗時，並且會減慢設置 SendGrid 帳戶和開始發送電子郵件的過程。

我意識到 SendGrid 的團隊可以通過創建一組開源電子郵件模板來為我們的客戶提供價值，用戶可以利用這些模板來涵蓋這些常見用例。 模板不僅易於定制，而且您可以快速啟動並發送！

我們稱之為“粘貼”的模板集涵蓋了 5 個用例：

• 密碼重置
• 郵件確認
• 歡迎信
• 收據
• 摘要（每天、每週或每月）

在 GitHub 上下載模板

要開始使用我們的粘貼模板，請前往 GitHub 並克隆存儲庫或下載粘貼模板文件夾。 還值得一提的是，這些模板存在於電子郵件模板的開源存儲庫中，其他 SendGrid 用戶在我們最近的 Hacktoberfest 期間幫助貢獻了這些模板。

自定義粘貼模板

一旦你有粘貼模板的本地副本，在你喜歡的代碼編輯器中打開它們（我推薦 VSCode 或 Atom；它們都是免費的）。

我建議從 base.html 開始，因為它包含許多其他模板中的大部分可重用組件。 這些模板都共享一個共同的 HTML 結構，雖然文檔中有一些基本樣式，但大多數樣式都是內聯的。

當您梳理 HTML 時，您會注意到許多 HTML 註釋來指示塊的開始和結束位置。 這些是重要的註釋，有助於您瀏覽模板並開始修改它們。

您還會注意到 HTML 元素上的背景顏色、排版、間距等樣式。我鼓勵您對它們進行試驗，以了解它們如何改變這些模板的外觀和感覺。

將您的徽標添加到模板中

您要做的第一件事就是將粘貼模板徽標替換為您自己的徽標。 您可以通過搜索其 HTML 註釋快速找到徽標塊，指示它的起始位置：

在此塊中，您需要找到錨標記 (<a> ) 並將 HREF 更改為您的 URL。 默認情況下，模板應鏈接到 SendGrid 的主頁。

調整好 URL 後，讓我們將粘貼徽標替換為您自己的。 我建議將您的徽標存儲在您可以輕鬆鏈接到的位置，例如您的網絡服務器或 CDN。 替換 logo src 後，調整內聯樣式以使寬度/高度正確——這將取決於 logo 的縱橫比。 默認情況下，粘貼徽標是 48px 正方形，因此我們將寬度樣式設置為 48px。

例子：

在此示例中，粘貼徽標 URL 與一些寬度樣式一起被引用，以將其設置為所需的 48 像素大小。 為您自己的徽標調整這些值，以確保它看起來清晰。

自定義背景顏色

如上所述，在各種塊上設置背景顏色以建立粘貼模板的默認樣式（灰色和白色）。 您可以輕鬆更改（並且應該）以匹配您的品牌顏色。

在這些樣式之間跳轉的最簡單方法是使用您的編輯器搜索內聯樣式、bgcolor 和背景顏色。 這些屬性的值可以替換為十六進制值（例如#000000）或顏色名稱（例如黑色）。 在完成這些更改時，如果您在首選瀏覽器中打開其中一個模板並在進行更改時刷新，則很容易保持對事物的關注。

例子：

在此示例中，body 標記的樣式為淺灰色背景色。 此顏色值和模板中的其他顏色值應自定義以匹配您的品牌。

自定義按鈕

按鈕是電子郵件模板中最常見的界面組件之一。 您將使用這些作為號召性用語，突出顯示您希望用戶執行的最重要的操作，例如確認他們的電子郵件地址。

默認情況下，Paste 的按鈕被設計為藍色塊，帶有一個微妙的邊框半徑來圓角。 自定義這些按鈕以匹配您的品牌類似於我們已經對模板的背景顏色進行的修改。 使用我們為您添加的 HTML 註釋搜索該塊：

我們有幾個應用了白色背景的表格單元格 (#ffffff) 以在按鈕周圍創建塊，但您需要在下面找到具有以下樣式的表格單元格。

例子：

在這個例子中， <td> 有一個 bgcolor 用於設置按鈕的顏色，以及一個用於巧妙地圓角的邊框半徑。 嘗試使用這些樣式，為您的按鈕打造與您的品牌相匹配的獨特外觀。

我們按鈕的第二部分是上面顯示的表格單元格中的錨點 (<a> )。

此錨點控制單擊按鈕時的 URL，以及標籤的文本樣式。 您可以調整樣式以根據您的喜好和與您的品牌相匹配的內容來調整標籤。

自定義排版

默認情況下，粘貼模板通過 Google 字體加載到 Web 字體 Source Sans Pro 中。 您可以使用來自 Google 集合的不同網絡字體，或者使用當今大多數計算機上的標準字體集（Arial、Georgia、Times 等）。

如果您打算使用不同的網絡字體，請查看我的電子郵件開發提示和技巧帖子以獲得一些有用的指導。 確保您梳理 HTML 以查找任何引用字體系列的內聯樣式，並根據您的偏好進行調整。

例子：

在這個例子中，<td> 有一個 font-family 樣式設置為使用 Source Sans Pro，在 webfont 不加載的情況下有一些回退到更標準的字體。

結束思想

我希望這些指針可以幫助您自定義這些模板以適合您的品牌，並讓您在 SendGrid 的平台上啟動和運行。 將來，我希望通過更多模板來擴展我們的電子郵件模板庫，同時也是一個構建工具，可以使定製過程更快。

如果您在此過程中遇到任何問題，請針對 GitHub 存儲庫提交問題，如果您想貢獻，請提交拉取請求。 尋找更多模板進行試驗？ 試用 SendGrid 的免費響應式 HTML 電子郵件模板。