想要在公众号推文中增加一些互动感，除了常见的点击展开，点击翻转展开也是一种效果出色、操作简便的交互方式。翻转之后还能继续承载图片、轮播图等多种内容，让排版更有层次感。
本文以 135 编辑器内置的 SVG 编辑器为例，分步讲解如何从零搭建一个点击翻转展开效果。
为什么选择点击翻转展开？
点击展开的交互形式用户已经很熟悉了，而点击翻转展开在点击瞬间会有一个“翻转”的动效，视觉上更吸引人，能给读者带来新鲜感。
翻转展开后的区域不仅可以放置无缝长图，还能继续插入轮播、滑动等组件，灵活性很高。
操作准备：进入 SVG 编辑器
在 135 编辑器中，点击左侧菜单栏的「SVG编辑器」按钮进入编辑界面。
查找并使用目标组件
在 SVG 编辑器页面顶部的搜索框中，输入组件 ID：788，即可定位到点击翻转展开组件。
将搜索到的组件拖拽到编辑区域。使用前请先查看右侧面板中的素材要求，避免上传不符合规范的图片。
上传翻转前后的图片素材
在编辑区域右侧的面板中，按照提示依次上传需要的图片。一般需要准备两张图：一张翻转前显示的面图，一张翻转后显示的背景图（或无缝长图）。
调整翻转动画与背景色
如果需要自定义翻转持续的时间、展开动画的时间，或者翻转后区域的背景颜色，可以在编辑器右下角的对应设置项中进行修改。
编辑翻转展开后的内容
点击编辑区域中的「编辑展开内容」按钮，进入展开内容编辑模式。根据你的排版需求，可以添加不同的组件：
- 无缝图（点击不可弹出）：适合放置整张长图
- 轮播图：适合展示多张图片
- 滑动组件：适合图文混排
导出与同步：完成内容发布
内容编辑完成后，有两种方式将效果应用到公众号：
- 同步到公众号：如果文章已经在 SVG 编辑器中完成全部编辑，点击「同步」按钮，直接授权同步到微信公众号后台。
- 导出到 135 编辑器：如果还需要在 135 编辑器中继续添加其他排版内容，可以点击「导出」按钮复制代码，然后粘贴到 135 编辑器中继续编辑。
以上即为使用 SVG 编辑器制作点击翻转展开效果的完整流程。关键步骤可以总结为：
- 搜索组件 ID：788
- 上传翻转前后图片
- 调整动画参数（如需）
- 编辑展开区域内容
- 导出或同步至公众号
操作并不复杂，动手尝试几次后就能熟练掌握。如果你在制作过程中遇到其他问题，欢迎留言交流。
关于作者
作者：135编辑器
简介：135编辑器是一款用于公众号等新媒体场景的图文编辑工具，主要围绕公众号推文的排版与内容制作，提供模板样式、图文编辑与 AI 辅助创作等能力，成立于 2014 年，至今已服务超过 2000 万用户。
本系列由 135编辑器内容团队撰写，持续整理公众号排版方法、图文编辑技巧与 AI 辅助创作的实操内容，供新媒体运营者参考。文中功能与数据以产品当前版本及官方说明为准。
