高效排版技巧:如何优雅地在推文中展示100张图片

掌握这些排版技巧,让你的推文在视觉上脱颖而出!本文介绍多种布局和图片展示方法,包括布局+图片、滑动布局+图片和svg轮播组件+图片,帮助你在推文中高效展示大量图片,提升用户体验。适合新媒体运营者和设计师阅读,让内容更加吸引人。

朋友们大家早上好啊


最近有朋友问三儿:领导想要在推文中放很多很多图,应该怎么排版。


如果只是将图片简单堆砌在文章后面,文章会显得冗长,排版单一也不好看。


这个时候我们可以使用布局或图片相关的svg组件。



布局+图片


一张一张放图片,内容展示少,用户读取的信息也少,而布局可以灵活排列,可一行两列、三列、四列、甚至是五列效果如下👇



# 如何添加布局


在编辑器页面样式展示区中的上方找到【布局】👉【基础布局】,根据各自的需求,选择一行x列的布局选项。



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



但如果我们就这样简单放置图片肯定是不行的,三儿给图片加个背景,问题就会立马显露出来。



大家看到了吧,放置图片后边框内还有多余的空白,图片与图片之间紧密相连不够好看。


# 如何解决


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


*注:【边框】样式中默认是【无边框】所以需要我们手动选择相应的边框样式;

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





设置好后就能得到如下效果👇。



【布局+图片】的优劣


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


劣:展示图片数量有限,一旦一列x图,这个x的内容超多3张,图片大小将显著变小


推荐指数:☆☆☆


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



滑动布局+图片


若我们想要插入图片数量不限,尺寸还要足够的大,我们有办法实现吗?当然可以,如下👇


右滑查看更多海报


# 如何添加滑动布局


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



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



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


*注:格式设置方式与【布局+图片】相同,都需要注意清楚去除图片缝隙,以及设置图片边框、边距



·


【滑动布局+图片】的优劣


优:图片无数量限制,展示图片尺寸大、信息多


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


推荐指数:☆☆☆☆


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



svg轮播组件+图片


想要让人眼前一亮又要插入多张图片,那么svg轮播组件一定不可错过,效果如下👇



·

svg组件 顶图固定底图横向滚动播放 ID:224



·

svg组件 横向图片停顿式放大轮播 ID:253



·

svg组件 抽拉式多图左右自动轮播 ID:219



·

svg组件 横向停顿式图片轮播 ID:166



·

svg组件 多图弹动轮播(横向/带特效) ID:94


# 如何使用轮播svg组件


通过135编辑器页面进入svg编辑器页面,搜索关键词【轮播】便可得到轮播相关的svg组件,根据每个组件具体要求上传轮播素材。





*注意:带有svg效果的文章不可以直接【复制】【粘贴】到微信公众号后台,会导致效果无法实现。


正确操作是微信公众号授权给135编辑器后,使用【保存同步】到微信后台,这样可以确保svg效果完美呈现。




【轮播svg组件】的优劣


优:图片展示效果新颖、展示图片数量多、可玩性高、代码0基础也能轻松上手


劣:对图片有一定的要求如大小、图片格式、数量(有些效果只能双数图片)


推荐指数:☆☆☆☆☆


适用范围:创意图片展示、多图展示



以上就是今天的全部内容啦

跟着三儿学更多有趣好玩的

排版技巧

大家还有什么

想看想学的

记得在评论区留言

三儿都会看到哦

我是爱你们的三儿~



·EN

文章排版由135编辑器提供技术支持

 ■ ■ 




文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
分享到