無限選擇器效果制作教程：公眾號排版必備技巧
掌握新媒體運營的高級技巧，學習如何在135編輯器中制作吸引眼球的無限選擇器效果。本文提供詳細步驟和圖解，教你如何通過SVG編輯器和互動組件，實現(xiàn)點擊標簽切換內(nèi)容的動態(tài)效果。提升你的新媒體內(nèi)容互動性，讓讀者體驗更上一層樓。
朋友們大家好，我是三兒。
最近有不少朋友看到大牌都在制作無限選擇器效果，點擊頂部不同標簽，底部隨機對應變化，有些是變化對應的圖，有些是變成滑動承載更多的內(nèi)容，就像下面「字節(jié)跳動招聘」這篇推文一樣??
那么這個效果我們應該如何制作呢？別著急，往下看開啟我們今日的學習之旅。
注：本文素材來源均來自字節(jié)跳動招聘，僅做教學使用。
在135編輯器頁面左側找到「SVG編輯器」
進入SVG編輯器后在左側選中「互動效果」，在搜索框搜索組件豎向多標簽點擊切換（自定義觸發(fā)）或組件ID：311
點擊組件進入SVG編輯器中，這個時候我們需要看清楚素材要求。
需要注意的是上傳的背景圖需要有點擊切換的標簽，圖文內(nèi)容的高度，不能超過背景減去標簽區(qū)域的高度。
看起來有些難以理解？素材圖貼上大家應該就能明白了。
背景圖高度1530px
標簽高度330px
滑動展示高度不超過背景圖減去標簽高度
1200px
準備好素材圖后，我們就可以按照要求上傳素材圖了。
點擊「新增板塊」添加「背景圖」「調(diào)整觸發(fā)區(qū)域」
根據(jù)我們前面gif圖展示，本文切換后是一個雙層滑動，所以我們在「編輯圖文內(nèi)容」板塊中需要添加一個雙層滑動，這里我們選擇「背景固定前景自動居中橫向雙層滑動」組件id：198
我們分別上傳背景圖和滑動圖，根據(jù)實際需要設置滑動方向。
細心的朋友已經(jīng)發(fā)現(xiàn)，完成滑動制作后最后的內(nèi)容圖遮擋住了點擊切換標簽的位置。
大家不要懷疑自己做錯了，我們現(xiàn)在只需要調(diào)整下「圖文內(nèi)容起始位置」即可
這個數(shù)值不是一定的，每個素材內(nèi)容不同調(diào)整的數(shù)值也會產(chǎn)生相應的變化，在本文我們調(diào)整到20%比較合適。
調(diào)整后，就能發(fā)現(xiàn)內(nèi)容板塊沒有對頂部標簽切換區(qū)域有所遮擋，剩下僅需要我們重復上述步驟添加內(nèi)容即可。最后讓我們來一起看看效果吧??
在「編輯圖文內(nèi)容」板塊中
我們不僅可以添加雙層滑動
還能僅添加圖片
或是輪播抑或是帶有超鏈接的滑動圖
有非常多的組合等待著大家去探索
怎么樣今天這個效果
是不是既簡單又讓人眼前一亮
學會了大家就快到135編輯器中
動手操作吧
大家還有什么大牌效果想要學習的
可以在評論區(qū)留言噢
三兒會不定期的選擇寫教程哦
立即登錄
