为了不增加更多的插件给网站加载增加负担,我们选择用Avada自带的画布功能进行制作弹窗。网上其实几乎没有这个相关教程,大多都是一些比较老的教程,那时候Avada还没有更新画布这个功能,所以很多人觉得Avada做不出来这种效果。
画布(Canvas):它是Avada在近几年更新中新增的功能,相当于在你的网站页面上增加了一个遮罩物,你可以将这个遮罩物的背景设置成透明,也可以在这个遮罩物中填写内容。
对于很多朋友来说,一般想让用户点击某个按钮,或者到达某个页面直接显示这样的弹窗,我们就可以用画布功能来实现。
如何制作一个画布弹窗
1.新建一个画布

2.点击实时编辑
在前台对其进行编辑

3.在前台新增相关内容

4.为画布弹窗添加相关内容
我添加了一个标题、下方的描述文本,以及一个制作好的表单。
这样一个简单的询盘弹窗就完成了,如果你还想要更加好看的弹窗,可以调节各模块的边距,为其增加背景,等等,就和做网页是一样的。

在画布常规选项中也有调节画布位置、高度的选项,在设计、覆盖中可以调节画布的背景颜色和周围的颜色(这里是透明黑色)

设置弹窗的触发条件
做好之后并没有完全的完成还需要设置这个弹窗的触发条件,对于做外贸的朋友来说一般是用户点击Quote Now或者相关的按钮来弹出这个弹窗,当然也可能有其他朋友想让用户访问时就在网站直接展示这个弹窗(这种方式可能导致用户体验有所下降)
点击按钮来弹出弹窗
通过点击按钮进行触发的话,我们不需要对画布进行任何的额外设置,甚至连触发条件、规则都不需要设置。
1.在按钮模块中的网址的右边有个堆叠起来的小图标,点击后选择打开画布。


2.选择我们制作好的画布

3.最终效果
回到前台可以点击尝试一下,最终弹出该弹窗
用户访问相关页面显示弹窗
1.在画布选项中点击条件

2.并启用,默认在整个网站上显示弹窗

3.在触发器中设置一下触发条件
比如在用户有退出网站意图时候让这个画布触发

4.设置触发规则
比如我要让这个弹窗总是显示。

5.最终效果
由于我前面的触发条件为整个网站上显示,当用户有退出意图时显示这个弹窗,所以每当我将鼠标移出网页中都会显示改弹窗。如果要用户访问网站立即就加载就把退出意图改成页面加载时在画布上显示。
弹窗条件组合多种多样,可以自己多行尝试,也要考虑用户体验,比如设置营销钩子,设置某些特定条件触发弹窗,这样用户发询盘的概率才会大大提高
如果对本文有疑问,可以在下方评论区留言,看到后我会在这里回复你。
加微信咨询(为了方便大家添加微信,直接放在这里了):
