职贝云数AI新零售门户

标题: 微信公众号点击后展开更多内容是怎样做的？ [打印本页]

作者: 花开馥郁 时间: 2023-3-13 12:53
标题: 微信公众号点击后展开更多内容是怎样做的？
效果https://mp.weixin.qq.com/s/Nm_McN_EbM_oEsCmLTbvkA
这种点击第一张图后，自动展开底下的更多内容，是怎样做？哪位大神教教我☺

作者: jCgT25J 时间: 2023-3-13 12:53
嗨喽，这题我会，我来为题主解答，推文中的效果是利用SVG 编辑器制作而成，整体不难，只要准备好图片，使用上对应的SVG组件就可以实现，具体操作步骤我就放下面了。
这种是利用了SVG编辑器中的点击直接展开效果，在咱们135编辑器的SVG编辑器中就有对应组件，我将网址链接附在这里：
在线SVG编辑器_微信公众号SVG互动效果制作-135编辑器点击进入到SVG编辑器之后，可以在【互动效果】—【组合】中点击展开，找到点击直接展开效果，也可以在搜索框输“点击直接展开”关键词或者是ID号57
点击此效果放在编辑页面，然后准备好需要的图片，包括首图和展开后的图片内容。

(, 下载次数: 6)
首图直接点击【添加图片】，添加好图片之后设置触发图片展开的热区，拖动红色虚线即可。

(, 下载次数: 5)

展开后的内容编辑，点击【编辑展开内容】进入，在这里面放入【无缝图】效果，ID为：136，放入图片进去，设置好之后点击右上角的完成即可。有多少张需要加入的图片，就选择几个无缝图效果。
展开的时间快慢可以通过动画时长来调节，数字越大时间越慢，数字越小，时间越快。

(, 下载次数: 5)
效果展示：

(, 下载次数: 5)
确认效果无误点击右上角的【导出】或【同步】到微信后台。

(, 下载次数: 5)
以上就是三儿分享的全部内容了，与任何排版问题都可以给三儿留言哦~

作者: awvm1 时间: 2023-3-13 12:54
(, 下载次数: 5)

上周直播分享给大家虎年新创意交互图文，想学更多知识的同学们可以点击预约今天的直播——多图排版案例分享。
今天这篇文字教程，
总结了之前直播的操作要点，

来一起跟着练吧！

以夏姿陈的案例为例：
点此查看原文案例：过春节，发红包

(, 下载次数: 5)

拆解

原文案例使用组合：点击展开（宽屏）和组件：无缝图，实现开启红包的交互效果。

(, 下载次数: 5)

交互效果录制图

(, 下载次数: 5)
制作

1、添加组合：点击展开(宽屏)（10307），点击编辑组合，添加展开前图片；

(, 下载次数: 5)

2、调整点击展开组合展开时长为3S；

(, 下载次数: 5)

3、在展开后编辑区拖拽添加组件：批量无缝图(全能)（10009），按顺序添加“2-1至2-5无缝图”，保存并退出组合编辑；

(, 下载次数: 5)

4、添加组件：全能无缝图（10028），添加图片“3无缝图”即可。

(, 下载次数: 5)

5、点击右侧“预览草稿”，可初步预览草稿效果（以导入公众号后台预览效果为准）。

(, 下载次数: 5)

(, 下载次数: 5)

导入公众号后台

6、在iPaiban Pro编辑器后台完成SVG交互图文后，点击右侧“导入微信后台”→点击“复制”，打开微信公众号后台新建图文，点击浏览器右上角iPaiban Pro 小助手图标→点击“导入代码”→粘贴代码→点击“清空导入”；

(, 下载次数: 6)

7、操作成功后，记得添加标题、封面和保存，最后发送到手机预览最终的效果。
下期直播预告

1月5日（周三）直播教学多图排版创意案例扫码预约学习SVG交互效果

(, 下载次数: 5)

(, 下载次数: 5)

