Using Avada's own canvas function to easily realize the pop-up window effect: to create an efficient user experience (06)

在现代网站中,弹窗(Popup)是一种有效提升用户转化率的重要工具,尤其是在外贸网站中,适时的弹窗可以有效引导用户发起询盘或参与促销活动。然而,许多人还不了解,Avada主题自带的“画布”(Canvas)功能已经提供了灵活的弹窗创建和配置功能,不需要依赖额外的插件或复杂的代码。通过这篇文章,我们将详细介绍如何使用 Avada 画布功能设置高效弹窗,为你的网站优化用户体验并提高询盘转化率。

步骤:网站后端→Avada主题→Off Canvas→Enter Off Canvas Name

图片[1]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

Enter Off Canvas Name:起一个名字

点击实时编辑(如下图)

图片[2]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

有两种编辑模式(如下图)

图片[3]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

但是建议前端编辑,这样效果更直观一些

图片[4]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

选择一个容器

图片[5]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

添加一个合适的容器

图片[6]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

increase

图片[7]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

也不一定你只能放表单,也可以放入打折的信息,比如图片加文字

图片[8]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[9]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

看你的需求了

图片[10]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

整个画布也就是弹窗的设置也是可以设置的,比如背景颜色

图片[11]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[12]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

为了效果更直观,我用了跟深色的颜色来突出区别,如果不想内容太靠边,拖动内框就可以了,如上图

步骤:网站后端→Avada主题→Off Canvas→Off canvas Options→Conditions

设置弹窗的触发条件

在设置好弹窗后,下一步是为其配置触发条件。对于外贸类网站,通常用户点击 “Quote Now” 或类似按钮时弹窗会弹出。当然,也有部分站长希望在用户访问页面时立即显示弹窗,但需要注意的是,这种方式可能会影响用户体验,建议谨慎使用。

图片[13]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

然后启用在设置

图片[14]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

点击按钮来弹出弹窗

如果选择通过点击按钮来触发弹窗,则无需对画布进行任何额外设置,也不需要配置触发条件或规则。在按钮模块中,找到网址栏右侧的堆叠图标,点击后选择“打开画布”即可。

图片[15]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

选择一个条件,图片上的DYNAMIC CONTENT(如下图)

图片[16]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

选择打开画布,如下图(Open Off Canvas)

图片[17]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

选择我们之前编辑好的画布名称(如下图)

图片[18]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

final result

回到前台可以点击尝试一下,最终弹出该弹窗

除了之前说的设置条件外,还有一个触发器的功能(如下图)

步骤:网站后端→Avada主题→Off Canvas→Off canvas Options→Triggers

在触发器中设置一下触发条件

比如在用户有退出网站意图时候让这个画布触发

图片[19]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[20]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

步骤:网站后端→Avada主题→Off Canvas→Off canvas Options→Rules

设置触发规则(如下图)

比如我要让这个弹窗总是显示。

图片[21]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

由于我设置的触发条件是在整个网站上显示,并且当用户有退出意图时弹窗会出现,因此每当我将鼠标移出网页时,弹窗就会自动显示。如果你希望弹窗在用户访问网站时立即加载,只需将退出意图的触发条件更改为页面加载时显示即可。

弹窗的触发条件有很多种组合方式,建议多加尝试。同时也要考虑用户体验,比如设置营销钩子或某些特定条件来触发弹窗,这样可以有效提升用户提交询盘的概率和用户知道网站打折的信息等等。

summarize

通过使用 Avada 的画布功能,您可以轻松创建各种类型的弹窗,并根据网站需求灵活设置触发条件。无论是“Quote Now”按钮点击触发,还是页面加载时显示,都能通过简单的设置完成。重要的是,在使用弹窗时,要确保用户体验不受影响,合理的设置营销钩子和触发条件能够最大化提升用户转化率。希望通过本教程,您能更好地利用 Avada 的画布功能打造高效、用户友好的外贸网站弹窗。下一期,我们将继续探讨更多实用的 Avada 主题功能,敬请期待!


Contact Us
Can't read the article? Contact us for free answers! Free help for personal, small business sites!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
This article was written by Harry
THE END
If you like it, support it.
kudos0 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments