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

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)-光子波动网-免费分享跨境知识和技术知识

Enter Off Canvas Name: Create a name

Click on Live Edit (below)

图片[2]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

There are two editing modes (as shown below)

图片[3]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

But front-end editing is recommended for a more intuitive effect

图片[4]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

Select a container

图片[5]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

Add a suitable container

图片[6]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

increase

图片[7]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

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)-光子波动网-免费分享跨境知识和技术知识
图片[9]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

Depends on your needs.

图片[10]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

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)-光子波动网-免费分享跨境知识和技术知识
图片[12]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

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)-光子波动网-免费分享跨境知识和技术知识

Then enable the settings in the

图片[14]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

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)-光子波动网-免费分享跨境知识和技术知识

Select a condition, DYNAMIC CONTENT on the image (below)

图片[16]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

Select Open Off Canvas as follows

图片[17]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

Select the canvas name we edited earlier (below)

图片[18]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

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, have this canvas trigger when the user has the intent to exit the site

图片[19]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识
图片[20]-使用Avada自带画布功能轻松实现弹窗效果:打造高效用户体验(06)-光子波动网-免费分享跨境知识和技术知识

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)-光子波动网-免费分享跨境知识和技术知识

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!

© copyright statement
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