作者: YYGG9b6gv 时间: 2023-3-13 12:55
这一类属于比较基础的 SVG 互动，有很多编辑器可以免费实现。
比如登录 e2.cool 黑科技编辑器，选择「伸长动画」大类中的「点击-伸长」组件：

(, 下载次数: 5)
准备好自己的素材。以题主提到的图文为例，素材情况并不复杂：

(, 下载次数: 5)
然后依次把素材在操作台传入对应的组件中就可以了：

(, 下载次数: 5)
然后把编辑器封装好的代码导出：
黑科技编辑器｜如何将互动代码导入图文任何公众号运营中的疑难杂症，都欢迎邀请我们回答哦。
这里是 E2 编辑器（e2.cool），会的比别人多一点。

(, 下载次数: 5)

作者: D8LiO0t 时间: 2023-3-13 12:55
题主说的这种效果一般叫做「点击图文展开」，是一种非常火的公众号SVG交互玩法。
在刚出来的时候需要专业的工程师用代码编写实现，门槛比较高，而现在运营者一般都用iPaiban Pro 黑科技编辑器来制作。
我们只需要在编辑器中找到相应的效果，然后上传图片就可以了，连图片高度的问题都不需要考虑。

具体操作如下：
首先点击“组合”，选择其中的10051款“点击展开”，如图中标识。

(, 下载次数: 5)

接着页面显示如下。点击“点击此处配置”。

(, 下载次数: 5)

然后出现如下界面，按图片标识点击。

(, 下载次数: 5)

之后页面显示如下，然后可以在右边插入自己想要展示的图。顾名思义，其中“底图”就是你想要显示的图（点击之前的图）。

(, 下载次数: 5)

操作方式为点击“换图”，出现以下页面，点击“上传图片”，可以进入文件夹选择图片。然后我选中的是夕阳城堡图，打开。

(, 下载次数: 5)

(, 下载次数: 5)

打开之后出现如下页面，图片上传到图片库里，然后点击想要上传的图，确认。那么底图就上传完毕了。

(, 下载次数: 5)

(, 下载次数: 5)

(, 下载次数: 5)

然后可以设置“触发区域”。如上图标识10，双击图片。然后点击红色区域，将它调试到合适的大小和位置。在这里，我直接将它扩大到最大。然后点击小页面右上方的‘×’，关闭触发区域调整。这样底图的操作的完成了。

(, 下载次数: 5)

(, 下载次数: 5)

接下来上传展开后的图片了。如图，选择“组件”、然后将“批量无缝图（不可弹出）”，拖到图示的展开后位置。

(, 下载次数: 5)

如下图，这样批量无缝图插件就插入完成了。然后点击图示位置。

(, 下载次数: 5)

然后出现下图页面，点击“＋”号，添加图片。具体操作和添加底图是一样的。

(, 下载次数: 6)

(, 下载次数: 5)

把图片都上传完之后，统一选中，然后确认。

(, 下载次数: 5)

结果见下图，到此，所有要展示的图都上传完毕。另外如有需要还可以点即19所示的红色三角形，转到20处设置展示时长。设置完毕就可以保存并退出了。

(, 下载次数: 5)

(, 下载次数: 5)

然后回到下面的页面。如果想要修改或者继续编辑可以点击“点击此处配置”，进行修改增添。如果确认已经编辑完成，可以点击预览草稿进行效果查看，之后就可以导入到微信后台啦。

(, 下载次数: 5)

接下来，展示下所做的图片展开的效果图吧。

(, 下载次数: 5)

现在新用户登录 iPaiban Pro 编辑器，在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。
认准编辑器网址：http://x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
如果你想了解更多排版和运营知识，可以关注公众号【i排版】，更多有趣的排版玩法等你发现。

作者: jAwq 时间: 2023-3-13 12:56
套模板做的

欢迎光临职贝云数AI新零售门户 (https://www.taojin168.com/cloud/)