SVG跳動效果按鈕制作小技巧(SVG跳轉(zhuǎn)互動效果)
胖友們大家好,我是三兒。馬上要過年了,隨手點進一篇公眾號推文,都能看到各大品牌在依賴超鏈接和小程序做轉(zhuǎn)化。
因為在推文里加入一個超鏈接或者小程序卡片,相比掃描二維碼,是更加直接的轉(zhuǎn)化方式。
不過,這里通常還需要加入一個引導(dǎo)動作,來引導(dǎo)用戶來發(fā)出點擊動作,進入活動落地頁購買商品。
?常見的引導(dǎo)有文字引導(dǎo),比如【點擊查看】【關(guān)注我們】:
樣式ID:102759
樣式ID:103546
樣式ID:102593
?還有這種各大品牌推文里用得比較多的按鈕引導(dǎo):
樣式ID:99159
樣式ID:99161
?另外,還有一種更加吸引讀者注意力,轉(zhuǎn)化率更高的動態(tài)按鈕,這種動態(tài)按鈕可以用SVG編輯器來實現(xiàn):
SVG跳動效果按鈕
點擊跳轉(zhuǎn)超鏈接
【效果描述】:背景圖上可以放置1個或多個按鈕圖片,按鈕呈現(xiàn)放大縮小彈跳效果,按鈕圖片可設(shè)置超鏈接,不顯示微信默認(rèn)的跳轉(zhuǎn)圖標(biāo),可用于引導(dǎo)點擊參與營銷活動、點擊紅包等。
SVG跳動效果按鈕
點擊跳轉(zhuǎn)小程序
【效果介紹】:背景圖上可以放置1個或多個按鈕圖片,按鈕呈現(xiàn)放大縮小彈跳效果,按鈕圖片可設(shè)置小程序鏈接,不顯示微信默認(rèn)的跳轉(zhuǎn)圖標(biāo),可用于引導(dǎo)點擊參與營銷活動、點擊紅包等。
由于跳動按鈕-點擊跳轉(zhuǎn)超鏈接的操作相對簡單,三兒今天就用跳轉(zhuǎn)小程序的SVG來講講,看完你就都會操作啦!
跳動效果按鈕-點擊跳轉(zhuǎn)小程序
通過135編輯器左側(cè)入口進入svg編輯器
或者直接在瀏覽器輸入svg編輯器網(wǎng)址進入:
http://hackiots.com/svgeditor/
在『互動效果』欄目下的【小程序】里,點擊『跳動效果按鈕一點擊跳轉(zhuǎn)小程序』素材,將其添加到編輯區(qū)域。
在編輯器右側(cè)分別上傳背景圖和按鈕圖片;
上傳之后,鼠標(biāo)拖動按鈕圖片,將按鈕拖動到背景圖上適合的位置。
打開微信公眾號平臺,新建一篇圖文消息,點擊上方的【小程序】按鈕;
輸入需要添加的小程序名稱,點擊下一步;
任意選擇一種小程序的展示方式,并配置好相應(yīng)的文字或圖片,點擊確定;
完善標(biāo)題和封面圖后,點擊保存這篇文章;
從圖文素材中點擊剛剛保存的文章的標(biāo)題,進入文章的臨時預(yù)覽頁面,在網(wǎng)址欄中復(fù)制該文章的地址;
點擊小程序素材右側(cè)的【一鍵獲取代碼】按鈕,將預(yù)覽文章鏈接粘貼到輸入欄中;
點擊【開始獲取】按鈕,即可提取使用小程序的appid和路徑path。
【動畫時長】:按鈕每次動態(tài)放大縮小持續(xù)的時間,時長越大縮放越慢
【按鈕放大倍數(shù)】:按鈕放大時呈現(xiàn)的大小是實際大小的倍數(shù),數(shù)值越大,按鈕放大時的尺寸越大
制作好的SVG文章可以通過使用『同步』或『導(dǎo)出』功能,保存到微信公眾號平臺(ps:不知道咋同步和導(dǎo)出的胖友,點擊按鈕,根據(jù)提示操作即可)
注意:
由于素材特殊性,預(yù)覽時無法查看素材效果,需要通過同步功能保存成微信文章才能預(yù)覽真實效果
跳動按鈕-點擊跳轉(zhuǎn)超鏈接省略了獲取小程序appid和path的步驟,只需要輸入超鏈接即可。
以上就是今天的SVG教程
學(xué)會了的胖友趕緊實操起來吧
下一期你想看什么
歡迎在評論區(qū)留言哇~
·END·
文章排版由135編輯器提供技術(shù)支持
■ ■ ■ ■
立即登錄
- 2023霜降節(jié)氣海報合集,給你專屬秋天的靈感!
- 寒露節(jié)氣免費手機海報模板分享
- 2023中秋節(jié)精美海報大放送,尊的都很好看!
- 不看會后悔系列!2023國慶節(jié)精美海報模板分享!