- beehiiv Blog 中文
- Posts
- 如何為你的電子報添加完美的背景
如何為你的電子報添加完美的背景
提升電子報背景圖片的最佳工具
Nicola Vaughan & Lenore Sterner
January 22, 2023
本文已更新以確保其準確性和相關性。
在製作電子報時，最容易被忽視的 元素 是什麼？不出所料，就是背景。
背景很容易被電子報的主角給掩蓋：行動呼籲或是引人注目的開場段落。一個吸引人的背景圖片能夠徹底改變你的電子報，不僅能讓它更加引人注目，還能讓你在溝通中加入更有效、更具視覺吸引力的行動呼籲。
添加背景圖片可能需要使用一些程式碼，或是在像 Canva 這樣的圖形設計軟體中製作圖片，但成果絕對值得。當背景圖片運用得當時，它能將你的電子報提升到全新境界，讓讀者眼前一亮。
今天，我們來聊聊背景圖片 - 為什麼要使用它們、如何添加，以及提供大量範例，讓你在下次發送電子報時能獲得靈感。
目錄
電子報背景圖片（為什麼它們很重要？）
所以你已經開始製作你的電子報了...但為什麼要考慮使用背景圖片呢？嗯，如果你想吸引讀者的注意力，背景圖片可以產生微妙但強大的效果。
使用高品質的背景圖片可以讓你的電子報更吸引眼球、更具視覺質感，並且看起來更專業。
吸睛奪目
這是毋庸置疑的。相較於單調的白色背景，具有背景圖片的電子報無疑更能吸引眼球。
你可以運用顏色或動畫來吸引訂閱者的注意力，讓他們繼續閱讀你的電子報，而不是急著回到收件匣。
視覺質感
在你的電子郵件中使用背景圖片來創建層次感，可以增加質感並使你的郵件更加吸引人。你可以在背景圖片上覆蓋行動呼籲按鈕或文字，或是使用應景的背景圖片，再在上面放置其他元素。
在你的電子郵件中建立層次和質感，可以提升視覺效果，並讓你為訂閱者提供更好的行動呼籲和內容。如果處理得當，還能提高可讀性。
專業版
不可否認，有精美背景的電子郵件看起來比沒有背景的更加專業。
只要你手邊有一系列漂亮的背景圖片，就算不是電子郵件專家也能製作出專業水準的電子報。精美的背景圖片不僅能讓你的電子報看起來更加精緻，還能展現出你對訂閱者品牌印象的重視。
你可以從多個網站取得背景圖片，包括 Freepik 、 Shutterstock 和 Campaign Monitor 。
以下是 Pottery Barn 如何使用圖片作為背景的範例：
這張圖片讓他們能夠展示完成的室內設計作品，藉此宣傳他們的設計服務。
背景圖片電子報（入門指南）
那麼，你要如何開始為下一期電子報設計背景圖片呢？最好的方法是先研究一些品牌，並檢視你收到的電子郵件，看看其他公司是如何運用背景圖片的。
以下是幾個例子：
Priceline 運用圖層（照片覆蓋在繪製的藍色弧形上方）來創造視覺趣味，並吸引你的目光。
Honey 的背景在主要圖形設計後方有許多細微的插圖，創造出非常酷炫的效果。
David’s Bridal 透過在背景圖片上添加粉紅色調，營造出一種很酷的氛圍。背景圖片中的女性模特兒穿著一件「場合禮服」，展示了他們不僅僅販售婚紗，還有其他類型的禮服。
Prose 透過產品在圖片中的擺放位置，將背景帶到前景，創造出一種很酷的效果，讓文字看起來彷彿真的在產品後面。
你有很多方式可以做到這一點。舉例來說，你可以選擇一個品牌色調來決定背景圖片的樣式，並在所有電子報中保持一致。另一種做法是選擇隨季節變化的背景，根據不同節日來更換。
你甚至可以使用動態 GIF 來讓你的電子郵件看起來更具互動性。不論你選擇什麼作為背景圖片的靈感來源，請確保它們都有其目的，且不會分散讀者對電子報主要行動呼籲或焦點的注意力。
電子報長型背景圖片（撰寫 HTML 程式碼）
如果你打算為你的電子郵件背景圖片自行撰寫 HTML 程式碼，有些重要的事項你需要注意。請留意，目前你無法在 beehiiv 上使用這種特定的 HTML 片段，但別擔心。繼續往下閱讀，你會找到解決方案。
表格
在撰寫 HTML 程式碼時使用表格是你安排背景資料的方式。表格由欄和列組成，它決定了內容如何呈現。
以下是一個表格 HTML 的範例，展示了與電子郵件相關的寬度、樣式和內距。你也可以加入預設的背景顏色，以防任何圖片無法正常顯示。
<；table role="presentation" width="860" style="width：860px；" cellpadding="25" cellspacing="60" border="5" align="left">；
<；tr>；
屬性
HTML 中的屬性是一些額外的資訊，用來決定內容在你的電子郵件中如何呈現。這可能包括你希望如何對齊背景。舉例來說：
<；align="center">；
另一方面，如果你已經有想要用作電子郵件背景的圖片，你可以用這種方式將連結加入你的 HTML 中：
<；background= " www.imagelink.com ">；
樣式（Style）是另一個需要考慮的重要屬性。樣式用來決定電子郵件背景的細節，例如顏色。以下是一個如何使用樣式來設定電子郵件背景為粉藍色的例子：
<；body style="background-color：powderblue；">；
大小
在使用 HTML 實作背景圖片時，你需要考慮到尺寸問題。尺寸不僅決定了圖片的高度和寬度，還決定了它在電子郵件中的位置。
你也可以決定在撰寫較長的電子郵件時是否要重複使用背景圖片。以下的程式碼指定背景圖片會垂直重複，直到完全填滿父元素：
<；背景重複：垂直重複（background-repeat： repeat-y）>；
以下是一些可以在 HTML 中使用的尺寸元素的其他例子：
<；background-size： contain；>； （保持背景圖在原始大小範圍內）
<；img src= "link" alt="範例文字" width="800" height="600">； （ 限制圖片尺寸（Restrict Image To Specific Size））
現在使用 HTML 編碼來設置電子報的長背景圖應該變得更容易了，不過別忘了注意你的電子報圖片的最佳尺寸。
你也可以使用 W3Schools 來測試你的 HTML 程式碼，這樣你就能看到它在下一封電子郵件中的呈現效果。
電子報背景圖片尺寸（使用平台製作）
在使用平台來設置背景圖片時，你需要仔細考慮所要使用的背景圖片大小。
如果圖片太大，可能無法載入，導致你的電子郵件看起來空蕩蕩的，毫無生氣。相反地，如果圖片太小，在嘗試符合電子郵件欄位大小時，可能會看起來被拉伸或出現像素化的情況。
再者，電子報背景圖片的大小對於寄送成功率有重大影響。電子郵件的容量，也就是郵件中所有檔案的大小總和，決定了你的郵件是否能如你所願地被順利寄出。
在你的電子郵件中設定預設背景顏色總是值得的，以防圖片無法載入。這樣可以確保當圖片沒有顯示時，你的電子郵件背景不會自動變成白色。
有些使用者不會自動下載電子郵件中的圖片，因此設定背景顏色能確保所有訂閱者都能看到引人注目的背景。
如何為你的 beehiiv 電子報添加背景圖片
目前，beehiiv 還不允許你使用 HTML 來為你的電子報添加背景圖片，但這並不意味著你的電子報就不能看起來很專業。別擔心，我有個簡單的替代方案可以幫你解決這個問題。
舉例來說， Creator Spotlight 使用奶油色背景，而不是圖片。他們採用的是一個微妙的游標 gif，讓黑色和橘色在視覺上成為主角：
結果既引人注目、有趣，又充滿 格調 。
與其使用 HTML 作為自訂程式碼來新增背景，不如在 Canva 或 Figma 中創建一個背景圖片，並直接在圖片上添加你的文字。然後你就可以直接將這個圖片崁入到你的電子報中。
請務必記住 電子郵件範本尺寸 ，並確保你的電子郵件容量（所有檔案的總大小）不要太大，因為這可能會影響郵件的送達率，或導致你的郵件在 Gmail 中被截斷。
用 beehiiv 讓你的電子報成長
眾所周知，beehiiv 是一個專為成長而設計的電子報平台，提供絕佳的變現機會，如「beehiiv 廣告網路」和「推廣」功能 – 讓你能夠掌控全局，「賺錢」的同時創作你熱愛的內容。
最棒的是，beehiiv 提供了一個免費試用 的機會，不需要信用卡就能體驗所有功能，看看是否適合你。立即開始你的免費試用吧。
