山里人家H5營銷案例

山里人家成立于2015年，一直專注于陜南土蜂的養殖與土蜂蜜的供應，山

里人家綠色生態園（淘寶企業店）是在淘寶端的官方網店，主營陜南土蜂蜜及山

區特產，包括：土蜂蜜、老樹核桃、農家香菇、西鄉茶葉等系列商品。小張是山

里人家的新媒體運營，為了更好地傳播網店中秋活動信息，小張想利用H5進行

營銷，H5營銷實施包括了前期策劃、頁面制作、頁面推廣三部分，小張也會從

這三方面入手實施本次H5營銷。

一、前期策劃

1.確定主題

為吸引用戶關注，主題需突出產品特點的同時增加創意、避免抄襲，由于

H5是用來宣傳公司網店中秋活動的，小張將H5的主題確定為“中秋好禮”來推

廣中秋節的活動。

2.確定內容

在確定內容時主要從用戶角度考慮，通過圖文并茂的方式添加用戶互動功能,

促使用戶點擊，提高粉絲活躍度和忠誠度，根據本身產品定位以及受眾的特性設

計H5作品，在文案設計中抓住用戶心理，添加用戶感興趣的詞匯，同時可根據

用戶群的不同特點編寫標題。

3.確定形式

H5的形式非常多樣，幻燈片式、小游戲、海報等各種形式，可以選擇最合

適的形式進行營銷。

4.傳播

目前比較常用的H5頁面推廣方式有公眾號的圖文群發推廣、微信群推廣、

線下二維碼推廣，以及KOL（意見領袖、微博達人）轉發和投稿等。

二、H5頁面制作

小張通過互聯網搜索得到許多H5制作的工具，如MAKA、易企秀、equb360

意派等。按照H5工具的自主定制空間及使用方式等可將H5工具分為以下三類,

完全自主定制（如epub360、vxplo互動大師等）、自主定制類、非自主定制類,

不同類型有各自的優缺點。完全自主定制和自主定制類的優勢是完全自主定制，

可操作性強，劣勢在于功能較多，學習時間成本較大。非自主定制類的優勢在于

操作簡單、隨學隨用，劣勢為只能選擇使用，不能定制功能和交互效果。

經過一番比較，小張選擇了易企秀這款目前國內市面上使用最頻繁的，功能

上比較齊全H5微場景制作工具進行中秋活動H5頁面的制作。

通過互聯網搜索“易企秀”或者直接輸入網址（）進入易企

秀官網。

秋節”找到了一款比較適合網店活動的中秋H5模板。

推薦“一

進入后臺編輯頁面，根據自己的需求制作H5頁面，可以通過調整H5頁面的

文案、圖片、特效、背景音樂或者添加組件、表單等方式創作企業所需的H5頁

面。

L基礎元素編輯

（1）文本：點擊制作頁面導航欄上的“文本”按鈕添加文本信息，使用編

輯器可以對添加的文本進行字體、顏色、大小、方向、邊框、陰影等的更改或者

為文本信息添加動畫效果，使文本信息更加生動、美觀并與H5頁面保持統一。

（2）圖片：點擊制作頁面導航欄上的“圖片”按鈕添加圖片，可以直接使

用圖片庫中的圖片（有些需要收費）或者上傳本地圖片進行使用。對于添加的圖

片，可以利用編輯器進行圖片翻轉、重力感應開關，調整圖片大小、位置、邊框

樣式和陰影，在功能設置模塊還以對“點擊圖片”的效果進行設置，包括有鏈接

（即點擊跳轉至鏈接網站）、頁面（點擊跳轉至H5的第X頁）、電話等。

正版圖片X

BB片庫線皇B9標車通

我的陶英

我的上傳三陽’《;，/

k3人

濤0

今夕公飛.7季。

領到】頁版

圖6-22H5制作頁面優化圖片

（3）頁面背景：點擊制作頁面導航欄上的“背景”按鈕或者制作區右側快

捷菜單的方塊圖標調整背景，可以直接使用圖片庫中的圖片（有些需要收費）或

