如何美化你的國(guó)際站客戶通EDM營(yíng)銷信郵件

阿里巴巴國(guó)際站的客戶通EDM是阿里大力推廣的一個(gè)新式功能，從呱呱落地到茁壯成長(zhǎng)也走過(guò)了一段不長(zhǎng)不短的歷程。在客戶通EDM里有模板管理的功能模塊，官方預(yù)設(shè)了幾個(gè)默認(rèn)模板，樣式和風(fēng)格都比較簡(jiǎn)潔化。

而郵件營(yíng)銷的表層形式主要有兩種，一種就是偏傳統(tǒng)的開發(fā)信形式，以純文本+數(shù)張產(chǎn)品圖為郵件內(nèi)容的表達(dá)形式，這種郵件叫做文本郵件。還有一種更新穎和豐富表達(dá)的形式，是基于HTML5代碼框架支持的郵件內(nèi)容的輸出形式，叫做HTML郵件，也稱為富媒體郵件，HTML富媒體郵件營(yíng)銷。

這篇文章為主的祥助分享一下如何拖拽式設(shè)計(jì)一封自己的HTML富媒體郵件，作為阿里客戶通EDM開發(fā)信的新穎新式來(lái)開發(fā)和營(yíng)銷客戶，提高郵件的內(nèi)容表達(dá)，用戶體驗(yàn)和轉(zhuǎn)化意向。

阿里巴巴國(guó)際站客戶通

營(yíng)銷郵件模板設(shè)計(jì)

01

富媒體郵件

HTML是超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language),是寫網(wǎng)站前端頁(yè)面的框架語(yǔ)言，目前的國(guó)際通用協(xié)議版本為HTML5。HTML郵件簡(jiǎn)而言之，就是通過(guò)HTML代碼來(lái)排版和編輯郵件的，這樣你的郵件在客戶視角看來(lái)就不再是一大堆純文本，而是含有網(wǎng)頁(yè)排版樣式的一個(gè)單頁(yè)面。

文本郵件形式的優(yōu)點(diǎn)非常明顯，在于郵件內(nèi)容簡(jiǎn)潔，一目了然，符合傳統(tǒng)習(xí)慣；但HTML富媒體郵件形式則在于內(nèi)容表達(dá)的豐富化。根據(jù)國(guó)外知名郵件營(yíng)銷服務(wù)商Hubsopt做的純文本VS HTML郵件測(cè)試，參與測(cè)試的人有2/3的人表示更偏好閱讀HTML富媒體類郵件。

為什么選擇HTML郵件，而不是直接簡(jiǎn)簡(jiǎn)單單的純文本郵件？這個(gè)在祥助看來(lái)，和2G，3G，4G，5G的網(wǎng)絡(luò)技術(shù)發(fā)展帶來(lái)的變遷一樣，從以前2G時(shí)代的文本，3G時(shí)代的圖片，再到現(xiàn)在4G和5G時(shí)代的視頻,直播，VR/AR的技術(shù)變革是一樣的。用戶的落地體驗(yàn)用戶審美偏好和使用習(xí)慣是一樣的道理。純本文形式一成不變的現(xiàn)象也是會(huì)跟著變化的，不再是郵件開發(fā)的唯一模板形式。 

大家郵箱里經(jīng)常能收到海外的廣告營(yíng)銷信，大多數(shù)都是HTML富媒體形式的郵件，特別是一些商城站點(diǎn)的群發(fā)營(yíng)銷郵件，非常具有可觀性和整體美感。最近阿里巴巴國(guó)際站的客戶通EDM里的官方模板，也屬于HTML郵件形式的一種。

02

設(shè)計(jì)郵件樣式

排版和設(shè)計(jì)HTML郵件是靠HTML5代碼的編輯來(lái)完成的，如果懂HTML代碼的朋友可以用內(nèi)聯(lián)樣式來(lái)排版出這樣的頁(yè)面。當(dāng)然跨境E站的這篇文章的側(cè)重點(diǎn)并不是讓大家都學(xué)HTML入門然后寫代碼，所以我們側(cè)重推薦一個(gè)可在線拖拽式+可視化編輯和設(shè)計(jì)HTML郵件的在線平臺(tái).

平臺(tái)登錄： https://www.benchmarkemail.com/cn?p=1013689

(復(fù)制到瀏覽器地址欄訪問(wèn)， 登錄benchmarkemail這個(gè)網(wǎng)站注冊(cè)一個(gè)賬號(hào)并按照流程完成賬號(hào)的激活。)

接下來(lái)開始進(jìn)行基礎(chǔ)賬號(hào)配置： 

Benchmarkemail提供了三種編輯器方式：拖拽式編輯器，自行設(shè)計(jì)HTML，純文本版本。我們選擇拖拽式編輯器，這樣可以在線通過(guò)鼠標(biāo)托拽方式來(lái)設(shè)計(jì)HTML郵件的內(nèi)容表達(dá)，并且可以導(dǎo)入官方提供的郵件模板。

設(shè)置基本郵件數(shù)據(jù)，如郵件名稱，寄件人信息等待，選項(xiàng)還提供了Google Analystic網(wǎng)址跟蹤（需要按照提示說(shuō)明進(jìn)行配置才可使用）等可選選項(xiàng) 

