# 【影片】【素材下載】中秋節行銷 EDM 模板設計教學 > 中秋節即將到來，本篇文章將帶你使用電子豹拖放式模板設計工具，從 0 到 1，手把手教你如何製作出一封精美的中秋節行銷電子報版型。 如果你想獲得更多的品牌創意，也歡迎參考最新文章：8 個中秋節行銷案例，激發創意靈感！打造引人注目的電子報 一、中秋節行銷 — 模板設計範例＆下載 如果你的中秋節 EDM 還沒準備好？我們提供你精美的 EDM 版型和素材！你只需要點擊下載按鈕，在電子豹平台上，html 編輯器直接貼上模板，並自行更換文字與上傳圖片，就能立即寄送給你的顧客，而且這是 RWD 響應式版型，不論在電腦或手機皆能完美呈現。  或者，你也能參考下方教學影片，學習使用電子豹的拖放式編輯器，下載 banner 圖片和套用參考色碼，你也能輕鬆設計出屬於你的電子報版型。 電子報範例 1 檔案下載 1.「html 編輯器」設計方法：下載中秋節 html 電子報版型 2.「拖放式編輯器」設計方法：下載中秋節 Banner（3張） 設計參考色碼： 星空藍（背景）：#0A057A 幽靜藍（區塊）：#EDF1FA 柚 **分類：** 電子報優化 **作者：** Bao **發布日期：** 2021-08-27T20:30:00.000+08:00 中秋節即將到來，本篇文章將帶你使用電子豹拖放式模板設計工具，從 0 到 1，手把手教你如何製作出一封精美的中秋節行銷電子報版型。 如果你想獲得更多的品牌創意，也歡迎參考最新文章：[8 個中秋節行銷案例，激發創意靈感！打造引人注目的電子報](https://blog.newsleopard.com/mid-autumn-marketing-showcase-inspire-creativity-and-create-eye-catching-email-marketing/?ref=cms.newsleopard.com) ## 一、中秋節行銷 — 模板設計範例＆下載 如果你的中秋節 EDM 還沒準備好？我們提供你精美的 EDM 版型和素材！你只需要點擊下載按鈕，在電子豹平台上，**html 編輯器直接貼上模板**，並自行更換文字與上傳圖片，就能立即寄送給你的顧客，而且這是 RWD 響應式版型，不論在電腦或手機皆能完美呈現。  或者，你也能參考下方教學影片，學習使用電子豹的**拖放式編輯器**，下載 banner 圖片和套用參考色碼，你也能輕鬆設計出屬於你的電子報版型。 ### 電子報範例 1 檔案下載 **1.「html 編輯器**」**設計方法**：**[下載中秋節 html 電子報版型](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2020/09/moon-festival-edm-template.zip?ref=cms.newsleopard.com)** **2.「拖放式編輯器」設計方法：[下載中秋節 Banner（3張）](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2020/09/moon-festival-banner.zip?ref=cms.newsleopard.com)** **設計參考色碼： **星空藍（背景）：**#0A057A** 幽靜藍（區塊）：**#EDF1FA** 柚香藍：**#353FF7** 柚鮮粉：**#FF897C** ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2020/09/moon-festival-edm-template.png) 中秋節電子報版型示範 ### 電子報範例 2 **檔案**下載**** ****1.「html 編輯器**」**設計方法**：[下載中秋節 html 電子報版型](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2020/08/2020-moon-festival-html.zip?ref=cms.newsleopard.com)** **2.「拖放式編輯器」設計方法：[下載中秋節（動態 Gif） Banner](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2020/08/moon-animate-600.gif?ref=cms.newsleopard.com)** **設計參考色碼：** 秋夜藍（背景）：**#0d508c** 柚子綠：**#9abf22** 月色橘：**#f2be00** ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2021/08/edm.gif) 中秋節電子報版型示範 ## 二、中秋節行銷 — 模板設計教學影片 電子報版型設計教學，在影片中以上方的第 2 個版型範例作為示範。 **前置作業建議 [0:00](https://www.youtube.com/watch?v=3J2jkka71Sg&t=0s&ref=cms.newsleopard.com)~** 1. 先準備好文字檔案： 1. 節慶文字 2. 祝褔的話或是 slogan 3. 簡短的文字敘述 4. 如果產品與節慶有關，可以準備簡單的產品文字敘述或圖片。如果無關，則可以將前面文字敘述增加，跟會員搏感情提升好感度。 5. 信件要用到的連結，也可以網址放在文字檔案中，製作的時候直接複製貼上。 2. 決定配色跟準備圖片： 1. 根據設計的節慶 banner 延續決定整體 edm 的配色。 2. 在節慶專屬的 edm 可以跳脫企業常用的配色，更能讓人耳目一新。以節慶的 banner 為主，與一般常態信件區隔，因此不一定要完全符合企業配色。 以中秋節為例，適合中秋節的配色，也可以參考中秋禮盒的顏色。 3. 只用一張圖片作為主視覺是沒有問題，另外有可能要準備搭配背景色的企業 logo。 4. 產品圖不要太多，同時增加文字敘述，有行銷商品或節慶促銷的區塊，也可根據配色事先做出圖片。若直接使用產品圖，也要進行微調。 **製作流程 [2:30](https://www.youtube.com/watch?v=3J2jkka71Sg&t=150s&ref=cms.newsleopard.com)~** 1. 基本設定： 1. 設定一欄 2. 調整背景色 2. 將元件都放上來 1.logo 2.圖片 3.副標題＋標題 4.段落文字 5.空間 6.雙欄設計 7.空間 8.Social icon 3. 上傳圖片 1. logo：深色背景要準備白色 logo。 2. 主視覺圖片：這邊是使用動態 GIF，吸引目光。 3. 主要產品圖-1和主要產品圖-2。特別注意長寬比要一致，如果只用文字敘述也可以提高進入主要頁籤的機會。 **細部設定 [6:10](https://www.youtube.com/watch?v=3J2jkka71Sg&t=370s&ref=cms.newsleopard.com)~** 1. logo：寬度設定 100~140 附上官網連結跟設定替代文字，示範設定為 130 區塊設定：上間距 0 下間距 24 2. 主視覺圖片：建議寬度 350~400 示範設定為 400 記得要加替代文字 區塊設定：上間距 40 下間距 24 3. 副標題＋標題：可以透過顏色跟字體大小區隔 區塊設定：上間距 0 下間距 0 4. 段落文字：可以視文案撰寫的部分調整大小 區塊設定：上間距 0 下間距 40 5. 空間 設定高度 40 將顯示背景色 6. 兩欄設計：注意顏色設定 產品1 副標設定：14 粗體 置中 **#9abf22** 標題設定：20 粗體 置中 **#3043ba** 文字設定：預設 置中 CTA 設計：圓角 25 置中 **#9abf22** 產品2 副標設定：14 粗體 置中 **#f2be00** 標題設定：20 粗體 置中 **#3043ba** 文字設定：預設 置中 CTA 設計：圓角 25 置中 **#f2be00** 7. 空間 設定高度 40 將顯示背景色。 8. Social Icon 請自行選擇，若沒有則前面的空間也可省略。 **最後說明事項 [17:50](https://www.youtube.com/watch?v=3J2jkka71Sg&t=1070s&ref=cms.newsleopard.com)~** 1. 主要區塊可以透過上下間距 設定上下距離 40 是為了讓視覺集中。 2. 單欄副標跟標題字體，影片中設定 18 跟 28 雙欄副標跟標題字體，影片中設定 14 跟 28 都需要根據文字微調。 3. 色碼可以整理起來複製貼上。 4. 段落文字跟CTA可以置中或靠左都可以測試看看 5. 如果使用比較淡的黃色/綠色文字顏色，可以用粗體提高辨識度。若是用在CTA上面，則可視情況加深，按鈕文字會比較明顯。 6. 背景色碼： 秋夜藍 **#0d508c** 柚子綠 **#9abf22** 月色橘 **#f2be00** 以上就是影片教學，製作中秋節慶電子報的設定步驟。 除了影片教學之外，接下來，透過電子豹平台的操作介面示範，逐一畫面說明操作步驟，從「新增活動」到「設計內容」到「試寄一封」，輕鬆完成專業的 Email 設計。 ## 三、中秋節行銷 — 拖放式編輯器步驟教學 ### **Step1. 新增活動** [新增活動頁面](https://app.newsleopard.com/campaign/new?utm_source=blog&utm_medium=post&utm_campaign=dnd_first_release&utm_content=how_to_use_drag_and_drop_editor-20190606) ### **1.1「新增活動」填寫基本資料，按下一步。** ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/1.1.jpg) ### **1.2 設計內容選擇「拖放式編輯器」。** ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/1.2.jpg) ### **Step2: 設計內容** ### 2.1 Email 整體設定 2.1.1 更改 email 背景顏色。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.2.jpg) ### 2.2 設計內容 2.2.1 拖拉左側的**「Logo」**設計元件至編輯器中。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.3.jpg) 2.2.2 點擊元件進入編輯狀態，並上傳 logo 圖片、填寫連結與描述文字(若不需要連結則不用填寫)。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.4.jpg) 2.2.3 點擊「Logo」設計元件的「圖片樣式」更改 logo 大小。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.5.jpg) 2.2.4 你可以調整上下間距，符合最適位置。確認無誤後，關閉編輯狀態。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.6.jpg) 2.2.5 拖拉左側的**「標題」**設計元件至編輯器中，編輯你的標題。(若需調整元件位置，你可以利用箭頭移動元件上下位置，或是直接按住 :: 拖動) ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.7.jpg) 2.2.6 點擊「標題」設計元件的「字體樣式」更改標題的字體大小、顏色及位置。確認無誤後，關閉編輯狀態。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.8.jpg) 2.2.7 拖拉左側的**「段落文字」**設計元件至編輯器中，編輯你的文案。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.9.jpg) 2.2.8 你可以利用「段落文字」設計元件的工具列，將文案加粗體、設連結/連結樣式、調整字體大小/樣式或插入自訂變數。確認無誤後，關閉編輯狀態。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.10.jpg) 2.2.9 拖拉左側的**「圖片」**設計元件至編輯器中，並更換圖片、點擊「圖片樣式」自訂你的圖片大小。確認無誤後，關閉編輯狀態。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.11.jpg) 2.2.10 拖拉左側的**「按鈕」**設計元件至編輯器中，為你的 email 加上 call to action。連結記得不要忘記填寫喔！ ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.12.jpg) 2.2.11 你可以點擊「按鈕」設計元件的「按鈕樣式」，編輯你的按鈕顏色或點擊「字體樣式」編輯按鈕文字顏色等等。確認無誤後，關閉編輯狀態。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.13.jpg) 2.2.12 拖拉左側的**「分隔線」**至編輯器中，可以在「樣式設定」裡面設定顏色。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.16.jpg) 2.2.13 使用**「段落文字」**設計元件增加聯絡方式。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.17.jpg) 2.2.14 最後，拖拉左側的**「社群連結」**設計元件至編輯器中，填上你的社群連結，讓會員輕易追蹤你。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/2.18.jpg) ### **Step3: 試寄一封及完成**寄送 利用上方工具列的**「試寄一封」**功能，寄給自己檢查看看**內容、文字、連結**有沒有問題，建議用電腦、手機載具都閱讀看看，都沒問題的話就可以按編輯器的**「完成」**，回到建立活動排定時間寄信啦！ ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/buttons1-1200x200.jpg) ## 四、中秋節行銷 — 品牌案例參考 > [中秋節行銷怎麼做？13 個大品牌案例不藏私公開](https://blog.newsleopard.com/2020-moon-festival-marketing-13-brand-examples/?ref=cms.newsleopard.com) > [拆解 UNIQLO 製作獨樹一格中秋節 EDM 的祕技！](https://blog.newsleopard.com/2020-moon-festival-email-marketing-learn-from-uniqlo/?ref=cms.newsleopard.com) ### 沒有設計靈感嗎？參考看看別人電子報怎麼做吧！ ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2019/06/Screen-Shot-2019-06-26-at-3.12.41-PM-1500x486.png) 看看用電子豹模板製作出來的範例（附贈版型下載） 1. 範例一：[｜小器生活通信｜簡單而重要的事](https://newsleopard.com/newsleopard/email-examples/thexiaoqi?ref=cms.newsleopard.com) 2. 範例二：[【買犬糧抽紅包】愛泥愛泥新春優惠，現在買犬糧最划算](https://newsleopard.com/newsleopard/email-examples/abaopet?ref=cms.newsleopard.com) 3. 範例三：[MALOJA 機能與外型兼具的潮流品牌](https://newsleopard.com/newsleopard/email-examples/ulohas?ref=cms.newsleopard.com) 4. 範例四：[風和日麗不是不報｜☁城市漂浮著，城市有養分☁](https://newsleopard.com/newsleopard/email-examples/agoodday?ref=cms.newsleopard.com) * * *