「100張圖片排版攻略」微信推文多圖布局技巧+135SVG輪播組件

解決領(lǐng)導(dǎo)要求的多圖排版難題!詳解135編輯器布局功能、滑動(dòng)組件與135SVG輪播(組件ID:1047/1016/92),支持一行多列布局設(shè)置、無縫圖片排列與動(dòng)態(tài)輪播效果,讓高密度圖片推文既美觀又不冗長(zhǎng)。


圖片排版

圖片好多怎么排?

領(lǐng)導(dǎo)的想法太多,好難好煩

上過班的朋友們都懂

領(lǐng)導(dǎo)的想法是一天一個(gè)樣

這不領(lǐng)導(dǎo)突發(fā)奇想

想要推文里塞滿100張圖片

要是直接把這些圖粗暴堆在一起

不僅內(nèi)容冗長(zhǎng)

視覺上也顯得亂糟糟

有沒有什么辦法

技能滿足領(lǐng)導(dǎo)要的「信息密度」

又不讓讀者看著費(fèi)勁?


這時(shí)候我們不妨試試

布局或SVG輪播組件



布局+圖片
簡(jiǎn)約不簡(jiǎn)單


使用布局功能可靈活調(diào)整排版,比如支持一行兩列、三列甚至四列的組合,列數(shù)完全能按你的想法來~展示效果如下??


#布局展示
秋分節(jié)氣簡(jiǎn)約日簽手機(jī)宣傳海報(bào).png
你好十月節(jié)日祝福簡(jiǎn)約日簽海報(bào).png
十月你好節(jié)日日簽簡(jiǎn)約海報(bào).png



#如何添加布局


在編輯器頁(yè)面樣式展示區(qū)中的上方找到【布局】??【基礎(chǔ)布局】,再根據(jù)你的實(shí)際需求選一行X列的布局選項(xiàng)。


image.png


選擇好布局后,在布局框中添加圖片即可。


image.png


細(xì)心的朋友已經(jīng)發(fā)現(xiàn):這樣直接上傳圖片時(shí),圖片挨得太密,排版看著也別扭。其實(shí)問題不止于此——加個(gè)背景會(huì)發(fā)現(xiàn),還有「看不見」的縫隙。


image.png


#如何解決


給布局添加邊框,設(shè)置邊距、給插入圖片設(shè)置【無縫】消除多余的縫隙。


*注:【邊框】默認(rèn)是【無邊框】需要我們手動(dòng)選擇邊框樣式;

邊距】分為【內(nèi)邊距】和【外邊距】邊距可以靈活設(shè)置【上下左右】


image.png


image.png












「布局+圖片」的優(yōu)劣

優(yōu):操作簡(jiǎn)單,展示較多圖片

劣:展示圖片數(shù)量有限——若每列放置的圖片超過3張,圖片會(huì)明顯縮小

推薦指數(shù):☆☆☆

適用范圍:2-3張圖的展示


滑動(dòng)布局
數(shù)量upup
你好十月節(jié)日祝福簡(jiǎn)約日簽海報(bào).png
秋分節(jié)氣簡(jiǎn)約日簽手機(jī)宣傳海報(bào).png
十月你好節(jié)日日簽簡(jiǎn)約海報(bào).png
你好十月節(jié)日祝福簡(jiǎn)約日簽海報(bào).png
秋分節(jié)氣簡(jiǎn)約日簽手機(jī)宣傳海報(bào).png
十月你好節(jié)日日簽簡(jiǎn)約海報(bào).png
你好十月節(jié)日祝福簡(jiǎn)約日簽海報(bào).png
秋分節(jié)氣簡(jiǎn)約日簽手機(jī)宣傳海報(bào).png
十月你好節(jié)日日簽簡(jiǎn)約海報(bào).png
你好十月節(jié)日祝福簡(jiǎn)約日簽海報(bào).png

?左滑查看圖片?


#如何添加滑動(dòng)布局


在編輯器頁(yè)面樣式展示區(qū)的上方找到【布局】??【滑動(dòng)布局】


image.png


選中【滑動(dòng)布局】后點(diǎn)擊【編輯】進(jìn)入滑動(dòng)布局編輯頁(yè)面,按需設(shè)置【豎向】或【橫向】滑動(dòng)。


image.png


image.png


點(diǎn)擊左側(cè)「+」新增畫布,每塊畫布只傳一張圖,就能確保最終滑動(dòng)圖的尺寸最大化。


