Utilizar la función de lienzo propia de Avada para conseguir fácilmente el efecto de ventana emergente: crear una experiencia de usuario eficaz (06)

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

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

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

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

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

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

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

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

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

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

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.

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

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

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.

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.

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

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

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

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
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
© Declaración de reproducción
Este artículo fue escrito por Harry
EL FIN
Si le gusta, apóyela.
felicitaciones0 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios