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