SVG左右滑動效果制作方法_左右滑動SVG圖文教程

蘋果、人民日報、GQ實驗室都在用的黑科技左右滑動排版是怎么做的?這種圖文互動排版可以在135編輯器中使用svg左右滑動樣式來制作,操作非常簡單,不用代碼就能輕松就能做出高大上的交互排版。


bige_0311172856_2435.png


左右滑動的微信公眾號黑科技排版沒有大家想象中那么復(fù)雜,這里給大家介紹兩種非常簡單的制作方式:1、使用135編輯器的svg樣式;2、使用SVG編輯器


一、使用135編輯器svg樣式



1、選擇樣式。你可以在135編輯器中搜索關(guān)鍵詞“滑動”、“左滑”、“右滑”找到合適的滑動樣式。也可以直接搜索樣式ID,本文用到的兩款樣式分別是:左滑ID99860、右滑ID100068。


微信截圖_20210311171834.png


2、上傳素材,注意圖片素材的尺寸要一致。你可以使用工具欄上的【多圖上傳】將所有素材圖,一次性都導(dǎo)入編輯器。


微信截圖_20210311171924.png


3、導(dǎo)入圖片后,將所有圖片選中,點擊左側(cè)的滑動樣式,即可實現(xiàn)秒刷效果。你可以通過手機預(yù)覽查看滑動的效果,左滑右滑的方法都是一樣的。


最后還有一件事情非常重要,引導(dǎo)讀者去滑動圖片。如果你沒有在圖片上做提示,那么一定要在滑動樣式的頂部或者底部,用文字做個提示 ↓


微信截圖_20210311172239.png


二、使用SVG編輯器


區(qū)別于svg樣式,SVG編輯器里的效果更加復(fù)雜,編輯的自由度也更大,還可以進行組合套用


1、選擇左滑/右滑的素材,在編輯器 的右側(cè)點擊【添加圖片】,上傳滑動的圖片素材


640.png


2、在編輯器右側(cè)點擊【添加圖片】按鈕,按住Ctrl鍵批量選擇并上傳圖片


640 (1).png


3、圖片上傳完成,預(yù)覽無誤后,可以使用【同步】或【導(dǎo)出】功能,保存到微信公眾號平臺


三、如何將SVG上傳保存到為公眾號按鈕

在SVG編輯器中制作好SVG文章后,點擊上方的【導(dǎo)出】按鈕,復(fù)制該文章的代碼


打開微信公眾號平臺,在圖文消息的編輯區(qū)使用Ctrl+V,將復(fù)制的代碼粘貼到文章中即可




今天的教程到此結(jié)束啦

還想學(xué)習哪些排版小技巧

記得來告訴小編噢~


- END -


點擊135編輯器獲取更多資訊

文章申明:本文章轉(zhuǎn)載自互聯(lián)網(wǎng)公開渠道,如有侵權(quán)請聯(lián)系我們刪除
文章評價
登錄后可以評論
立即登錄
小伍資深編輯
共638篇文章
最近文章
更多
  • 雙十二電商活動宣傳排版素材(電商商品促銷推廣模版樣式)
  • 乞巧節(jié)微信公眾號推文排版素材(愛情浪漫活動推廣文案)
  • 二十四節(jié)氣立秋圖文排版素材(金黃色系立秋推文文案模版)
  • 八一建軍節(jié)紀念日推文排版樣式(光輝歷程文案宣傳模版)
比格設(shè)計
熱門工具
135編輯器
領(lǐng)先的在線圖文編輯平臺原創(chuàng)樣式素材,一鍵套用
筆格設(shè)計
受歡迎的在線作圖網(wǎng)站,新媒體配圖、手機海報應(yīng)有盡有
筆格PPT
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營銷、私域流量運營——站式營銷管理平臺
推薦文章
用戶運營平臺產(chǎn)品設(shè)計指南
淺談用戶運營中的用戶分層
內(nèi)容運營:戴上寫作的六頂思考帽
5000字方法論:4個細節(jié),決定私域能不能賺錢
一個案例說明白用戶分析怎么用
22條視頻,漲粉12.6萬,一個女孩子在抖音靠洗車也能月入過萬!
高價值社群的5大核心關(guān)鍵
抖音賬號內(nèi)容自檢清單!
決定離職后,3天拿到offer的總結(jié)與反思!
【135早資訊】:教育部將徹查教材插圖問題;抖音6月1日起將對本地生活商家收取服務(wù)費
熱門素材樣式
運營導(dǎo)航
運營工具
分享到