Crea ventanas emergentes de Elementor en WooCommerce

Todos somos grandes fanáticos de WooCommerce. Es sencillo de configurar y personalizar. El paquete incluye características que simplifican la creación y administración de una tienda de comercio electrónico dinámica y poderosa.

Sin embargo, la creación de una página de comercio electrónico exitosa implica más que simplemente agregar productos populares. Todas las páginas también deben ser atractivas visualmente. Cuanto más atractivo visualmente y fácil de usar sea su sitio web, mayor será la probabilidad de que atraiga a más clientes.

• Configuración de la ventana emergente
• También puede crear ventanas emergentes usando el constructor visual en Elementor
• Preferencias de publicación

Aunque WooCommerce crea el carrito de compras y la página de pago para usted cuando crea su sitio, Elementor los hace más atractivos al personalizarlos.

Tiene la opción de rediseñarlos o empezar de nuevo desde el principio. Puede repetir el proceso para todas las demás páginas de su sitio web.

Al crear una página cálida de agradecimiento y actualizar sus páginas Mi cuenta y Términos de servicio, puede ganarse el corazón y la mente de sus clientes.

La funcionalidad de arrastrar y soltar de Elementor, combinada con este tutorial, asegurará que tenga una experiencia sin problemas al crear sus páginas.

Después de configurar su tienda wooCommerce, es posible que desee hacerla más atractiva para sus visitantes y clientes. Agregar ventanas emergentes le da al usuario otra impresión y un nuevo deseo de permanecer en su tienda.

 Para crear una ventana emergente, vaya a Plantillas> Ventanas emergentes en la barra de menú. Se le presentará una lista de todas sus ventanas emergentes y, si aún no ha creado una, verá algo similar a lo siguiente:

Una vez que haya hecho clic en AÑADIR NUEVA EMERGENCIA (que se explica por sí mismo), se le pedirá que le dé un nombre y luego seleccione una plantilla de los ejemplos amp muestran. Hay varias plantillas disponibles para múltiples propósitos; algunos son apropiados para anuncios, otros para promover un descuento, otros son ideales para alentar a los usuarios a registrarse en algo. Incluso hay amp para advertir a los usuarios sobre el uso de cookies u otras notificaciones del RGPD. Tan pronto como haya encontrado algo que le guste, haga clic en él para ver una vista previa más grande y luego presione el botón Insertar.

Serás llevado al generador de ventanas emergentes en el backend de WordPress después de hacer clic en este botón.

Si ha trabajado con Elementor en el pasado, se sentirá como en casa con la interfaz, las opciones y la forma en que todo está diseñado para usted. Es esencialmente el mismo proceso que crear plantillas de página Elementor en WordPress.

En el lado derecho de la pantalla está el lienzo principal, que muestra una vista previa de lo que está trabajando actualmente. Puede editar y personalizar cada elemento individualmente seleccionándolo y seleccionando Editar> Editar elementos. Cuando haya terminado, verá los controles y las preferencias que se muestran en la barra lateral de la izquierda, junto con la opción para publicar su trabajo.

Configuración de la ventana emergente

 Aquí es cuando debería ver una vista previa de su ventana emergente, ya sea una pizarra en blanco o la plantilla que eligió.

La configuración emergente, siempre abierta de forma predeterminada, le permite personalizar cómo funciona el lienzo emergente. Son los siguientes:

• Aquí es donde querrá pasar la mayor parte del tiempo porque es donde podrá crear diferentes tipos de ventanas emergentes. En otras palabras, al ajustar esta configuración, podrá realizar los siguientes efectos:

• Las ventanas emergentes modales son un tipo de ventana modal.
• Deslizadores, barras de notificación, etc.

Además, puede personalizar varias otras configuraciones importantes.

Las siguientes opciones están disponibles en la pestaña Configuración :

• Cambia la altura y el ancho de la imagen.
• Cambiar la orientación vertical u horizontal del objeto (por ej amp le, usted podría fijarla a la parte superior o inferior para crear una barra de notificación)
• Tomar una decisión sobre si debe o no utilizar una superposición (esto le permite, por ej amp le, grises a segundo plano cuando el emergente está activo)
• Desactive el botón de cierre de su navegador.
• Incluya una animación para la entrada.

Puede hacer las siguientes cosas en la pestaña Estilo :

• Puede cambiar el color de fondo, convertirlo en un degradado o utilizar una imagen como fondo.
• Si la superposición está habilitada, configúrela.
• En caso de que tengas habilitado el botón de cerrar, debes configurarlo.

Finalmente, la pestaña Avanzado contiene algunas configuraciones de importación diversas que le permiten hacer cosas como las siguientes:

• Muestre el botón de cierre o haga que la ventana emergente se cierre automáticamente después de un cierto período de tiempo.
• Al hacer clic en la superposición o presionar la tecla Escape, puede evitar que la ventana se cierre.

• Desactive la capacidad de desplazarse hacia abajo en la página.
• Evite múltiples ventanas emergentes (si ha dirigido varias ventanas emergentes a la misma página, esto evitará que sus visitantes se molesten).

Para darle una idea de cómo esta configuración afectará su ventana emergente, así es como se ve cuando cambia la Posición a la esquina inferior derecha de la ventana:

