这种公众号互动式排版怎样做出来的？

潇潇桃花落满肩 · 发表于 2023-2-5 08:25:49

有朋友明白这类文章是如何干进去的嘛？
中心的图片能够动，中间的笔墨能够复造，并且另有布景...
以至有些文章借能接互，尔能料到的是可以用了SVG代码，可是念没有到一个新媒介小编是怎样把如许一篇文章赶进去的呢，岂非要法式员战设想共同吗？大概公司间接中包三圆媒介公司制作每一篇文章？
猜疑许多，镌谕请年夜神指点！互动式排版

这类公家号互动式排版如何干进去的？-1.jpg

rreXZ · 发表于 2023-2-5 08:25:57

嗨喽，热心的三儿上线啦~三儿来解答你的疑惑~
这种效果使用SVG做出来的，在135编辑器中的SVG编辑器就可以实现，属于【轮播】SVG效果。具体操作步骤如下：
一、打开SVG编辑器
进入135编辑器后，在左侧菜单栏，点击【SVG编辑器】进入，或者复制下方SVG编辑器链接进入：在线SVG编辑器_微信公众号SVG互动效果制作-135编辑器 (135editor.com)

这种公众号互动式排版怎样做出来的？

二、在SVG编辑器中找到【互动效果】—【素材】—【轮播】，选择样式ID为227的效果。
三、在右侧编辑区域，上传一张底图，4张可切换的图片，这里的图片咱们可以在设计网站上提前做好，再上传上去，这里三儿做的图片样式是从比格设计中制作的，比格设计是135旗下的图片设计网站，里面有公众号封面图、次图宣传海报等多种类型模板，能满足各种需要。

这种公众号互动式排版怎样做出来的？

最后的效果展示：

各位小编们，看过来！好的内容需要好排版啊，用编辑器就用135，以下4点理由真的能戳中你的心吧！：
1.有超过10w+的排版素材，让你挑到眼花缭乱，10w+海量排版素材：样式+模板，教育业、科技行业、旅游业等，各类行业模板应有尽有，商务风、古风、清新文艺风等，风格多样，能满足你的各种需求。

这种公众号互动式排版怎样做出来的？

2.一键排版功能：别人要排30分钟的推文，你1分钟就能搞定，方便快捷的一键排版功能让你爱不释手。

这种公众号互动式排版怎样做出来的？

3.50万+的商用图片素材，轻松搞定你找推文配图的烦恼~

这种公众号互动式排版怎样做出来的？

4.超给力的SVG效果，想要推文内容上一个level，怎么少得了SVG，轻松getGQ实验室、喜茶等高级排版效果~

这种公众号互动式排版怎样做出来的？

大家对以上的编辑器功能是否心动了呢？心动不如行动，最近135编辑器8周年庆，全站vip买一年送一年，每天仅需2毛钱，你没听错，仅需两毛钱哦，就能拥有10w+海量模板素材、黑科技SVG效果、多个实用功能，四舍五入不就是不要钱吗？薅羊毛的机会就在这里了，还不快来试一试！
八周年活动-135编辑器

B5tmA · 发表于 2023-2-5 08:26:38

一篇复杂的交互排版图文，往往需要策划、文案、设计师和程序员等多人的配合，也不排除有全能型人才借助多种工具一个人完成创作。大部分公众号图文精良的品牌，都是外包给专业的广告媒体公司制作的，一篇优秀的交互排版图文，成本大概在几千到几万之间。
设计师制作完长图并定稿后，为了可以上传公众号进行排版，会将长图切割成多段，不同交互对素材的要求也会有所不同，需要设计师和排版人员沟通对图片进行更细致的处理。
收到切分的素材后，排版人员开始进行最终的排版。之前制作交互排版需要专业的程序员用代码写，而现在大部分交互效果用 iPaiban Pro 黑科技编辑器就能实现了，代码小白0代码10分钟就能制作出一篇优秀的交互图文，效率高且成本低。
<hr/>以简单的「点击向右移出切换图片」为例，看下制作教程。

这种公众号互动式排版怎样做出来的？

第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，在「点击」分类中点击选择「点击-切换图片(向右水平移出)」组件，或者直接在搜索框中搜索组件编号10171。

这种公众号互动式排版怎样做出来的？

第2步：上传点击前和点击后的图片
点击前的图片即点击要移出的图片，点击后的图片即点击后剩下的那张图片。两张图片注意保持尺寸一致。
上传后如图所示：

这种公众号互动式排版怎样做出来的？

第3步：设置移出动画时间
在 iPaiban Pro 编辑器中，凡是有自动化的交互，基本上都可以设置交互的动画时间。这个样式也不例外，上传完图片后，紧接着我们就可以设置移出的动画时间。

这种公众号互动式排版怎样做出来的？

默认的动画时间是1秒，我们可以先预览草稿看效果，根据效果再进行调整。这里是直接使用的默认时间。
第4步：导入到公众号
预览效果满意后，便可以「导入到微信后台」了。

这种公众号互动式排版怎样做出来的？

不止点击切换图片，还有放映机、毛玻璃特效、层层划开、等复杂的交互效果，目前编辑器模板数已经超过1000个，任意组合搭配可以制作出千变万化的交互图文。
现在新用户注册登录 iPaiban Pro 黑科技编辑器，在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。
认准编辑器网址：http://x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
排版不止可以这么玩，多种黑科技等你去探索！如果你想要查看更多排版教程和运营知识，可以关注公众号「i排版」，为你的排版运营增添更多趣味创意。

qJcMs5 · 发表于 2023-2-5 08:27:11

微信公众号图文排版svg样式教学：点击图片收获惊喜！

rreXZ · 发表于 2023-2-5 08:27:18

从技术层面讲，题图中的排版可以通过 CSS 或者 SVG-matrix 矩阵变换实现，主要目的在于文本的可复制性。而至于更多强大的互动式图文，则需要 SVG 编程的能力或者灵活应用第三方编辑器。
那么如果你想入门开发，可以阅读这个知乎提问下 @E2平台的回答：
有没有什么免费的关于公众号交互式排版的教程？如果想借助第三方编辑器，那么欢迎使用我们 e2.cool 编辑器，具体的介绍如下：

这种公众号互动式排版怎样做出来的？

kDl · 发表于 2023-2-5 08:28:08

SVG排版，具体问题可私信

越消费越富有？陕西永倍达疑涉传销被多地发

这种公众号互动式排版怎样做出来的？

精彩评论5

直面掌门人|阜博集团王扬斌:掘金AIGC时代的

关于我们

产品与服务

全网营销

加盟与合作