Dans les sites web modernes, le popup est un outil important pour augmenter efficacement le taux de conversion des utilisateurs, en particulier dans les sites web de commerce extérieur, les popups opportuns peuvent guider efficacement les utilisateurs pour initier des demandes ou participer à des activités promotionnelles. Cependant, beaucoup de gens ne savent pas encore que le thème Avada est livré avec la fonction "Canvas" (Canvas) qui fournit déjà des capacités flexibles de création et de configuration de popups, sans avoir besoin de recourir à des plug-ins supplémentaires ou à un code complexe. Dans cet article, nous allons expliquer en détail comment utiliser la fonction Canvas d'Avada pour mettre en place des popups efficaces, optimiser l'expérience utilisateur de votre site web et augmenter le taux de conversion des demandes de renseignements.
Etapes : Site web Backend→Avada Theme→Off Canvas→Enter Off Canvas Name
![Image [1] - L'utilisation d'Avada s'accompagne d'une fonction de canevas permettant d'obtenir facilement l'effet d'une fenêtre pop-up : pour créer une expérience utilisateur efficace (06) - Photon Fluctuation Network | Services professionnels de réparation de WordPress, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402334525.png)
Enter Off Canvas Name : Créer un nom
Cliquez sur Live Edit (ci-dessous)
![Image [2] - Utiliser Avada est doté d'une fonction "canvas" qui permet d'obtenir facilement l'effet d'une fenêtre pop-up : créer une expérience utilisateur efficace (06) - Photon Fluctuation Network | Services professionnels de réparation de WordPress, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402364125.png)
Il existe deux modes d'édition (voir ci-dessous)
![Image [3] - L'utilisation d'Avada est accompagnée d'une fonction "canvas" qui permet d'obtenir facilement l'effet d'une fenêtre pop-up : créer une expérience utilisateur efficace (06) - Photon Fluctuation Network | Services professionnels de réparation de WordPress, portée mondiale, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402392612.png)
Il est toutefois recommandé de procéder à une édition frontale pour obtenir un effet plus intuitif.
![Image [4] - Utiliser Avada est doté d'une fonction "canvas" qui permet d'obtenir facilement l'effet d'une fenêtre pop-up : créer une expérience utilisateur efficace (06) - Photon Fluctuation Network | Services professionnels de réparation de WordPress, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402443487.png)
Sélectionner un conteneur
![Image [5]-Utiliser Avada est livré avec une fonction de toile pour réaliser facilement l'effet de fenêtre pop-up : pour créer une expérience utilisateur efficace (06) - Photon Flux | WordPress Services de réparation professionnels, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402443521.png)
Ajouter un récipient approprié
![Image [6] - L'utilisation d'Avada est accompagnée d'une fonction de canevas permettant de réaliser facilement l'effet de fenêtre pop-up : pour créer une expérience utilisateur efficace (06) - Photon Fluctuation Network | Services professionnels de réparation de WordPress, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402451711.png)
augmenter
![Image [7] - L'utilisation d'Avada est accompagnée d'une fonction de canevas permettant d'obtenir facilement l'effet d'une fenêtre pop-up : créer une expérience utilisateur efficace (06) - Photon Fluctuation Network | Services professionnels de réparation de WordPress, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402461913.png)
Il ne s'agit pas seulement de formulaires, mais aussi d'informations actualisées, telles que des images accompagnées de texte.
![Image [8] - Utiliser Avada est doté d'une fonction "canvas" qui permet d'obtenir facilement l'effet d'une fenêtre pop-up : créer une expérience utilisateur efficace (06) - Photon Fluctuation Network | Services professionnels de réparation de WordPress, portée mondiale, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402481413.png)
![Image [9]-Utiliser Avada est doté d'une fonction de canevas permettant d'obtenir facilement l'effet d'une fenêtre pop-up : pour créer une expérience utilisateur efficace (06) - Photon Fluctuation Network | Services professionnels de réparation de WordPress, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402485597.png)
Cela dépend de vos besoins.
![Image [10]-Utiliser Avada est livré avec une fonction de toile pour réaliser facilement l'effet de fenêtre pop-up : pour créer une expérience utilisateur efficace (06) - Photon Flux Network | Services professionnels de réparation WordPress, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402532772.png)
Les paramètres de l'ensemble du canevas, également appelé fenêtre contextuelle, peuvent également être définis, par exemple la couleur d'arrière-plan
![Image [11]-Utiliser Avada est doté d'une fonction de canevas permettant d'obtenir facilement l'effet des fenêtres pop-up : créer une expérience utilisateur efficace (06) - Photon Flux Network | Services professionnels de réparation de WordPress, portée mondiale, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402544943.png)
![Image [12]-Utiliser Avada est livré avec une fonction de toile pour réaliser facilement l'effet de fenêtre pop-up : pour créer une expérience utilisateur efficace (06) - Photon Flux | WordPress Services de réparation professionnels, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091402551915.png)
Pour que l'effet soit plus intuitif, j'ai utilisé la couleur la plus foncée pour faire ressortir la différence. Si vous ne voulez pas que le contenu soit trop proche du bord, vous pouvez faire glisser le cadre intérieur, comme indiqué ci-dessus.
étapes : Site web Backend→Avada Theme→Off Canvas→Off canvas Options→Conditions
Définition des conditions de déclenchement de la fenêtre pop-up
Après avoir configuré la fenêtre contextuelle, l'étape suivante consiste à définir les conditions de déclenchement. Pour les sites web consacrés au commerce extérieur, les utilisateurs cliquent généralement sur "Devis maintenant" ou d'autres boutons similaires, lorsque la fenêtre pop-up s'ouvrira. Bien s?r, certains webmasters souhaitent afficher la fenêtre pop-up immédiatement lorsque l'utilisateur visite la page, mais il convient de noter que cette approche peut affecter l'expérience de l'utilisateur et qu'il est recommandé de l'utiliser avec prudence.
![Image [13]-Utiliser Avada est doté d'une fonction de canevas permettant d'obtenir facilement l'effet des fenêtres pop-up : créer une expérience utilisateur efficace (06) - Photon Flux Network | Services professionnels de réparation de WordPress, portée mondiale, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091403032568.png)
Activez ensuite les paramètres dans le
![Image [14]-Utiliser Avada est doté d'une fonction de canevas permettant d'obtenir facilement l'effet des fenêtres pop-up : créer une expérience utilisateur efficace (06) - Photon Flux Network | Services professionnels de réparation WordPress, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091403040654.png)
Cliquez sur le bouton pour faire appara?tre la fenêtre pop-up
Si vous choisissez de déclencher la fenêtre contextuelle en cliquant sur le bouton, vous n'avez pas besoin de définir d'autres paramètres pour le canevas, ni de configurer les conditions ou règles de déclenchement. Dans le module Boutons, trouvez l'ic?ne empilée sur le c?té droit de la barre URL, cliquez dessus et sélectionnez "Ouvrir le canevas".
![Image [15]-Utiliser Avada est livré avec une fonction de toile pour réaliser facilement l'effet de fenêtre pop-up : pour créer une expérience utilisateur efficace (06) - Photon Flux | WordPress Services de réparation professionnels, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091403120371.png)
Sélectionnez une condition, CONTENU DYNAMIQUE sur l'image (ci-dessous)
![Image [16]-Utiliser Avada est doté d'une fonction de canevas permettant d'obtenir facilement l'effet des fenêtres pop-up : créer une expérience utilisateur efficace (06) - Photon Flux Network | Services professionnels de réparation de WordPress, portée mondiale, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091403125375.png)
Sélectionnez Open Off Canvas comme suit
![Image [17]-Utiliser Avada est doté d'une fonction de canevas permettant d'obtenir facilement l'effet des fenêtres pop-up : créer une expérience utilisateur efficace (06) - Photon Flux Network | Services professionnels de réparation de WordPress, portée mondiale, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091403140628.png)
Sélectionnez le nom du canevas que nous avons édité précédemment (ci-dessous)
![Image [18]-Utiliser Avada est doté d'une fonction de canevas permettant d'obtenir facilement l'effet des fenêtres pop-up : créer une expérience utilisateur efficace (06) - Photon Flux Network | Services professionnels de réparation WordPress, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091403143284.png)
résultat final
De retour au premier plan, vous pouvez cliquer pour essayer de faire appara?tre cette fenêtre contextuelle.
Outre les conditions de réglage mentionnées précédemment, il existe également une fonction de déclenchement(comme indiqué ci-dessous)
étapes : Site web Backend→Avada Theme→Off Canvas→Off canvas Options→Triggers
Définir une condition de déclenchement dans le déclencheur
Par exemple, ce canevas se déclenche lorsque l'utilisateur a l'intention de quitter le site.
![Image [19]-Utiliser Avada est doté d'une fonction de canevas permettant d'obtenir facilement l'effet des fenêtres pop-up : créer une expérience utilisateur efficace (06) - Photon Flux Network | Services professionnels de réparation WordPress, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091403192088.png)
![Image [20]-Utiliser Avada est livré avec une fonction de toile pour réaliser facilement l'effet de fenêtre pop-up : pour créer une expérience utilisateur efficace (06) - Photon Flux | WordPress Services de réparation professionnels, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091403201640.png)
étapes : Site web Backend→Avada Theme→Off Canvas→Off canvas Options→Rules
Mise en place de règles de déclenchement(comme indiqué ci-dessous)
Supposons que je veuille que cette fenêtre contextuelle s'affiche en permanence.
![Image [21]-Utiliser Avada est livré avec une fonction de toile pour réaliser facilement l'effet de fenêtre pop-up : pour créer une expérience utilisateur efficace (06) - Photon Flux | WordPress Services de réparation professionnels, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/09/2024091403210032.png)
étant donné que j'ai défini la condition de déclenchement pour qu'elle s'affiche sur l'ensemble du site et que la fenêtre contextuelle appara?t lorsque l'utilisateur a une intention de sortie, la fenêtre contextuelle s'affiche automatiquement chaque fois que je déplace la souris hors de la page. Si vous souhaitez que la fenêtre contextuelle s'affiche dès que l'utilisateur visite le site, il vous suffit de modifier la condition de déclenchement de l'intention de sortie pour qu'elle s'affiche au chargement de la page.
Il existe de nombreuses combinaisons de conditions de déclenchement pour les fenêtres pop-up, il est donc recommandé d'en essayer davantage. Parallèlement, nous devrions également tenir compte de l'expérience de l'utilisateur, par exemple en définissant des accroches marketing ou certaines conditions spécifiques pour déclencher la fenêtre contextuelle, ce qui peut améliorer efficacement la probabilité que les utilisateurs soumettent des demandes et qu'ils connaissent les informations sur les réductions offertes par le site, etc.
résumés
Avec la fonction canvas d'Avada, vous pouvez facilement créer différents types de pop-ups et définir les conditions de déclenchement en fonction des besoins de votre site web. Qu'elles soient déclenchées par un clic sur le bouton "Devis maintenant" ou qu'elles s'affichent au chargement de la page, elles sont faciles à configurer. Il est important de s'assurer que l'expérience de l'utilisateur n'est pas compromise lors de l'utilisation des popups, et que les crochets marketing et les déclencheurs sont réglés de manière appropriée pour maximiser les conversions des utilisateurs. Nous espérons que ce tutoriel vous permettra de mieux utiliser la fonction "canvas" d'Avada pour créer des pop-ups efficaces et conviviaux pour votre site de commerce extérieur. Dans le prochain numéro, nous continuerons à explorer d'autres fonctionnalités utiles du thème Avada, restez à l'écoute !
Lien vers cet article :http://gqxi.cn/fr/19800L'article est protégé par le droit d'auteur et doit être reproduit avec mention.















Pas de commentaires