今天三兒為大家?guī)淼膬善恼露紒碜匀赋财放?，雀巢的知名度就不用我多介紹了，那作為一個家喻戶曉的品牌，他們的宣傳推廣的文章又有哪些值得我們學習的呢，三兒都給大家拆解分析好了，就等大家來學習了解啦~

這兩篇文章都用到了同一款SVG效果——【圖片彈窗自定義多個觸發(fā)區(qū)】，兩篇文章根據(jù)不同的主題，將此效果與推文內(nèi)容結(jié)合的非常到位，話不多說，接下來三兒就帶大家來認識這款寶藏SVG。

gif圖展示

《黑色的Ta，最百塔》

點擊綠色文字跳轉(zhuǎn)

這篇文章介紹的是雀巢咖啡系列產(chǎn)品，圍繞這個主題，推文分享了多款咖啡產(chǎn)品與其他食材進行DIY的可能性，產(chǎn)品介紹圖并沒有平鋪直敘展示，而是做成卡片的形態(tài)，并借助圖片彈窗SVG，引導用戶點擊之后再彈出咖啡產(chǎn)品圖。提高了推文的神秘感和趣味性。

從上述兩個案例中我們可以看出，圖片彈窗SVG效果具有很強的可玩性，無論是應用在產(chǎn)品介紹類推文，還是合作宣傳推文都能適配。它能將需要展示的主體圖片，隱匿在首圖下，從而引起用戶的閱讀興趣，促進用戶去點擊查看。大家如果在排版過程中想要增加文章的趣味性和創(chuàng)意度，不妨多試試這個效果。

此款SVG除了做成卡片、盲盒外，還可以做成紅包等形式，具體要根據(jù)自己的內(nèi)容主題來設計。將此款效果應用在節(jié)日節(jié)氣的推文中，比如新年拆紅包、雙11購物節(jié)的拆禮盒等，或者品牌方的新產(chǎn)品宣傳推文中。

這兩篇案例用到的SVG效果為圖片彈窗自定義多個觸發(fā)區(qū)，ID：55，三兒為大家講解此款效果具體的制作方法。

在SVG頁面的【互動效果】的搜索框輸入55，或者是“圖片彈窗”關(guān)鍵詞，放入到編輯頁面。

① 首先為SVG組件添加前景圖。比如像雀巢案例一中的推文所用到的前景圖為動態(tài)的卡片形式。

② 準備好需要彈出的圖片，大家可以根據(jù)自己前景圖來設置。將彈出的圖片添加進去。每添加一張彈出圖片，就要為其設置控制熱區(qū)。

③ 拖拽紅色虛線部分調(diào)整控制區(qū)域的范圍，移動熱區(qū)到你需要用戶點擊的位置。

④ 注意：如果需要放置gif圖，gif圖的寬高不能超過1000px。

⑤ 制作完成之后，選擇右上角的【同步】【導出】到微信公眾號后臺即可。