公众号滑动布局怎么做?(滑动布局教程)

如果领导给你多张图片进行排版,还要求需要保证美观,你会如何应对?如果是三儿面对这种难题,我除了会考虑到滑动SVG组件外,还会想到更简洁的滑动布局。

滑动布局入口


在编辑器页面左侧的【样式】版块中,选择【布局】—【基础布局】—【滑动布局】,点击滑动布局就可以放入到编辑区域中。


image.png


选中滑动布局后打开滑动布局面板,选择【编辑】即可进入到滑动布局的编辑页面。


image.png


滑动布局面板


01
编辑内容


进入到页面之后,双击该页面即可进入到滑动布局的编辑界面。


image.png


此界面与我们的首页的编辑区是类似的,在这里面我们除了可以放置图片外,还可以放置像样式、模板以及你编辑好的文章内容。


image.png


排版好你的内容后,点击右侧的【完成编辑】即可,这就表示你设置好了滑动布局第一屏的内容。


image.png



02

添加/删除画布


一屏内容是无法实现左右滑动效果的,我们还需要增加多屏内容才可以,所以这时你就需要增加画布来继续排版其他内容。


你只需要点击画布旁边的+号就可以添加画布。


image.png


若想要删除画布,点击旁边的按钮即可进行删除。


image.png



03

滑动方向选择


我们的滑动布局可以实现两种滑动效果,左右滑动和上下滑动,想切换滑动方向就需要用到左侧顶部的方向选择,横向就代表左右滑动效果,竖向代表上下滑动效果。


image.png



04

宽度调整


滑动布局系统默认的宽度是100%,如果你觉得太宽了,可以设置百分比进行调整。


image.png



05

添加背景


我们还可以在滑动布局中为添加的图片、样式添加背景,包括动态背景、静态背景(渐变色、纯色、格子、波点等),以及自定义背景也能实现。


image.png


image.png



06

滑动效果展示



左右滑动↑




上下滑动↑


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