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