「100张图片排版攻略」微信推文多图布局技巧+135SVG轮播组件

解决领导要求的多图排版难题!详解135编辑器布局功能、滑动组件与135SVG轮播(组件ID:1047/1016/92),支持一行多列布局设置、无缝图片排列与动态轮播效果,让高密度图片推文既美观又不冗长。


图片排版

图片好多怎么排?

领导的想法太多,好难好烦

上过班的朋友们都懂

领导的想法是一天一个样

这不领导突发奇想

想要推文里塞满100张图片

要是直接把这些图粗暴堆在一起

不仅内容冗长

视觉上也显得乱糟糟

有没有什么办法

技能满足领导要的「信息密度」

又不让读者看着费劲?


这时候我们不妨试试

布局或SVG轮播组件



布局+图片
简约不简单


使用布局功能可灵活调整排版,比如支持一行两列、三列甚至四列的组合,列数完全能按你的想法来~展示效果如下👇


#布局展示
秋分节气简约日签手机宣传海报.png
你好十月节日祝福简约日签海报.png
十月你好节日日签简约海报.png



#如何添加布局


在编辑器页面样式展示区中的上方找到【布局】👉【基础布局】,再根据你的实际需求选一行X列的布局选项。


image.png


选择好布局后,在布局框中添加图片即可。


image.png


细心的朋友已经发现:这样直接上传图片时,图片挨得太密,排版看着也别扭。其实问题不止于此——加个背景会发现,还有「看不见」的缝隙。


image.png


#如何解决


给布局添加边框,设置边距、给插入图片设置【无缝】消除多余的缝隙。


*注:【边框】默认是【无边框】需要我们手动选择边框样式;

边距】分为【内边距】和【外边距】边距可以灵活设置【上下左右】


image.png


image.png












「布局+图片」的优劣

优:操作简单,展示较多图片

劣:展示图片数量有限——若每列放置的图片超过3张,图片会明显缩小

推荐指数:☆☆☆

适用范围:2-3张图的展示


滑动布局
数量upup
你好十月节日祝福简约日签海报.png
秋分节气简约日签手机宣传海报.png
十月你好节日日签简约海报.png
你好十月节日祝福简约日签海报.png
秋分节气简约日签手机宣传海报.png
十月你好节日日签简约海报.png
你好十月节日祝福简约日签海报.png
秋分节气简约日签手机宣传海报.png
十月你好节日日签简约海报.png
你好十月节日祝福简约日签海报.png

▶左滑查看图片◀


#如何添加滑动布局


在编辑器页面样式展示区的上方找到【布局】👉【滑动布局】


image.png


选中【滑动布局】后点击【编辑】进入滑动布局编辑页面,按需设置【竖向】或【横向】滑动。


image.png


image.png


点击左侧「+」新增画布,每块画布只传一张图,就能确保最终滑动图的尺寸最大化。


image.png


点击【滑动布局】进入编辑页面,插入一行单列布局,再传图片,设置布局格式,点击【完成】即可。


*小提示:格式设置与【布局+图片】一致,需注意清除图片缝隙,以及设置图片的边框和边距。



·












「滑动布局+图片」的优劣

优:图片无数量限制,展示图片尺寸大、信息承载更丰富

劣:展示形式单一,不够新颖,易让读者审美疲劳

推荐指数:☆☆☆☆

适用范围:大于3张图片的展示


SVG轮播组件
高级有趣
·


扑克牌淡入循环轮播 ID:1047




SVG轮播效果有很多,给大家展示几个还不错的效果👇


·


多图轮播(摇摆换图)

组件ID:1016


·

多图轮播(变速左右轮播)

组件ID:1015


·


多图轮播(变速上下轮播)

组件ID:1014


·


多图轮播+分块移入

组件ID:1006


·


弹动轮播(多图横向//可加特效)

组件ID:92


#如何使用SVG轮播组件


从135编辑器页面进入svg编辑器页面,搜索关键词【轮播】就能找到相关svg组件,再根据对应组件的要求上传轮播素材。


image.png


image.png


注意事项

*🚩注意:带SVG效果的文章不要直接【复制】【粘贴】到微信公众号后台,可能会导致效果失效。


正确操作:先把微信公众号授权给135编辑器,再用【保存同步】功能同步到微信后台,这样能确保svg效果完美呈现。(也可以用插件,无需授权)


image.png


image.png












【轮播svg组件】的优劣


优:图片展示效果新颖、能承载多张图片、可玩性高、无代码基础也能轻松操作;

劣:对图片有要求(尺寸、格式、数量)部分效果仅支持双数图片;

推荐指数:☆☆☆☆☆

适用范围:创意图片展示、多图排版场景





END



相信聪明的你学完这几招

以后领导再让你排版多图文章

肯定游刃有余~



·


·



·



尾部备注.png




文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
分享到