SVG左右滑動(dòng)排版教程(svg滑動(dòng)效果樣式)
蘋(píng)果、人民日?qǐng)?bào)、GQ實(shí)驗(yàn)室都在用的黑科技左右滑動(dòng)排版是怎么做的?這種圖文互動(dòng)排版可以在135編輯器中使用svg左右滑動(dòng)樣式來(lái)制作,操作非常簡(jiǎn)單,不用代碼就能輕松就能做出高大上的交互排版。
左右滑動(dòng)的微信公眾號(hào)黑科技排版沒(méi)有大家想象中那么復(fù)雜,這里給大家介紹兩種非常簡(jiǎn)單的制作方式:1、使用135編輯器的svg樣式;2、使用SVG編輯器
1、選擇樣式。你可以在135編輯器中搜索關(guān)鍵詞“滑動(dòng)”、“左滑”、“右滑”找到合適的滑動(dòng)樣式。也可以直接搜索樣式ID,本文用到的兩款樣式分別是:左滑ID99860、右滑ID100068。
2、上傳素材,注意圖片素材的尺寸要一致。你可以使用工具欄上的【多圖上傳】將所有素材圖,一次性都導(dǎo)入編輯器。
3、導(dǎo)入圖片后,將所有圖片選中,點(diǎn)擊左側(cè)的滑動(dòng)樣式,即可實(shí)現(xiàn)秒刷效果。你可以通過(guò)手機(jī)預(yù)覽查看滑動(dòng)的效果,左滑右滑的方法都是一樣的。
最后還有一件事情非常重要,引導(dǎo)讀者去滑動(dòng)圖片。如果你沒(méi)有在圖片上做提示,那么一定要在滑動(dòng)樣式的頂部或者底部,用文字做個(gè)提示 ↓
區(qū)別于svg樣式,SVG編輯器里的效果更加復(fù)雜,編輯的自由度也更大,還可以進(jìn)行組合套用
1、選擇左滑/右滑的素材,在編輯器 的右側(cè)點(diǎn)擊【添加圖片】,上傳滑動(dòng)的圖片素材
2、在編輯器右側(cè)點(diǎn)擊【添加圖片】按鈕,按住Ctrl鍵批量選擇并上傳圖片
3、圖片上傳完成,預(yù)覽無(wú)誤后,可以使用【同步】或【導(dǎo)出】功能,保存到微信公眾號(hào)平臺(tái)
在SVG編輯器中制作好SVG文章后,點(diǎn)擊上方的【導(dǎo)出】按鈕,復(fù)制該文章的代碼
打開(kāi)微信公眾號(hào)平臺(tái),在圖文消息的編輯區(qū)使用Ctrl+V,將復(fù)制的代碼粘貼到文章中即可
今天的教程到此結(jié)束啦
還想學(xué)習(xí)哪些排版小技巧
記得來(lái)告訴小編噢~
- END -
立即登錄
- 雙十二電商活動(dòng)宣傳排版素材(電商商品促銷(xiāo)推廣模版樣式)
- 乞巧節(jié)微信公眾號(hào)推文排版素材(愛(ài)情浪漫活動(dòng)推廣文案)
- 二十四節(jié)氣立秋圖文排版素材(金黃色系立秋推文文案模版)
- 八一建軍節(jié)紀(jì)念日推文排版樣式(光輝歷程文案宣傳模版)