image.png


點(diǎn)擊【滑動(dòng)布局】進(jìn)入編輯頁(yè)面,插入一行單列布局,再傳圖片,設(shè)置布局格式,點(diǎn)擊【完成】即可。


*小提示:格式設(shè)置與【布局+圖片】一致,需注意清除圖片縫隙,以及設(shè)置圖片的邊框和邊距。



·












「滑動(dòng)布局+圖片」的優(yōu)劣

優(yōu):圖片無數(shù)量限制,展示圖片尺寸大、信息承載更豐富

劣:展示形式單一,不夠新穎,易讓讀者審美疲勞

推薦指數(shù):☆☆☆☆

適用范圍:大于3張圖片的展示


SVG輪播組件
高級(jí)有趣
·


撲克牌淡入循環(huán)輪播 ID:1047




SVG輪播效果有很多,給大家展示幾個(gè)還不錯(cuò)的效果??


·


多圖輪播(搖擺換圖)

組件ID:1016


·

多圖輪播(變速左右輪播)

組件ID:1015


·


多圖輪播(變速上下輪播)

組件ID:1014


·


多圖輪播+分塊移入

組件ID:1006


·


彈動(dòng)輪播(多圖橫向//可加特效)

組件ID:92


#如何使用SVG輪播組件


從135編輯器頁(yè)面進(jìn)入svg編輯器頁(yè)面,搜索關(guān)鍵詞【輪播】就能找到相關(guān)svg組件,再根據(jù)對(duì)應(yīng)組件的要求上傳輪播素材。


image.png


image.png


注意事項(xiàng)

*??注意:帶SVG效果的文章不要直接【復(fù)制】【粘貼】到微信公眾號(hào)后臺(tái),可能會(huì)導(dǎo)致效果失效。


正確操作:先把微信公眾號(hào)授權(quán)給135編輯器,再用【保存同步】功能同步到微信后臺(tái),這樣能確保svg效果完美呈現(xiàn)。(也可以用插件,無需授權(quán))


image.png


image.png












【輪播svg組件】的優(yōu)劣


優(yōu):圖片展示效果新穎、能承載多張圖片、可玩性高、無代碼基礎(chǔ)也能輕松操作;

劣:對(duì)圖片有要求(尺寸、格式、數(shù)量)部分效果僅支持雙數(shù)圖片;

推薦指數(shù):☆☆☆☆☆

適用范圍:創(chuàng)意圖片展示、多圖排版場(chǎng)景





END



相信聰明的你學(xué)完這幾招

以后領(lǐng)導(dǎo)再讓你排版多圖文章

肯定游刃有余~



·


·



·



尾部備注.png




文章申明:本文章轉(zhuǎn)載自互聯(lián)網(wǎng)公開渠道,如有侵權(quán)請(qǐng)聯(lián)系我們刪除
比格設(shè)計(jì)
熱門工具
135編輯器
領(lǐng)先的在線圖文編輯平臺(tái)原創(chuàng)樣式素材,一鍵套用
筆格設(shè)計(jì)
受歡迎的在線作圖網(wǎng)站,新媒體配圖、手機(jī)海報(bào)應(yīng)有盡有
筆格PPT
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營(yíng)銷、私域流量運(yùn)營(yíng)——站式營(yíng)銷管理平臺(tái)
推薦文章
用戶運(yùn)營(yíng)平臺(tái)產(chǎn)品設(shè)計(jì)指南
淺談?dòng)脩暨\(yùn)營(yíng)中的用戶分層
內(nèi)容運(yùn)營(yíng):戴上寫作的六頂思考帽
5000字方法論:4個(gè)細(xì)節(jié),決定私域能不能賺錢
一個(gè)案例說明白用戶分析怎么用
22條視頻,漲粉12.6萬,一個(gè)女孩子在抖音靠洗車也能月入過萬!
高價(jià)值社群的5大核心關(guān)鍵
抖音賬號(hào)內(nèi)容自檢清單!
決定離職后,3天拿到offer的總結(jié)與反思!
【135早資訊】:教育部將徹查教材插圖問題;抖音6月1日起將對(duì)本地生活商家收取服務(wù)費(fèi)
熱門素材樣式
運(yùn)營(yíng)導(dǎo)航
運(yùn)營(yíng)工具
分享到