SVG跳动效果按钮制作小技巧(SVG跳转互动效果)

胖友们大家好,我是三儿。马上要过年了,随手点进一篇公众号推文,都能看到各大品牌在依赖超链接和小程序做转化。


因为在推文里加入一个超链接或者小程序卡片,相比扫描二维码,是更加直接的转化方式。


不过,这里通常还需要加入一个引导动作,来引导用户来发出点击动作,进入活动落地页购买商品。


✦常见的引导有文字引导,比如【点击查看】【关注我们】:


点击蓝字
关注我们

样式ID:102759


点击蓝字



关注我们

样式ID:103546


点击了解十九届六中全会

样式ID:102593



✦还有这种各大品牌推文里用得比较多的按钮引导:


注册会员 领取福利

样式ID:99159


立即领取30元优惠券
GO


样式ID:99161


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


·


SVG跳动效果按钮

点击跳转超链接


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





·


SVG跳动效果按钮

点击跳转小程序



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



由于跳动按钮-点击跳转超链接的操作相对简单,三儿今天就用跳转小程序的SVG来讲讲,看完你就都会操作啦!



使用教程


跳动效果按钮-点击跳转小程序



01 进入SVG编辑器


通过135编辑器左侧入口进入svg编辑器



或者直接在浏览器输入svg编辑器网址进入:

https://www.135editor.com/svgeditor/




02 添加素材


在『互动效果』栏目下的【小程序】里,点击『跳动效果按钮一点击跳转小程序』素材,将其添加到编辑区域。




03 添加图片


在编辑器右侧分别上传背景图和按钮图片;



上传之后,鼠标拖动按钮图片,将按钮拖动到背景图上适合的位置。



04 一键获取小程序代码


打开微信公众号平台,新建一篇图文消息,点击上方的【小程序】按钮;


输入需要添加的小程序名称,点击下一步;



任意选择一种小程序的展示方式,并配置好相应的文字或图片,点击确定;



完善标题和封面图后,点击保存这篇文章;



从图文素材中点击刚刚保存的文章的标题,进入文章的临时预览页面,在网址栏中复制该文章的地址;



点击小程序素材右侧的【一键获取代码】按钮,将预览文章链接粘贴到输入栏中;




点击【开始获取】按钮,即可提取使用小程序的appid和路径path。





05 动画设置


【动画时长】:按钮每次动态放大缩小持续的时间,时长越大缩放越慢

【按钮放大倍数】:按钮放大时呈现的大小是实际大小的倍数,数值越大,按钮放大时的尺寸越大




06 同步/导出


制作好的SVG文章可以通过使用『同步』或『导出』功能,保存到微信公众号平台(ps:不知道咋同步和导出的胖友,点击按钮,根据提示操作即可)



注意:

由于素材特殊性,预览时无法查看素材效果,需要通过同步功能保存成微信文章才能预览真实效果



跳动按钮-点击跳转超链接省略了获取小程序appid和path的步骤,只需要输入超链接即可。





以上就是今天的SVG教程

学会了的胖友赶紧实操起来吧


下一期你想看什么

欢迎在评论区留言哇~




·EN

文章排版由135编辑器提供技术支持

 ■ ■ 

文章评价
登录后可以评论
立即登录
分享到