掌握回力品牌同款公眾號(hào)SVG效果：點(diǎn)擊標(biāo)簽抽出卡片技巧
探索新媒體運(yùn)營(yíng)的創(chuàng)新排版技巧！本文深入解析回力品牌采用的點(diǎn)擊標(biāo)簽抽出卡片SVG效果，教你如何通過135編輯器實(shí)現(xiàn)這一互動(dòng)效果，提升文章吸引力。從效果講解到操作步驟，全面掌握這一高級(jí)感與實(shí)用性兼?zhèn)涞腟VG玩法，讓你的內(nèi)容在眾多公眾號(hào)中脫穎而出。立即閱讀，解鎖新媒體營(yíng)銷新技能！
嗨嘍，寶子們，三兒又來為大家推薦新的SVG組件玩法了，今天要為大家分享的是回力品牌都在用的點(diǎn)擊標(biāo)簽抽出卡片效果，此效果兼具高級(jí)感和實(shí)用性為一體，話不多說，趕緊開啟我們今天的學(xué)習(xí)之旅吧！
（來自回力公眾號(hào)）
這篇推文來自品牌回力，本文主要向大家介紹了同一款鞋子的不同色系及搭配。在展示鞋子的7款顏色時(shí)，他們以選色卡作為創(chuàng)意思路，將不同顏色鞋子的產(chǎn)品圖制作成一張張卡片來展示，并通過SVG效果來引導(dǎo)用戶點(diǎn)擊顏色標(biāo)簽，自行選擇查看。這種新穎的排版方式，不僅優(yōu)化了布局設(shè)計(jì)，還能給用戶眼前一亮的感覺，整體創(chuàng)意十足。
此款SVG效果叫做橫向無限次點(diǎn)擊標(biāo)簽抽出卡片，ID：241。它可以滿足用戶重復(fù)查看的需求，實(shí)用性高，除了用在這類主題以外，還可以用來展示人物介紹的內(nèi)容，或者介紹產(chǎn)品的功能。除了回力品牌有用到此SVG外，商場(chǎng)也使用過該效果。三兒為大家找來了悅匯廣場(chǎng) 南海的案例。
（來自悅匯廣場(chǎng) 南海公眾號(hào)）
這個(gè)商場(chǎng)使用此效果，放在推文開篇位置，以圖片的形式，言簡(jiǎn)意賅地介紹了商場(chǎng)的春季主題活動(dòng)，比如服飾、餐飲等，既豐富了文章的表現(xiàn)形式，又讓用戶對(duì)推文整體內(nèi)容有一個(gè)大概的了解。
點(diǎn)擊135編輯器頁(yè)面左側(cè)，選擇SVG編輯器進(jìn)入界面，在【互動(dòng)效果】中搜索ID：241，找到該效果，點(diǎn)擊放入編輯界面。
放置好組件之后，就需要我們?yōu)榻M件添加圖片素材，包括背景圖和卡片區(qū)域的圖。
首先我們可以上傳背景圖。
接著添加卡片區(qū)域的圖片，在這一部分需要分別傳入一組標(biāo)簽圖和抽出圖，這篇推文中展示了七個(gè)不同顏色的產(chǎn)品，意味著就需要傳入七組標(biāo)簽圖+抽出圖。
上傳好一組圖片后，就可以先為標(biāo)簽圖和抽出圖調(diào)整定位，在X軸和Y軸的位置輸入合適的數(shù)值即可。
● X軸調(diào)整的是標(biāo)簽圖和抽出圖左右的位置。
● Y軸調(diào)整的是標(biāo)簽圖和抽出圖上下的位置。
在抽出圖部分，我們還需要為其設(shè)置返回的觸發(fā)區(qū)域，拖拽紅色虛線區(qū)域即可。
注：設(shè)置的返回區(qū)域的區(qū)域范圍不要和標(biāo)簽區(qū)域范圍重疊，不然效果會(huì)失效。
我們還可以調(diào)整抽出圖的方向是左還是右，一般情況下默認(rèn)為左側(cè)展示。
點(diǎn)擊【添加卡片】，即可繼續(xù)添加內(nèi)容，由于其他組標(biāo)簽圖和抽出圖的設(shè)置方式類似，這里就不做過多贅述。
組件全部設(shè)置完畢后，就可以選擇右上角的【導(dǎo)出】【同步】到公眾號(hào)后臺(tái)。
以上就是三兒分享的全部?jī)?nèi)容了
如果覺得還不錯(cuò)
記得點(diǎn)個(gè)贊+在看哦
還有什么想看想學(xué)的
歡迎在評(píng)論區(qū)留言哦
*以上所涉及的素材僅供學(xué)習(xí)交流使用，侵聯(lián)刪
立即登錄