Eche un vistazo a cómo la ventana emergente ahora está fijada permanentemente en la esquina inferior derecha. Usando un disparador de desplazamiento junto con una animación de entrada, puede lograr un efecto de deslizamiento agradable y discreto.

También puede crear ventanas emergentes usando el constructor visual en Elementor

Tan pronto como haya completado la configuración básica de la ventana emergente, puede comenzar a diseñar el contenido real de su ventana emergente arrastrando y soltando elementos en la interfaz visual de arrastrar y soltar.

Puede usar cualquier widget de Elementor que desee, lo que le brinda un gran control sobre el diseño final. El widget de formulario es lo único que debe incluir absolutamente porque es el único que le permite crear su formulario de suscripción de correo electrónico.

Con el widget de formulario, tiene un control completo sobre los campos que desea ofrecer, así como el texto y la apariencia del botón de envío. Para ex amp le:

Más allá de eso, le recomiendo encarecidamente que se familiarice con todos los widgets y opciones de diseño de Elementor.

Como se indicó anteriormente, tiene un gran control sobre la apariencia de su sitio web y también tiene acceso a algunos widgets útiles que pueden ayudarlo a aumentar su tasa de conversión.

Preferencias de publicación

Cuando esté satisfecho con lo que ha creado, querrá compartirlo con el mundo. Después de presionar el botón PUBLICAR, se le presentará una serie de preguntas. Como una ilustracion:

¿Es posible especificar las condiciones en las que desea que aparezca la ventana emergente? Puede elegir qué páginas incluir o excluir de sus resultados de búsqueda. Puede tener tantas condiciones como desee.

Entonces, ¿cuál es el evento que hace que aparezca la ventana emergente? Puede elegir si desea mostrar la ventana emergente inmediatamente al cargar la página, al desplazarse o cuando el usuario se desplaza a un elemento específico, entre otras posibilidades. Todas estas opciones tienen su configuración, lo que permite una personalización completa.

Por último, pero no menos importante, verá algunas reglas avanzadas, como mostrar la ventana emergente solo a los visitantes que regresan, solo mostrar la ventana emergente una cantidad determinada de veces, o tal vez solo mostrar la ventana emergente cuando un visitante es referido a su sitio web desde un sitio específico. URL. También hay algunos más. Estas opciones pueden mejorar significativamente la experiencia del usuario de su ventana emergente, permitiéndole diseñarla con verdadera integridad y consideración para sus usuarios.

Complete la configuración de la manera que desee, luego haga clic en GUARDAR Y CERRAR. Se le llevará a una amp de cómo se verá su ventana emergente después de hacer clic en este botón.

Las ventanas emergentes se pueden personalizar y se les puede agregar contenido dinámico.

Lleva las cosas al siguiente nivel, ¿de acuerdo? Hasta este punto, hemos seleccionado una plantilla y ajustado una o dos sesiones, y eso es todo. Considere el escenario en el que queremos personalizar aún más nuestra ventana emergente.

Estamos de vuelta en la etapa AGREGAR NUEVA EMERGENCIA del proceso, donde podemos especificar un título y elegir una plantilla una vez más.

Después de eso, podemos seleccionarlo, realizar los cambios necesarios en la configuración básica y presionar PUBLICAR una vez más.

Bien, aquí es donde las cosas comienzan a ponerse interesantes. Podemos usar Elementor para obtener datos dinámicos de nuestra instalación de WordPress e insertarlos en la ventana emergente en nuestra ventana emergente. Podemos incluir información como el nombre del usuario, el título de la página, etc.

Considere el siguiente escenario: estamos ejecutando WooCommerce y queremos informar a un usuario que hay un descuento disponible en el producto específico que está viendo actualmente. Para comenzar, seleccione una sección de texto de la plantilla y luego haga clic en Dinámico en la barra lateral:

Tenemos una amplia variedad de opciones para elegir, incluida la información de la publicación en sí, la información del sitio en su conjunto, la información de los medios, la información del autor e incluso la información de WooCommerce. Seleccionaremos un título de producto y se agregará a nuestro bloque de contenido de texto como resultado de nuestra selección.

Suponga que los detalles de la base de datos no se recuperan correctamente. En ese caso, es posible especificar algunos antes del texto, algunos después del texto y un texto alternativo (si los detalles de la base de datos no se recuperan correctamente).

Entonces, dupliquemos este proceso para el botón, que mostrará el precio del producto. Podemos formular el texto anterior como COMPRAR AHORA PARA proporcionarnos una llamada a la acción convincente:

Incluso podemos dar un paso más y utilizar la imagen del producto como fondo de la propia ventana emergente.

Cuando presionamos PUBLICAR, se nos presenta la configuración de publicación una vez más, lo que nos permite especificar que solo queremos que la ventana emergente aparezca en las páginas de WooCommerce. Configuraremos el temporizador en 15 segundos de inactividad para que sea el disparador. Así es como resultó al final:

Aunque el diseño podría mejorarse, puede ver que estamos mostrando el nombre del producto, su precio y una imagen del producto como fondo de la ventana emergente. ¡Brillante!