SVG跳动效果按钮制作小技巧(SVG跳转互动效果)
胖友们大家好,我是三儿。马上要过年了,随手点进一篇公众号推文,都能看到各大品牌在依赖超链接和小程序做转化。
因为在推文里加入一个超链接或者小程序卡片,相比扫描二维码,是更加直接的转化方式。
不过,这里通常还需要加入一个引导动作,来引导用户来发出点击动作,进入活动落地页购买商品。
✦常见的引导有文字引导,比如【点击查看】【关注我们】:

样式ID:102759
样式ID:103546
样式ID:102593
✦还有这种各大品牌推文里用得比较多的按钮引导:

样式ID:99159
样式ID:99161
✦另外,还有一种更加吸引读者注意力,转化率更高的动态按钮,这种动态按钮可以用SVG编辑器来实现:

SVG跳动效果按钮
点击跳转超链接
【效果描述】:背景图上可以放置1个或多个按钮图片,按钮呈现放大缩小弹跳效果,按钮图片可设置超链接,不显示微信默认的跳转图标,可用于引导点击参与营销活动、点击红包等。

SVG跳动效果按钮
点击跳转小程序
【效果介绍】:背景图上可以放置1个或多个按钮图片,按钮呈现放大缩小弹跳效果,按钮图片可设置小程序链接,不显示微信默认的跳转图标,可用于引导点击参与营销活动、点击红包等。
由于跳动按钮-点击跳转超链接的操作相对简单,三儿今天就用跳转小程序的SVG来讲讲,看完你就都会操作啦!
跳动效果按钮-点击跳转小程序
通过135编辑器左侧入口进入svg编辑器
或者直接在浏览器输入svg编辑器网址进入:
https://www.135editor.com/svgeditor/

在『互动效果』栏目下的【小程序】里,点击『跳动效果按钮一点击跳转小程序』素材,将其添加到编辑区域。
在编辑器右侧分别上传背景图和按钮图片;
上传之后,鼠标拖动按钮图片,将按钮拖动到背景图上适合的位置。
打开微信公众号平台,新建一篇图文消息,点击上方的【小程序】按钮;
输入需要添加的小程序名称,点击下一步;
任意选择一种小程序的展示方式,并配置好相应的文字或图片,点击确定;
完善标题和封面图后,点击保存这篇文章;
从图文素材中点击刚刚保存的文章的标题,进入文章的临时预览页面,在网址栏中复制该文章的地址;
点击小程序素材右侧的【一键获取代码】按钮,将预览文章链接粘贴到输入栏中;
点击【开始获取】按钮,即可提取使用小程序的appid和路径path。
【动画时长】:按钮每次动态放大缩小持续的时间,时长越大缩放越慢
【按钮放大倍数】:按钮放大时呈现的大小是实际大小的倍数,数值越大,按钮放大时的尺寸越大
制作好的SVG文章可以通过使用『同步』或『导出』功能,保存到微信公众号平台(ps:不知道咋同步和导出的胖友,点击按钮,根据提示操作即可)
注意:
由于素材特殊性,预览时无法查看素材效果,需要通过同步功能保存成微信文章才能预览真实效果
跳动按钮-点击跳转超链接省略了获取小程序appid和path的步骤,只需要输入超链接即可。

以上就是今天的SVG教程
学会了的胖友赶紧实操起来吧
下一期你想看什么
欢迎在评论区留言哇~
·END·
文章排版由135编辑器提供技术支持
■ ■ ■ ■
立即登录