選擇聯(lián)絡(luò)人名單：新建一個(gè)聯(lián)絡(luò)人名單，點(diǎn)擊新增聯(lián)絡(luò)人到此名單，復(fù)制粘貼想要作為收件方客戶的郵箱。這里建議先只增加一個(gè)自己的其他郵箱，接收郵件做測(cè)試和查看。

03

拖拽式郵件設(shè)計(jì)

配置完上面的郵件基礎(chǔ)信息后會(huì)進(jìn)入到拖拽式編輯器，先根據(jù)想要的版式選擇頁(yè)面的排版形式，選擇完畢后進(jìn)入編輯器頁(yè)面。左側(cè)是可添加的元素，右側(cè)是可編輯的區(qū)域，從左側(cè)將需要的元素模塊如單圖，托拽到右側(cè)的編輯器區(qū)域，然后按提示添加對(duì)應(yīng)尺寸的圖片。這樣依次操作進(jìn)行填充，就可以完成一封HTML的郵件設(shè)計(jì)。點(diǎn)擊全局樣式還可以修改郵件的底色，字號(hào)等全局信息，進(jìn)行優(yōu)化。

如果不想自行拖拽式進(jìn)行設(shè)計(jì)，點(diǎn)擊排版切換到排版區(qū)域，再點(diǎn)擊模板，從里面選擇一封符合產(chǎn)品或類目的郵件模板進(jìn)行導(dǎo)入。點(diǎn)擊模板庫(kù)的載入更多，加載顯示更多的郵件模板，總體的模板庫(kù)還是挺豐富的。導(dǎo)入模板后編輯器區(qū)就是一封完整的HTLM郵件了，點(diǎn)擊對(duì)應(yīng)的區(qū)域，可進(jìn)行文本，圖片的修改。

官方提供的模板庫(kù)有不少樣式精美的單頁(yè)富媒體郵件樣式，有適合B2B開發(fā)信的，有適合B2C產(chǎn)品聚合展示的，大家根據(jù)需要自己選擇。

Tips：導(dǎo)入模板后可以對(duì)樣式進(jìn)行二次調(diào)整，比如文本大小，顏色等

04

修改郵件代碼

將編輯完成的郵件點(diǎn)擊進(jìn)行發(fā)送，發(fā)送至之前填寫好的測(cè)試郵件接收人郵箱，這樣你的郵件就會(huì)收到你發(fā)出的富媒體郵件。

 點(diǎn)開收到的郵件后點(diǎn)擊再次編輯，切換到HTML模式，即可獲得郵件的HTML源源代碼。

 將源代碼全選-復(fù)制，粘貼到你的HTML代碼編輯器，可以是Dreamweaver，可以是Sublime Text 3（如何安裝和配置Sublime Text 3：運(yùn)營(yíng)必備工具-Sublime Text 3的安裝，漢化與配置），也可以是HbuilderX（祥助目前正在使用的），也可以是其他編輯器，甚至Text文本文檔也可以。

因?yàn)锽enchmarkemail的超鏈接跳轉(zhuǎn)都會(huì)經(jīng)過(guò)它做一層跳轉(zhuǎn)，而阿里國(guó)際站不支持外部鏈接，所以不做修改直接粘貼的話圖片會(huì)被bypass而不顯示

所以建議這里做如下修改操作：

使用F12審查元素工具分別一一找到圖片的url復(fù)制

再去源代碼里ctrl+F粘貼查找定位到代碼行

將圖片在圖片銀行對(duì)應(yīng)的超鏈接替換掉代碼行的這一行url（重要）

Buy Now按鈕，產(chǎn)品圖片等對(duì)應(yīng)的產(chǎn)品跳轉(zhuǎn)目標(biāo)超鏈接也是一樣的道理，重新修改為阿里國(guó)際站你店鋪產(chǎn)品的對(duì)應(yīng)鏈接。

如果你會(huì)HTML代碼修改，還可以自行調(diào)試前端顯示的顏色，樣式，排版，位置等效果，進(jìn)行更深一步的自定義優(yōu)化。

05

配置客戶通模板

阿里國(guó)際站后臺(tái)-客戶通EDM的-模板管理-新建模板，切換到源代碼模式粘貼我們?cè)O(shè)計(jì)好的郵件樣式內(nèi)容的代碼，保存為草稿或直接發(fā)布。

之后點(diǎn)擊預(yù)覽客戶通的郵件內(nèi)容，就可以看到這個(gè)設(shè)計(jì)好看的產(chǎn)品展示樣式了，當(dāng)我們做營(yíng)銷郵件的操作后，客戶端郵箱收到看到的內(nèi)容也是一模一樣的樣式的。

對(duì)富媒體郵件和純文本郵件的建議：祥助個(gè)人是建議可以二者搭配并用，HTML郵件主要以多產(chǎn)品展示型的郵件模板或自行拖拽式設(shè)計(jì)產(chǎn)品展示模板，來(lái)展示公司的多樣化產(chǎn)品，多用在一些節(jié)日，店慶，產(chǎn)品推廣宣傳場(chǎng)景。文本郵件走傳統(tǒng)式的開發(fā)思路和應(yīng)用場(chǎng)景。

（來(lái)源：為主的祥助）
以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果網(wǎng)立場(chǎng)！如有侵權(quán)，請(qǐng)聯(lián)系我們。