In modern websites, Popup is an important tool to effectively increase the conversion rate of users, especially in foreign trade websites, timely popups can effectively guide users to initiate inquiries or participate in promotional activities. However, many people still do not know, Avada theme comes with the "Canvas" (Canvas) feature already provides flexible popup creation and configuration capabilities, do not need to rely on additional plug-ins or complex code. In this article, we will explain in detail how to use Avada Canvas feature to set up efficient popups, optimize user experience for your website and increase the conversion rate of inquiries.
Steps: Website Backend→Avada Theme→Off Canvas→Enter Off Canvas Name
![图片[1]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402334525.png)
Enter Off Canvas Name: Create a name
Click on Live Edit (below)
![图片[2]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402364125.png)
There are two editing modes (below)
![图片[3]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402392612.png)
But front-end editing is recommended for a more intuitive effect
![图片[4]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402443487.png)
Select a container
![图片[5]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402443521.png)
Add a suitable container
![图片[6]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402451711.png)
increase
![图片[7]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402461913.png)
It's not necessarily that you can only put in forms, but you can also put in discounted information, such as images with text
![图片[8]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402481413.png)
![图片[9]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402485597.png)
Depends on your needs.
![图片[10]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402532772.png)
The settings for the entire canvas, also known as the pop-up window, can also be set, such as the background color
![图片[11]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402544943.png)
![图片[12]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091402551915.png)
In order to effect more intuitive, I used with the darker colors to highlight the difference, if you do not want the content is too close to the edge, dragging the inner frame can be, such as the above figure
Steps: Website Backend→Avada Theme→Off Canvas→Off canvas Options→Conditions
Setting the trigger conditions of the popup window
After setting up the pop-up window, the next step is to configure the trigger conditions for it. For foreign trade websites, usually users click "Quote Now" or similar buttons when the pop-up window will pop up. Of course, there are some webmasters who want to display the popup window immediately when the user visits the page, but it should be noted that this approach may affect the user experience, and it is recommended to use it with caution.
![图片[13]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091403032568.png)
Then enable the settings in the
![图片[14]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091403040654.png)
Click on the button to bring up the pop-up window
If you choose to trigger the popup by clicking the button, you don't need to set any additional settings for the canvas, nor do you need to configure the trigger conditions or rules. In the Buttons module, find the stacked icon on the right side of the URL bar, click on it and select "Open Canvas".
![图片[15]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091403120371.png)
Select a condition, DYNAMIC CONTENT on the image (below)
![图片[16]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091403125375.png)
Select Open Off Canvas as follows
![图片[17]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091403140628.png)
Select the canvas name we edited earlier (below)
![图片[18]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091403143284.png)
final result
Back in the frontend you can click to try and eventually pop up that popup window
In addition to the previously mentioned setup conditions, there is also a trigger function(as shown below)
Steps: Website Backend→Avada Theme→Off Canvas→Off canvas Options→Triggers
Set up a trigger condition in the trigger
For example, having this canvas trigger when the user has the intent to exit the site
![图片[19]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091403192088.png)
![图片[20]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091403201640.png)
Steps: Website Backend→Avada Theme→Off Canvas→Off canvas Options→Rules
Setting up trigger rules(as shown below)
Let's say I want this popup to always display.
![图片[21]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024091403210032.png)
Since I set the trigger condition to display throughout the site and the popup appears when the user has an exit intent, the popup automatically displays whenever I move the mouse off the page. If you want the popup to load as soon as the user visits the site, just change the trigger condition for the exit intent to display when the page loads.
There are many combinations of trigger conditions for pop-up windows, so it is recommended to try more. At the same time, we should also consider the user experience, such as setting marketing hooks or certain specific conditions to trigger the pop-up window, which can effectively improve the probability of users to submit inquiries and users know the site discount information and so on.
summarize
With Avada's canvas feature, you can easily create various types of pop-ups and set the trigger conditions according to your website's needs. Whether it's triggered by a "Quote Now" button click or displayed on page load, it can be done with simple settings. The important thing is to make sure that the user experience is not compromised when using popups, and that marketing hooks and triggers are properly set up to maximize user conversions. We hope that through this tutorial, you will be able to better utilize Avada's canvas feature to create efficient and user-friendly popups for your foreign trade website. In the next installment, we will continue to explore more useful Avada theme features, stay tuned!
Link to this article:https://www.361sale.com/en/19800/The article is copyrighted and must be reproduced with attribution.




















![表情[wozuimei]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

No comments