公众号SVG效果教程:自定义触发超链接(无角标)

想在公众号文章里实现点击任意区域即可跳转网页的酷炫效果吗?自定义触发超链接(无角标)SVG效果就能帮你实现。它允许你设置一个自定义的点击区域(热区),读者点击该区域即可直接跳转到指定链接,且页面不显示任何角标,视觉上更简洁美观。本教程将手把手教你如何使用135编辑器制作这一高级互动效果。

效果展示与核心优势

自定义触发超链接效果的核心在于无痕交互。与传统公众号外链不同,它不会在文章底部生成带角标的“阅读原文”提示。你可以将跳转链接隐藏在图片的任意部分,实现更灵活、更具设计感的引流或互动。

重要前提:请注意,只有开通了微信支付且已认证的服务号才支持添加外部链接(如网页链接)。订阅号或未开通支付的服务号仅能添加公众号内部文章链接,使用前请务必确认您的公众号类型与权限。

分步制作教程:实现自定义触发跳转

下面,我们将通过6个清晰步骤,在135编辑器中完成整个效果的制作。

第一步:添加SVG效果至编辑区

  1. 在135编辑器左侧组件栏,找到并点击 【SVG效果】 按钮。
  2. 在搜索框中输入效果ID “57”,或直接搜索效果名称 “点击直接展开”
  3. 从搜索结果中找到 【点击直接展开(自定义触发)】 效果,点击即可添加到中间的编辑区域。
    • 你可以选择使用编辑器自带的默认素材图,也可以选择“不带有135默认素材图”从头开始。

在135编辑器中搜索并添加‘点击直接展开(自定义触发)’SVG效果

第二步:上传或设计你的主图

如果你上一步选择了“不带有素材图”,则需要上传自己的图片。

  1. 在编辑区右侧的 【添加图片】 区域,上传你准备好的背景图片。
  2. 你也可以点击 【DIY设计图片】 功能(此功能需要笔格设计会员)在线设计一张精美的图片。

关键提示:务必确保上传的图片尺寸和清晰度符合要求,这是效果正常显示的基础。

在SVG效果右侧面板上传自定义图片

第三步:设置跳转链接

这是实现跳转功能的核心设置。

  1. 在右侧面板找到 【跳转网页链接】 输入框。
  2. 将你需要跳转的网址链接粘贴进去。

再次强调链接权限
* 服务号(已认证且开通支付):可添加任何外部链接(如官网、活动页、小红书、微博等)。
* 订阅号/其他类型公众号:仅能添加公众号内部的文章链接。

在跳转链接输入框中粘贴目标网址

第四步:自定义设置触发热区

“自定义触发”的精髓在此步。你可以自由决定图片上哪个区域是可点击的。

  1. 在右侧面板找到 【触发热区】 设置模块,你会看到图片上出现一个红色的虚线框。
  2. 点击并拖动红框的边缘或角点,可以调整其大小。
  3. 点击并拖动红框内部,可以移动其位置。
  4. 最终显示的红框范围,就是读者点击后可以触发跳转的有效区域。红框外的区域点击无效。

调整红色虚线框以自定义设置SVG效果的点击触发区域

第五步:同步或导出至公众号

效果制作完成后,需要同步到公众号后台才能正确预览和发布。

  1. 点击编辑器顶部的 【同步】 按钮,将文章同步到你的微信公众号后台草稿箱。
  2. 或者,你也可以使用 【导出】 功能,生成文章HTML或图片包。

重要提醒:SVG互动效果必须通过【同步】后,在手机端或公众号后台预览才能看到最终交互效果。编辑器的网页预览可能无法完全模拟真实环境,导致效果显示异常。

完成SVG制作后使用同步或导出功能保存到公众号

第六步:更多相关操作指南

如果你对同步或导出功能不熟悉,可以参考以下指南:
* 点击查看如何使用【同步】
公众号SVG文章同步功能操作指南动图演示
* 点击查看如何使用【导出】
公众号SVG文章导出功能操作指南动图演示

应用场景与创意玩法

掌握了自定义触发超链接技术后,你可以在公众号排版中玩出更多花样:
* 游戏化互动:在一张大的场景图中,将多个物品设置为热区,点击不同物品跳转到不同页面,实现“寻宝”游戏。
* 产品导购:在一张全家福或场景图中,为每个商品设置独立热区,点击即可跳转到对应购买页面。
* 菜单导航:设计一张精美的导航图,点击不同板块跳转到公众号内的相关系列文章合集。

总结与工具推荐

通过以上步骤,你已经学会了如何制作无角标的自定义触发超链接SVG效果。这种效果极大地提升了公众号文章的互动性与视觉设计空间,是提升点击率和用户参与度的利器。

如果在制作过程中遇到任何问题,可以前往【联系客服】寻求帮助,也欢迎你为135编辑器提供【意见和建议】

想更高效、更专业地制作各类公众号SVG互动效果吗?强烈推荐你尝试135编辑器家族中的专业工具——SVG编辑器。这款在线SVG编辑器提供了海量精美的SVG特效模板,涵盖点击换图、滑动展开、点击播放、摇一摇等多种热门互动形式,全程无需任何代码基础,通过简单的拖拽和设置就能轻松实现令人惊艳的交互排版,是每一位公众号运营者和内容创作者的必备神器。

微信搜索并关注 135编辑器(ID:editor135),获取更多排版干货知识与最新模板资源。
135编辑器公众号二维码,关注获取更多SVG排版教程

📁 分类: SVG编辑器

发表评论

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