交互功能使用方法
2020-04-23 18:20:27

Hello,各位小伙伴们大家好啊,本周我们回归建站小教程环节。

今天小编带来的是炫酷的图文联动效果,那么话不多说我们现在就开始​:

如下图所示,这是我们官网首页上面的一个图文联动效果的案例,而这样的效果只需要我们在编辑器中简单的设置一下就可以完成,不懂代码也可以轻松搭建网站。

首先像上述案例,我们可以看到其实这里是有两个图文组件构成的,所以我们可以先添加一个两栏的容器组件,然后一左一右各添加一个图文组件:

添加完成以后我们分别对两个组件进行样式设置,调整它们的格式

然后我们依次添加图片,这里我为了说明使用了同一套图片,在实际应用是可以填充不同的图片

图片填充完毕以后,我们就可以进行最终互动效果的设置了,先点击左侧图文组件,在出现的黑色编辑栏中点击 “设置” 中的 “代码” ,并复制组件ID。

复制ID完成以后,我们点击右侧的图文组件,在“设置”中的“交互”中进行设置

这样这里的交互功能就设置完成了,我们可以对两个图文组件进行一些调整,让整体看起来更协调一些

最后我们点击发布就可以去实际网页查看效果了