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 user conversion rate, especially in foreign trade websites, timely popup can effectively guide users to initiate inquiries or participate in promotional activities. However, many people still don't understand thatAvada ThemeThe built-in Canvas feature already provides flexible popup creation and configuration capabilities without relying on additional plugins or complex code. In this article, we'll explain how to use Avada Canvas to set up efficient popups, optimize user experience and increase conversion rates for your website.

Steps: Website Backend→Avada Theme→Off Canvas→Enter Off Canvas Name

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

Enter Off Canvas Name: Create a name

Click on Live Edit (below)

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

There are two editing modes (as shown below)

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

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

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

Select a container

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

Add a suitable container

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

increase

Using Avada's own canvas function to easily realize the pop-up window effect: to create an efficient user experience (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

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

Depends on your needs.

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

The settings for the entire canvas, also known as the pop-up window, can also be set, such as the background color

Using Avada's own canvas function to easily realize the pop-up window effect: to create an efficient user experience (06)
Using Avada's own canvas function to easily realize the pop-up window effect: to create an efficient user experience (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.

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

Then enable the settings in the

Using Avada's own canvas function to easily realize the pop-up window effect: to create an efficient user experience (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".

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

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

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

Select Open Off Canvas as follows

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

Select the canvas name we edited earlier (below)

Using Avada's own canvas function to easily realize the pop-up window effect: to create an efficient user experience (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

Using Avada's own canvas function to easily realize the pop-up window effect: to create an efficient user experience (06)
Using Avada's own canvas function to easily realize the pop-up window effect: to create an efficient user experience (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.

Using Avada's own canvas function to easily realize the pop-up window effect: to create an efficient user experience (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!


Contact Us
Can't read the article? Contact us for a free answer! 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
Posted by photon fluctuations, retweeted with attribution:https://www.361sale.com/en/19800/

Like (2)
Previous 2 days ago
Next 1 day ago

Recommended

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

020-2206-9892

QQ咨询:1025174874

E-mail: info@361sale.com

Working hours: Monday to Friday, 9:30-18:30, holidays off

Customer Service
In order to facilitate global user registration and login, we have canceled the telephone login function. If you encounter login problems, please contact our customer service for assistance in binding your email address.