【公众号排版】如何使用SVG组件制作拆盲盒和问答解析效果

掌握SVG组件的神奇力量,轻松实现公众号文章中的互动效果!本文详细介绍了如何使用135编辑器中的SVG组件来创建拆盲盒和问答解析效果,包括详细的操作步骤和技巧。立即学习如何为你的新媒体运营增添动力,提升用户体验,让内容更具吸引力。


·


·

快点击足球盲盒,看看你能领取到什么样的足球手办(只有一次机会哦,想要再拆盲盒需要刷新文章)


觉得盲盒不尽兴,还想再来点别的?没问题三儿也为你准备了,快来测一测你是属于哪种花吧👇


·



注:此效果不能实现【返回】,所以很适合“抽奖”、“单项选择”等具有唯一性的事件。




操作教程


01
进入svg编辑器


#在135编辑器左侧入口中进入svg编辑器。



#或是直接在浏览器中输入svg编辑器官网网址进入:

https://www.135editor.com/



02
查找效果组件并添加


#查找组件我们一般有两种思路:

一是直接输入组件ID,准确、快捷但前提是你能记住每个组件的ID;


二是根据效果来选择,我们这个效果很明显是一个【点击】效果,那么我们在分类中选择【点击】



#我们可以看到关于【单击】的效果组件有许多,就需要我们慢慢查找了。



#找到我们本次需要使用的效果组件:单选答案解析类答题效果 组件id:189



#将组件添加至编辑区域。



03
添加图片


#在我们添加图片时,我们一定要看素材要求,根据要求制作图片,这样才能确保效果的完美展示。



#制作完符合素材要求的图片后,我们就可以添加【背景图】和答案图片了。



背景图示例👇



答案图示例👇


04
设置触发热区


#每上传一张【答案图】时,背景图都会对应显示一个红色的选项热区,将这个热区移动到【背景图】对应的位置,调整好触发区域大小,即可实现点击该区域显示上传的答案图👇



05
同步/导出

#设置完成后的svg文章效果可以通过使用【同步】或【导出】功能,保存到微信公众号平台





·




以上就是

【单选答案解析类答题效果】

全部内容啦

看会了的小伙伴

今天就操练起来

给领导一个惊喜和一个涨薪的理由吧

下一期你还想学什么

可以在评论区留言哦

明天见~




·EN

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

 ■ ■ 




文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
分享到