者上傳本地圖片進行使用。

圖6-23H5制作頁面添加背景

（4）音樂：點擊制作頁面導航欄上的“音樂”按鈕或者制作區右側快捷菜

單的音符圖標添加背景音樂，選擇音樂時也可以通左下角的“添加外鏈”輸入音

樂鏈接地址添加背景音樂。

圖6-24H5制作頁面添加背景音樂

2.互動模塊

使用易企秀時，可以通過點擊制作頁面導航欄上的“組件”或者“表單”按

鈕選擇想要添加互動模塊，如視頻、鏈接、電話、倒計時等組件，聯系人、輸入

框、提交按鈕、留言板、單選、多選、下拉列表等表單。

圖6-25H5制作頁面添加組件

（1）視頻

點擊“組件”下的視頻選項即可為當前H5頁面添加視頻，添加視頻時要注

意粘貼的視頻代碼需要原視頻的通用代碼，目前優酷、土豆、騰訊視頻在手機端

的體驗較好，在選擇視頻時最好選擇此三類網站的視頻鏈接。添加好視頻鏈接后,

可以為視頻添加封面圖片，封面圖片可以通過圖片庫或者本地上傳獲得，完成后

可以利用編輯器對視頻播放窗口進行背景顏色、大小、位置、邊框、陰影的調整

以及動畫效果的添加。

.四大名助富萬I

□?0?osyt

機看分享給好友1133評論24萬播放

I分享到微博卜

把視頻貼到Blog或BBS怎么貼?手機掃碼分享視頻

二維碼24時內有效

通用代碼:<iframeheight=498width=510src="http://p復制

flashitfeftt：/player.php/sid/XMTC復濤!|

html代碼:<embedsrc=*/player復制

已分享V土下載跚用手機看

復制Flash地址/TPout.sv

復制HTML代碼<embedsrc="http://static.video.qq

復制通用代碼一[

分享xz率1663條評論67.78萬次播放

第一步,X

掃一掃，輕松分享貼到論壇或博客

（2）鏈接

點擊“組件”下的鏈接選項即可為當前H5頁面添加鏈接，鏈接按鈕包括“點

我購買”、“點開鏈接”、“馬上購買”、“關注我們”和自定義圖片鏈接五種，鏈接

可以是跳轉到場景外的外部鏈接，也可以場景內的內部導航鏈接。

（3）留言板

點擊“表單”下留言板選項即可為當前H5頁面添加留言板用以和用戶互動，

留言板可以用來展示用戶的留言并引導用戶留言，成功添加留言板后可以利用編

輯器對留言板的配色風格、按鈕文案、大小、位置等進行調整。

3.特效

點擊制作頁面導航欄上的“特效”按鈕選擇想要添加的特效，添加的特效是

針對當前頁面的頁面特效，會在設置界面展示，包括涂抹、指紋、環境、飄雪、

煙花、漸變、重力感應、砸玻璃等特殊效果。

T1ass刀9o千rv

文本圖片背耳杳樂形狀擔件表單特效

4.H5頁面預覽和設置

H5頁面制作完成后可以通過右上角的“預覽和設置”按鈕預覽H5的呈現效

果，發現有不足的地方可以繼續編輯優化，在設置頁面可以設置H5的標題、描

述，微信分享時顯示的標題、描述以及頁面翻頁方式等。

5.H5頁面發布

H5頁面制作完成后，點擊右上角的發布進入發布頁面，在發布頁面可以獲

取H5的二維碼和地址鏈接用于推廣宣傳。

WUttitcmcs

三、H5頁面的投放推廣

H5頁面制作完成后，小張就考慮到了H5頁面推廣的問題，經過查閱書籍和

分析成功的H5營銷案例，小張將H5頁面推廣渠道總結如下。

1.線上線下的結合推廣

線下活動推廣，掃二維碼玩游戲送禮品，通過H5有趣的互動可以引發粉絲

互動轉發朋友圈、微博等。H5獨特價值在于除了具備傳播性以外，它通過用戶

的重復使用行為使得H