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

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

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

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

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

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

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

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

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
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

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

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
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

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

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

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

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

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

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

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
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

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

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!


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