超Q弹的点击弹性选择展开,来啦!最多支持4列

原创 收藏 评论
举报 2022-07-08

好久没有给大家推荐点击展开的效果啦。

今天要给大介绍的是个不一样的展开,那就是点击弹性选择展开

下面请选一个点击带回家:

1657259338887.gif

点击弹性选择展开,是一种在屏幕同一行可以点击选择、展开效果略带Q弹感的展开,非常适合答题创意或介绍多个产品时使用。

目前在 iPaiban Pro 黑科技编辑器上线了6种点击弹性选择展开效果,分别为支持2组、3组和4组点击选择的,对应的又有不支持展开后点击收回以及支持展开后点击收回的。

1657259406052.gif

组合:点击弹性选择展开组合(无限次、两组/二组/2组)

编号:11157(组合)

1657259439728.gif

组合:点击弹性选择展开组合(无限次、三组/3组)

编号:11176(组合)

1657259473257.gif

组合:点击弹性选择展开组合(无限次、四组/4组)

编号:11180(组合)

不支持收回的相信大家自己都能明白如何制作,而支持收回的在上传素材和设置触发区时可能有一些容易忽视的地方,以「点击弹性选择展开组合(无限次、2组)」组合为例,给大家奉上详细教程。

工具:iPaiban Pro黑科技编辑器,网址:x.iPaiban.com

组合:点击弹性选择展开组合(无限次、两组/二组/2组)

编号:11157(组合)

第1步:选择组合

点击编辑器左侧「组合」按钮,在「花样展开」分类中找到「点击弹性选择展开组合(无限次、两组/二组/2组)」组合,或者直接搜索编号11157,点击选择。

第2步:进入组合编辑模式

如下所示,点击「点击此处配置」,进入组合编辑模式。


在组合编辑模式中,我们需要设置展开前和展开后的内容,其中滑动布局下就是展开后的内容。

第3步:设置展开前的内容及调整点击收回触发区

点击一下「展开前」区域,页面右侧便会出现上传图片的提示。

「展开A头图」和「展开B头图」分别对应展开前的两张图片:


而「展开A尾图+展开B尾图」可能和大家想的不大一样,它是指每个展开后的最后一张图片,点击这张图片展开便会收回。

这里有几个展开就要上传几张展开尾图,即便2个展开中使用的同一张尾图,也应上传2张同样的尾图哦。

此时你会看到「展开前」区域显示了刚上传的展开后尾图,这是为了方便调整点击收回的触发区。

双击图片,在出现的弹窗中红色色块代表了触发区域,直接拖拉就能调整。注意,调整好一张图片的触发区后,别忘了点击「为所有图片应用此配置」,这样所有尾图的触发区便设置好了。另外触发区最好不要超出图片边缘,否则可能出现触发问题。


第4步:设置展开后的内容

展开后的内容可以嵌套各种组件。

点击「增加·槽」便是增加一个小组件位,我们在左侧组件中找到需要的组件后通过拖拽的方式将组件放进小组件位中,然后对组件进行编辑上传素材就可以了。

添加槽(小组件位)-拖动组件到组件位中-上传图片,每需要一个样式都是按照这3步走,动图演示:


两个展开中设置的内容高度最好保持一致。

第5步:设置展开时长和背景

展开后的内容全部编辑好后,点击页面右侧的红色三角形按钮,就会看到背景图和展开时长的设置。图文展开的时长根据内容长度来定,内容长时间就长些,反之时间就短一些。


大家注意没有,图文在展开的过程中会露出部分背景,默认不设置就是白色背景。


如果想要显示其他颜色背景可以上传与展开内容高度一致或高于内容的背景图,但大部分情况下我们可能不好判断展开内容的总长度,背景图短了又会露出白色背景。所以这里更建议大家在退出组合后,直接为图文设置一个「全局背景」,更加方便一些。


第6步:导入公众号后台

注意,该组合的点击收回效果在编辑器中无法正常预览。

所以一切设置完毕后 ,请点击页面左上角的「保存并退出」按钮,「预览草稿」中的内容没有问题,然后点击「导入微信平台」就可以了。


导入时使用 iPaiban Pro 小助手更方便哦,最新v2.0版本的小助手还支持一键打包下载图文图片素材,非常方便,安装教程戳:《iPaiban Pro小助手v2.0来啦!》

如果还想编辑里面的内容,可再次点击「点击此处配置」进入。


制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:x.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可开始注册并使用。

新用户在「新手礼包」可领取3天企业标准版会员体验权,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。



● SVG 黑科技交互排版????????

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)