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
![Image [1]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux | Professional WordPress repair services, worldwide, rapid response](https://www.361sale.com/wp-content/uploads/2024/09/2024091402334525.png)
Enter Off Canvas Name: Create a name
Click on Live Edit (below)
![Image [2]-Use Avada comes with a canvas function to easily realize the pop-up window effect: to create an efficient user experience (06) - Photon Flux | Professional WordPress repair services, worldwide, rapid response](https://www.361sale.com/wp-content/uploads/2024/09/2024091402364125.png)
There are two editing modes (below)
![Image [3] - Use Avada comes with a canvas function to easily realize the pop-up window effect: to create an efficient user experience (06) - Photon Flux | Professional WordPress repair services, worldwide, rapid response](https://www.361sale.com/wp-content/uploads/2024/09/2024091402392612.png)
But front-end editing is recommended for a more intuitive effect
![Image [4]-Use Avada comes with a canvas function to easily realize the pop-up window effect: to create an efficient user experience (06) - Photon Flux | Professional WordPress repair service, global reach, fast response](https://www.361sale.com/wp-content/uploads/2024/09/2024091402443487.png)
Select a container
![Image [5]-Use Avada comes with a canvas function to easily realize the effect of pop-up windows: to create an efficient user experience (06) - Photon Flux Network | Professional WordPress repair services, global reach, fast response](https://www.361sale.com/wp-content/uploads/2024/09/2024091402443521.png)
Add a suitable container
![Image [6]-Use Avada comes with a canvas function to easily realize the pop-up window effect: to create an efficient user experience (06) - Photon Flux | Professional WordPress repair services, worldwide, rapid response](https://www.361sale.com/wp-content/uploads/2024/09/2024091402451711.png)
increase
![Image [7]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux | Professional WordPress repair services, worldwide, rapid response](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
![Image [8]-Use Avada comes with a canvas function to easily realize the effect of pop-up windows: to create an efficient user experience (06) - Photon Flux Network | Professional WordPress repair services, global reach, rapid response](https://www.361sale.com/wp-content/uploads/2024/09/2024091402481413.png)
![Image [9]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux | Professional WordPress repair services, worldwide, rapid response](https://www.361sale.com/wp-content/uploads/2024/09/2024091402485597.png)
Depends on your needs.
![Image [10]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux | Professional WordPress repair services, worldwide, rapid response](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
![Image [11]-Use Avada comes with a canvas function to easily realize the pop-up window effect: to create an efficient user experience (06) - Photon Flux Network | Professional WordPress repair services, worldwide, fast response](https://www.361sale.com/wp-content/uploads/2024/09/2024091402544943.png)
![Image [12]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux Network | Professional WordPress repair services, worldwide, fast response](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.
![Image [13]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux Network | Professional WordPress repair services, worldwide, rapid response](https://www.361sale.com/wp-content/uploads/2024/09/2024091403032568.png)
Then enable the settings in the
![Image [14]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux Network | Professional WordPress repair services, global reach, rapid response](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".
![Image [15]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux | Professional WordPress repair services, worldwide, rapid response](https://www.361sale.com/wp-content/uploads/2024/09/2024091403120371.png)
Select a condition, DYNAMIC CONTENT on the image (below)
![Image [16]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux | Professional WordPress repair services, worldwide, rapid response](https://www.361sale.com/wp-content/uploads/2024/09/2024091403125375.png)
Select Open Off Canvas as follows
![Image [17]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux Network | Professional WordPress repair services, worldwide, rapid response](https://www.361sale.com/wp-content/uploads/2024/09/2024091403140628.png)
Select the canvas name we edited earlier (below)
![Image [18]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux Network | Professional WordPress repair services, global reach, rapid response](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
![Image [19]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux Network | Professional WordPress repair services, global reach, rapid response](https://www.361sale.com/wp-content/uploads/2024/09/2024091403192088.png)
![Image [20]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux Network | Professional WordPress repair services, global reach, rapid response](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.
![Image [21]-Use Avada comes with a canvas function to easily achieve the pop-up window effect: to create an efficient user experience (06) - Photon Flux Network | Professional WordPress repair services, worldwide, rapid response](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.
No comments