公众号SVG效果教程:一行两图+跳转功能制作全攻略

想让你的公众号图文排版更具互动性和转化力吗?公众号SVG效果无疑是提升阅读体验和点击率的利器。其中,“一行两图+跳转”效果因其能同时引导用户跳转至不同页面(如小程序和文章),在电商推广、内容引流等场景中应用广泛。本文将手把手教你,如何利用SVG编辑器,无需代码,轻松制作出专业级的“一行两图+跳转”互动排版效果。

效果展示与应用场景

“一行两图+跳转”SVG效果,允许在同一行并排展示两张图片,并分别为它们设置独立的跳转链接。例如,左侧图片可跳转至微信小程序完成购买,右侧图片可跳转至相关推荐文章,实现品效合一的营销目标。

核心应用场景:
* 电商促销: 左图跳小程序商城,右图跳产品评测文章。
* 内容矩阵: 左图跳新文章,右图跳往期精华内容。
* 活动推广: 同时引导用户参与两个不同活动或页面。

重要前提: 只有开通了微信支付的服务号才支持添加外部链接(跳转到其他文章或网页)。订阅号或未开通微信支付的服务号使用此效果,外链将失效。请务必先确认你的公众号类型和权限。

分步教程:制作“一行两图+跳转”SVG效果

步骤一:在SVG编辑器中添加效果模板

  1. 进入你的SVG编辑器(如135编辑器)。
  2. 在素材库中,输入效果ID 134 或搜索关键词 【一行两图跳转】
  3. 找到对应的SVG互动效果模板。

在SVG编辑器中搜索一行两图跳转效果ID

  1. 点击该效果素材,将其添加到编辑区域。你可以选择使用模板自带的默认预览图,也可以选择空白模板后自行上传图片。

将一行两图跳转SVG效果添加到编辑板

步骤二:上传并设置你的图片素材

在编辑器右侧的「内容设置」面板中,找到『添加图片』按钮。

  1. 上传图片: 分别点击上传左侧和右侧的图片。请确保两张图片的宽度和高度尺寸完全一致,以保证最终排版整齐美观。
  2. 设置背景(可选): 在「背景设置」下方,可以点击【添加图片】上传背景图,或直接设置背景颜色,让效果更丰富。

在SVG编辑器中上传一行两图所需的图片素材
为一行两图SVG效果设置背景图或颜色

步骤三:配置跳转链接(小程序/文章)

这是实现点击互动的关键步骤。

  • 为图片添加普通链接: 如果跳转目标是其他微信公众号文章或合规网页,在上传图片后,直接在对应的链接输入框填入URL即可(需服务号权限)。
  • 为图片添加小程序跳转: 如果需要跳转到微信小程序,则需在上传图片后,填写该小程序的AppID和页面路径(Path)。

在SVG编辑器中为图片配置小程序AppID和Path

如何获取小程序信息?
* 点击查看如何获取小程序appid
* 点击查看如何获取小程序跳转路径path

步骤四:同步或导出到微信公众号

效果制作完成后,最后一步就是将其发布到你的公众号后台。

将制作好的SVG文章同步或导出到微信公众号后台

  1. 同步: 点击「同步」按钮,文章将直接保存到你绑定的微信公众号素材库。
  2. 导出: 点击「导出」按钮,生成文章HTML代码,然后复制粘贴到微信公众号后台编辑器中。

总结与工具推荐

通过以上四个步骤,一个功能强大的“一行两图+跳转”公众号SVG效果就制作完成了。这种互动排版方式能极大丰富内容的呈现形式,提升用户的参与度和点击转化率。

掌握“一行两图”只是开始,公众号SVG的世界里还有“点击换图”、“滑动展开”、“点击播放语音”等更多炫酷效果等待探索。

想制作更多酷炫的公众号SVG互动效果?推荐使用 SVG编辑器。作为135编辑器家族的重要成员,这款在线SVG编辑器提供海量现成的SVG特效模板,覆盖点击、滑动、长按等多种交互类型,无需任何代码基础,通过简单拖拽和设置即可快速生成专业互动图文,是提升微信排版效率和效果的得力工具。


更多帮助
如果您的疑问尚未被解决,请在帮助中心内【联系客服】
我们诚挚邀请您给135编辑器提供【意见和建议】
微信关注135编辑器 ID:editor135 ,获取更多排版干货知识。
135编辑器公众号二维码,获取更多微信排版与SVG教程

📁 分类: SVG编辑器

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注