En los sitios web modernos, Popup es una herramienta importante para aumentar efectivamente la tasa de conversión de los usuarios, especialmente en los sitios web de comercio exterior, las ventanas emergentes oportunas pueden guiar eficazmente a los usuarios para iniciar consultas o participar en actividades promocionales. Sin embargo, muchas personas aún no lo saben, el tema Avada viene con la función "Canvas" (Lienzo) ya proporciona capacidades flexibles de creación y configuración de ventanas emergentes, no es necesario depender de plug-ins adicionales o código complejo. En este artículo, explicaremos en detalle cómo utilizar la función Canvas de Avada para configurar ventanas emergentes eficientes, optimizar la experiencia de usuario de su sitio web y aumentar la tasa de conversión de consultas.
Pasos: Website Backend→Avada Theme→Off Canvas→Enter Off Canvas Name
![Imagen [1] - El uso de Avada viene con una función de lienzo para lograr fácilmente el efecto de ventanas emergentes: para crear una experiencia de usuario eficiente (06) - Photon Flux | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402334525.png)
Introducir nombre de lienzo desactivado: Crear un nombre
Haga clic en Edición en directo (abajo)
![Imagen [2] - El uso de Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Fluctuation Network | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402364125.png)
Existen dos modos de edición (como se muestra a continuación)
![Imagen [3] - El uso de Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Fluctuation Network | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402392612.png)
Pero se recomienda la edición frontal para un efecto más intuitivo
![Imagen [4] - El uso de Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Fluctuation Network | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402443487.png)
Seleccione un contenedor
![Imagen [5]-Uso Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Flux | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402443521.png)
Añadir un recipiente adecuado
![Imagen [6] - El uso de Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Fluctuation Network | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402451711.png)
aumentar
![Imagen [7] - El uso de Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Fluctuation Network | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402461913.png)
No es necesariamente que sólo puedas poner formularios, sino que también puedes poner información con descuento, como fotos con texto.
![Imagen [8] - El uso de Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Fluctuation Network | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402481413.png)
![Imagen [9]-Utilizar Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Fluctuation Network | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402485597.png)
Depende de sus necesidades.
![Imagen [10]-Utilizar Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Flux Network | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402532772.png)
También se pueden configurar los ajustes de todo el lienzo, también conocido como ventana emergente, por ejemplo, el color de fondo
![Imagen [11]-Utilizar Avada viene con una función de lienzo para lograr fácilmente el efecto de ventanas emergentes: para crear una experiencia de usuario eficiente (06) - Photon Flux Network | Servicios profesionales de reparación de WordPress, alcance global, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402544943.png)
![Imagen [12]-Uso Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Flux | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091402551915.png)
Con el fin de efecto más intuitivo, he utilizado con el color más oscuro para resaltar la diferencia, si no desea que el contenido es demasiado cerca del borde, arrastre el marco interior puede ser, como se muestra arriba
Pasos: Website Backend→Avada Theme→Off Canvas→Off canvas Options→Conditions
Establecer las condiciones de activación de la ventana emergente
Después de configurar la ventana emergente, el siguiente paso es configurar las condiciones de activación de la misma. En los sitios web de comercio exterior, los usuarios suelen hacer clic en "Cotizar ahora" o botones similares cuando se abrirá la ventana emergente. Por supuesto, hay algunos webmasters que quieren mostrar la ventana emergente inmediatamente cuando el usuario visita la página, pero hay que tener en cuenta que este enfoque puede afectar a la experiencia del usuario, por lo que se recomienda utilizarlo con precaución.
![Imagen [13]-Utilizar Avada viene con una función de lienzo para lograr fácilmente el efecto de ventanas emergentes: para crear una experiencia de usuario eficiente (06) - Photon Flux Network | Servicios profesionales de reparación de WordPress, alcance global, respuesta rápida.](https://www.361sale.com/wp-content/uploads/2024/09/2024091403032568.png)
A continuación, active la configuración en
![Imagen [14]-Utilizar Avada viene con una función de lienzo para lograr fácilmente el efecto de ventanas emergentes: para crear una experiencia de usuario eficiente (06) - Photon Flux Network | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091403040654.png)
Haga clic en el botón para abrir la ventana emergente
Si opta por activar la ventana emergente haciendo clic en el botón, no necesitará establecer ninguna configuración adicional para el lienzo, ni configurar las condiciones o reglas de activación. En el módulo Botones, busque el icono apilado a la derecha de la barra de URL, haga clic en él y seleccione "Abrir lienzo".
![Imagen [15]-Uso Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Flux | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091403120371.png)
Seleccione una condición, CONTENIDO DINÁMICO en la imagen (abajo)
![Imagen [16]-Utilizar Avada viene con una función de lienzo para lograr fácilmente el efecto de ventanas emergentes: para crear una experiencia de usuario eficiente (06) - Photon Flux Network | Servicios profesionales de reparación de WordPress, alcance global, respuesta rápida.](https://www.361sale.com/wp-content/uploads/2024/09/2024091403125375.png)
Seleccione Abrir fuera de lienzo del siguiente modo
![Imagen [17]-Utilizar Avada viene con una función de lienzo para lograr fácilmente el efecto de ventanas emergentes: para crear una experiencia de usuario eficiente (06) - Photon Flux Network | Servicios profesionales de reparación de WordPress, alcance global, respuesta rápida.](https://www.361sale.com/wp-content/uploads/2024/09/2024091403140628.png)
Seleccione el nombre del lienzo que editamos anteriormente (abajo)
![Imagen [18]-Utilizar Avada viene con una función de lienzo para lograr fácilmente el efecto de ventanas emergentes: para crear una experiencia de usuario eficiente (06) - Photon Flux Network | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091403143284.png)
resultado final
De vuelta en el primer plano puede hacer clic para tratar de eventualmente abrir esa ventana emergente
Además de las condiciones de ajuste mencionadas anteriormente, también existe una función de activación(como se muestra a continuación)
Pasos: Website Backend→Avada Theme→Off Canvas→Off canvas Options→Triggers
Establezca una condición de activación en el activador
Por ejemplo, hacer que este lienzo se active cuando el usuario tiene la intención de salir del sitio.
![Imagen [19]-Utilizar Avada viene con una función de lienzo para lograr fácilmente el efecto de ventanas emergentes: para crear una experiencia de usuario eficiente (06) - Photon Flux Network | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091403192088.png)
![Imagen [20]-Uso Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Flux | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091403201640.png)
Pasos: Website Backend→Avada Theme→Off Canvas→Off canvas Options→Rules
Configuración de reglas de activación(como se muestra a continuación)
Digamos que quiero que esta ventana emergente se muestre siempre.
![Imagen [21]-Uso Avada viene con una función de lienzo para lograr fácilmente el efecto de ventana emergente: para crear una experiencia de usuario eficiente (06) - Photon Flux | Servicios profesionales de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/uploads/2024/09/2024091403210032.png)
Como he configurado la condición desencadenante para que se muestre en todo el sitio y la ventana emergente aparece cuando el usuario tiene una intención de salida, la ventana emergente se muestra automáticamente cada vez que muevo el ratón fuera de la página. Si desea que la ventana emergente se cargue en cuanto el usuario visite el sitio, sólo tiene que cambiar la condición desencadenante de la intención de salida para que se muestre cuando se cargue la página.
Hay muchas combinaciones de condiciones de activación de ventanas emergentes, por lo que se recomienda probar más. Al mismo tiempo, también hay que tener en cuenta la experiencia del usuario, como el establecimiento de ganchos de marketing o ciertas condiciones específicas para activar la ventana emergente, lo que puede mejorar efectivamente la probabilidad de que los usuarios envíen consultas y los usuarios conozcan la información de descuento del sitio y así sucesivamente.
resúmenes
Con la función canvas de Avada, puede crear fácilmente varios tipos de ventanas emergentes y establecer las condiciones de activación según las necesidades de su sitio web. Tanto si se activa al hacer clic en el botón "Presupuesto ahora" como si se muestra al cargar la página, todo es fácil de configurar. Es importante asegurarse de que la experiencia del usuario no se vea comprometida al utilizar ventanas emergentes, y que los ganchos de marketing y los activadores se configuren adecuadamente para maximizar las conversiones de los usuarios. Esperamos que con este tutorial pueda utilizar mejor la función canvas de Avada para crear ventanas emergentes eficaces y fáciles de usar para su sitio web de comercio exterior. En la próxima edición, seguiremos explorando más funciones útiles del tema Avada, ¡esté atento!
| Contacte con nosotros | |
|---|---|
| ¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas |
Servicio de atención al cliente WeChat
|
| ① Tel: 020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| (iii) Correo electrónico: info@361sale.com | |
| ④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres | |
Enlace a este artículo:https://www.361sale.com/es/19800El artículo está protegido por derechos de autor y debe ser reproducido con atribución.






















![Emoji[wozuimei]-Photonflux.com | Servicio profesional de reparación de WordPress, en todo el mundo, respuesta rápida](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![Emoticono [baoquan] - Photon Wave Network | Servicios profesionales de reparación de WordPress, cobertura mundial, respuesta rápida](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

Sin comentarios