html按钮隐藏_创意互动——编辑器的隐藏功能

hello，大家好，我是运营姐。一个喜欢做新媒体的小姐姐。(点击上方蓝色字体可以关注我哟)

海口已经连续下了1个多星期的雨了，估计今年会比往年冷的快，运营姐都想待着被窝里，奈何还惦记着今天要给大家更文，忙忙起来收拾开电脑。

今天想要给大家推荐的是：编辑器中的隐藏功能

之前给大家更新过常见的编辑器种类，可以点击蓝色字体查看：微信图文编辑器集合和使用技巧

01

偶然契机我发现一个宝藏公众号，发布了很多创意公众号文章，真心感觉还不错。以下是截取了部分图片，效果：点击左边的图片，就会在当前图片上变成另外一张图片。

运营姐通过研究，基本流程应该是这样的：设计创意——手绘漫画——制作成电子版图片(把要用到的图片都设计出来)——编辑公众号文章——利用编辑中的隐藏功能——完成

看完后真的是让人耳目一新的感觉，忍不住想要自己也动手做一个。但是奈何...运营姐是画画手残党，只能给大家介绍一下这个隐藏功能的使用方法，感兴趣的小伙伴可以试试。

0 2

下面运营姐来给大家介绍一下：隐藏功能的使用方法，以135编辑为例。当然其它编辑中也有这个隐藏功能，大家可以多多尝试。

第一步：百度“135编辑器”，进入到135编辑器的编辑界面。点击右侧的“更多”选项，进入到更多样式中心。

第二步：在更多样式中心中，输入关键词“隐藏”，自动检索隐藏功能样式。

第三步：检索后大家会看到各种各样的隐藏组件，在这些组件中选择“点击显示隐藏的图片”组件。

不要高兴太早，很快你就会发现好看一些的组件都是要vip的。意思就是你要么花钱变成vip会员，要么采取邀请好友的形式领取7天会员。

我这边的话是邀请了1个好友绑定135编辑器，获取了7天会员。因为用的不多，所以目前暂时还不想花钱去开通。

0 3

第四步：搜索编号(97481)，点击弹出来的svg互动组件。样式介绍：

【样式名称】点击显示底图样式

【样式编号】ID：97481

【样式介绍】在样式中点击上方的图片，可以显示下方的图片。可以搭配无缝图片样式制作更有趣味性的推文

【可调整参数】：更换图片、更改图片尺寸

第五步：上传两张图片。选择编辑区上方的图片上传按钮，上传制作好的图片(两张图片需尺寸一样)。

图片上传成功后，我们需要复制图片的地址才能够使用图片。

第六步：在135编辑器中，找到左侧的『图片素材』，在这里保存着你在135编辑器中上传的图片。找到你刚上传的图片素材，点击下方的复制按钮，即可复制图片的地址。

☀大家复制出来的链接先存在一个地方，一会需要用到

第七步：点击刚刚的显示底图样式，选择专业版编辑器菜单中的『动画』按钮，进入到『动画』编辑界面。

第八步：在这个界面中，替换刚刚复制出来的图片链接地址，点击确定即可。到这里基本上就已经设置完了。

☀强调：样式中使用的两张图需要大小一致，否则会使样式点击失效。

0 4

?如果想要修改图片的大小怎么办？

不需要用到ps等修图工具，在编辑器中使用代码修改就好了。下面是修改步骤。

1️⃣首先点击编辑中的“HTML”，打开代码界面

这样秘密麻麻的代码是不是看的很懵，不要着急。我们只需要记住一个单词就好了“viewbox”。

2️⃣键盘按CTRL+F 打开查找功能，查找viewbox这个单词，就会找到我们需要的代码了。把代码中的640,412 修改成自己想要的图片大小即可。

让我们来看看显示效果↓↓↓

(点击图片查看小可爱哟~)

知识点普及

SVG互动组件

SVG是一种开放标准的矢量图形语言，可设计激动人心的、高分辨率的Web图形页面，因为软件提供了制作复杂元素的工具，如渐变、嵌人字体、透明效果、动画和滤镜效果并且可使用平常的字体命令插人到HTML编码中。

简单的来说，就是现在公众号里互动的功能大部分都可以用SVG来实现，像点击显示隐藏图片、点击展开图片、答题互动等等，都是可以用SVG语言来实现的。

今天的互动功能介绍就到这里了，希望大家可以多多摸索SVG互动组件，让自己的图文更加精彩。想学习新媒体运营就加小姐姐微信，备注“学习新媒体”，和志同道合的小伙伴一起进步吧！