Cómo agregar una ventana emergente en Elementor gratis (no se requiere Elementor Pro)

Puedes agregar ventanas emergentes en Elementor sin pagar por Elementor Pro. Free Elementor no se envía con un creador de ventanas emergentes, pero Pro no es la única forma de obtener uno. El gratis Complementos maestros para Elementor el complemento incluye un completo Creador de ventanas emergentes, más de 100 plantillas listas para usar y cinco tipos de disparadores. Todo se encuentra en el complemento gratuito, sin temporizador de prueba ni marca de agua.

Necesita dos cosas: Elementor gratuito y el complemento Master Addons gratuito del directorio de WordPress. Configurar una primera ventana emergente lleva unos diez minutos. Esta guía cubre la construcción de uno, elegir cuándo se activa y elegir qué páginas lo muestran, junto con las preguntas que surgen con más frecuencia: ¿Elementor free tiene un generador de ventanas emergentes, cuál es elementor/popup/show el evento realmente lo hace y cómo abrir una ventana emergente con solo hacer clic en un botón sin escribir JavaScript.

¿necesita Elementor Pro para crear ventanas emergentes?

Respuesta corta: no. El generador de ventanas emergentes de Elementor Pro es una función paga, pero no es la única forma de agregar ventanas emergentes dentro de Elementor.

Esto es lo que realmente te ofrece cada opción:

Entonces, si las ventanas emergentes fueron la única razón por la que estaba mirando Elementor Pro, puede permanecer en Elementor gratis, instalar complementos maestros y crearlos con el mismo editor de arrastrar y soltar. Si ya tienes Pro, los dos se ejecutan uno al lado del otro sin conflictos.

Vale la pena ser específico sobre la palabra “gratis” aquí. El Generador de ventanas emergentes no es una prueba ni una versión reducida de un módulo pago. Master Addons vende una versión Pro, pero Pro cubre otras cosas: widgets adicionales y el Creador de widgets completo. Las ventanas emergentes se encuentran fuera de eso.

¿qué es el creador de ventanas emergentes de complementos maestros?

Master Addons es un complemento Elementor todo en uno utilizado por más de 30 000 sitios activos. Se envía con más de 80 widgets, a Creador de temas, una biblioteca de plantillas, a Creador de widgets, y un gratis Creador de ventanas emergentes. El Generador de ventanas emergentes no es una compra separada. Instale el complemento y estará ahí.

Diseñas ventanas emergentes visualmente dentro del editor Elementor, luego controlas cuándo aparecen (activadores) y dónde aparecen (condiciones de visualización). Sin código, sin complemento adicional, sin licencia Pro.

Por qué la gente elige el creador de ventanas emergentes de complementos maestros gratuitos

• Generador de ventanas emergentes gratuito incluido en el complemento. No se requiere actualización.
• La misma experiencia de diseño de arrastrar y soltar que ya conoces de Elementor.
• Más de 100 plantillas emergentes prediseñadas listas para importar con un solo clic.
• Cinco tipos de activadores: al hacer clic, cargar página, salir de intención, al desplazarse, después de la inactividad.
• Condiciones de visualización para cualquier publicación, página, categoría o tipo de publicación personalizada.
• Funciona en Elementor gratuito, alojamiento gratuito de WordPress y las últimas versiones de Elementor.

¿qué tipos de ventanas emergentes puedes crear?

• Ventanas emergentes de generación de leads y suscripción de correo electrónico
• Promociones de WooCommerce, pancartas de venta y ofertas de abandono de carritos
• Ventanas emergentes de video lightbox (YouTube, Vimeo, autohospedado)
• Cajas de luz de galería de imágenes
• Barras de anuncios y pancartas superiores
• Ventanas emergentes de inicio de sesión y formulario de registro
• Consentimiento de cookies y avisos del RGPD
• Comentarios, NPS y ventanas emergentes de encuestas
• Ventanas emergentes modales para términos, detalles de precios o información del producto

Los 5 activadores de ventanas emergentes en complementos maestros

1. Activador de desplazamiento

La ventana emergente se activa después del visitante se desplaza un porcentaje establecido de la página. Bueno cuando desea que aparezca una actualización de contenido o una suscripción por correo electrónico después de que el lector haya leído algo, no en la carga de la página cuando no ha decidido si se queda.

2. Activador de carga de página

La ventana emergente aparece después de un retraso que configuraste, medido en segundos. Se adapta a mensajes de bienvenida, ofertas por tiempo limitado y cualquier cosa que todos deban ver. Mira el valor de retraso. Cualquier valor inferior a 2 segundos tiende a molestar a las personas que tienen conexiones lentas.

3. Activador de intención de salida

La ventana emergente detecta cuando el cursor se mueve hacia la pestaña del navegador o el botón de cierre y activa un mensaje final. Esto es lo que la gente busca como “ventana emergente de intención de salida de Elementor“y está en el complemento gratuito Master Addons. Una advertencia antes de crear una campaña en torno a él: la intención de salida es un comportamiento de escritorio. Un teléfono no tiene cursor para rastrear, así que proporcione a los visitantes móviles un desplazamiento o un disparador de inactividad.

4. Al hacer clic en Activar

La ventana emergente se abre solo cuando un visitante hace clic en un botón, imagen o enlace específico. Es la forma más sencilla de crear un modal de clic para abrir sin tocar el código, y es el reemplazo gratuito del elementor/popup/show Evento JavaScript cubierto en la siguiente sección.

5. Después del disparador de inactividad

La ventana emergente vuelve a activar a un visitante que ha dejado de desplazarse o mover el cursor durante un período determinado. Bueno para recuperar la atención sin disparar a la primera vista, que es la forma más rápida de perder un lector.

Cómo utilizar el evento elementor/popup/show (y la alternativa gratuita)

Elementor Pro expone un evento de JavaScript llamado elementor/popup/show. Los desarrolladores lo usan para activar una ventana emergente a partir del código: activa una ventana emergente después de enviar un formulario personalizado, una respuesta AJAX o un botón que vive fuera del editor Elementor.

El patrón básico en Elementor Pro se ve así:

jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
    // your code runs when popup with this ID is shown
    console.log( 'Popup opened:', id );
} );

// To open a popup programmatically in Elementor Pro:
elementorProFrontend.modules.popup.showPopup( { id: 1234 } );

Si estás en Elementor gratis, no tienes acceso a elementorProFrontend.modules.popup.showPopup. Tampoco lo necesita para la mayoría de los casos de uso. Los complementos maestros En clic trigger maneja los comunes de forma nativa:

• Haga clic en un botón en cualquier lugar de la página, se abre la ventana emergente. Configure el selector de activación en una clase o ID de CSS y cualquier elemento coincidente abrirá la ventana emergente.
• Haga clic en una imagen, icono o enlace de texto, se abre la ventana emergente. La misma lógica del selector se aplica a cualquier elemento.
• Abra una ventana emergente después de enviar un formulario. Combine la acción de redireccionamiento o agradecimiento del formulario con un botón oculto que tiene el selector de ventanas emergentes.

El enfoque del selector se queda sin camino cuando la decisión ocurre en tiempo de ejecución, como abrir una ventana emergente solo si una llamada AJAX regresa con un valor particular. Para eso, haga que su script haga clic en un elemento oculto que lleva la clase de activación y deje que el selector haga el resto.

Si desea escuchar eventos de programas emergentes desde su propio código (análisis, lógica personalizada), vincule al evento global que la ventana emergente activa cuando se abre. El nombre exacto del evento está en el Documentación de complementos maestros para la versión que estás ejecutando.

Cómo activar una ventana emergente Elementor al hacer clic en un botón (gratis)

Una de las solicitudes más comunes, aquí está la configuración exacta:

1. Cree la ventana emergente en Master Addons, Popup Builder y diseñe.
2. En la configuración de la ventana emergente, cambie el disparador a En clic.
3. Introduzca un selector CSS en el campo de activación, por ejemplo .open-signup-popup.
4. Vaya a la página o plantilla con el botón. Edite el widget del botón Clases avanzadas de CSS campo y agregar open-signup-popup (sin punto, solo el nombre de la clase).
5. Guarda ambos. Cada botón con esa clase ahora abre la ventana emergente, en cualquier parte del sitio.

El mismo selector funciona en una fila, una columna, un encabezado, un ícono o cualquier elemento al que puedas darle una clase. Así es como obtienes un comportamiento idéntico elementor/popup/show sin escribir una línea de JavaScript. Una cosa a tener en cuenta: si utilizas un selector de ID como #open-popup, asegúrese de que ningún otro elemento de la página comparta la identificación; de lo contrario, haga clic en disparar desde el elemento incorrecto.

Plantillas emergentes gratuitas de Elementor: más de 100 diseños listos para importar

El complemento se entrega con una biblioteca de plantillas emergentes que cubre opciones de boletines informativos, banners de venta, promociones de WooCommerce, ofertas de intención de salida, cajas de luz de video, avisos de cookies y formularios de inicio de sesión. Cada plantilla se importa con un solo clic y es totalmente editable dentro de Elementor. Si prefieres empezar desde un diseño cercano a tu objetivo final, esto es más rápido que construir desde cero.

La biblioteca completa vive dentro del editor y es parte de la más amplia Biblioteca de plantillas de complementos maestros junto a plantillas de página y sección.

Paso a paso: cómo agregar una ventana emergente en Elementor usando complementos maestros

Paso 1: instale y active complementos maestros

1. Abra el panel de WordPress, complementos y agregue nuevos.
2. Busque “Complementos maestros para Elementor”.
3. Hacer clic Instalar ahora, atunci Activar.
4. Un nuevo Complementos maestros el elemento aparece en la barra lateral de WordPress.

Si el elemento de la barra lateral no aparece de inmediato, actualice el administrador (Ctrl+Shift+R / Cmd+Shift+R). Algunos complementos de almacenamiento en caché se mantienen en el menú de administración anterior durante un minuto.

Paso 2: abra el generador de ventanas emergentes

1. Ir a Complementos maestros, creador de ventanas emergentes.
2. Hacer clic Agregar nueva ventana emergente.
3. Dale a la ventana emergente un nombre descriptivo (por ejemplo, Boletín, publicaciones de blog).
4. Hacer clic Editar con Elementor.

Paso 3: elija una plantilla o comience desde cero

1. Haga clic en el icono de la biblioteca de plantillas de complementos maestros en el editor Elementor.
2. Explore la categoría emergente y obtenga una vista previa de los diseños.
3. Hacer clic Insertar en cualquier plantilla para importarlo al lienzo.
4. O omita la biblioteca y arrastre los widgets a un lienzo en blanco.

Paso 4: Diseñe el contenido emergente

1. Arrastre los widgets de Elementor: encabezado, editor de texto, botón, imagen, formulario.
2. Para capturar correo electrónico, utilice un widget de formulario y conéctelo a su servicio de correo electrónico.
3. Agregue un temporizador de cuenta regresiva, un ícono o un video usando los widgets principales de Elementor o Master Addons.
4. Ajuste fuentes, colores, relleno y espaciado en las pestañas Estilo y Avanzado.
5. Vista previa en vista de móvil y tableta para confirmar que el diseño aún funciona.

Paso 5: configure el activador emergente

1. Haga clic en el icono de engranaje en la parte inferior izquierda del editor para abrir Ajustes.
2. Abre el Gatillo pestaña.
3. Elija uno de los cinco activadores: al hacer clic, cargar página, salir de intención, al desplazarse, después de la inactividad.
4. Complete la configuración específica del activador: porcentaje de desplazamiento, segundos de retraso, selector de clic o duración de la inactividad.

Paso 6: establezca las condiciones de visualización (donde se muestra la ventana emergente)

Las condiciones de visualización deciden qué páginas muestran realmente la ventana emergente. La mayoría de los problemas de ventanas emergentes comienzan aquí. Una ventana emergente sin regla de visualización nunca aparece, por lo que es lo primero que se debe verificar cuando se ve bien en el editor, pero no aparece nada en la interfaz.

1. Abre el Condiciones de visualización pestaña en configuración emergente.
2. Elija un Incluir regla: Sitio completo, páginas específicas, publicaciones específicas, categorías, etiquetas o un tipo de publicación personalizada.
3. Agregue un Excluir regla para cualquier cosa que desee omitir (por ejemplo, excluir la página de pago de una ventana emergente en todo el sitio; de lo contrario, molesta a las personas que ya se han convertido).
4. Guarde las condiciones antes de publicar.

Para editar las condiciones de visualización más tarde, vuelva a abrir la ventana emergente, haga clic en el ícono de ajustes, vaya a Condiciones de visualización, cambie las reglas y actualice. El diseño y el disparador permanecen iguales. Sólo cambia la orientación.

Paso 7: publicar y probar

1. Hacer clic Publicar o Actualizar en la parte inferior izquierda del editor.
2. Abra la página que debería mostrar la ventana emergente en una ventana normal del navegador (no en la vista previa del editor).
3. Active la ventana emergente de la forma en que la configuró: haga clic en el botón, desplácese, espere o avance hacia la pestaña Cerrar.
4. Verifique el comportamiento responsivo en un teléfono real. La vista previa del editor es cercana pero no exacta.
5. Supervise los envíos de formularios y las tasas de conversión durante la primera semana.

Por qué no aparece una ventana emergente

Si la ventana emergente funciona en el editor pero nunca aparece en el sitio, casi siempre es una de estas cinco, en orden aproximado de la frecuencia con la que resulta ser la causa:

1. No se ha establecido ninguna condición de visualización. Una ventana emergente sin regla de inclusión coincide con ninguna página, por lo que nunca se representa en ningún lugar. Abra Condiciones de visualización y agregue una.
2. La ventana emergente sigue siendo un borrador. Guardar el diseño no es lo mismo que publicarlo. Verifique el estado en la parte inferior izquierda del editor.
3. Un caché sirve a la página anterior. Purgue el complemento de almacenamiento en caché y la CDN y luego pruebe nuevamente en una ventana privada.
4. El selector de clic no coincide. Para On Click, se necesita el campo de activación .my-class con el punto, mientras que el campo Clases CSS del botón toma my-class sin él. Mezclar esas dos cuentas para la mayoría de los informes que vemos.
5. Estás probando la intención de salida en un teléfono. No hay cursor para salir de la ventana gráfica, por lo que nada se activa. Pruebe ese en un navegador de escritorio.

Complementos maestros frente a Elementor Pro Popup Builder

Master Addons no es la única forma gratuita de hacerlo. Los complementos emergentes independientes, como Popup Maker, también tienen niveles gratuitos y, si las ventanas emergentes son lo único que necesita, vale la pena echarles un vistazo. Informan sobre las conversiones con más detalle que cualquier complemento de Elementor. La cuestión es que diseñas en su interfaz en lugar de la de Elementor y estás ejecutando un complemento que hace un solo trabajo. Master Addons tiene más sentido cuando desea crear la ventana emergente con el mismo editor, widgets y estilos que el resto del sitio.

¿Pesar otras opciones también? Compare las mejores herramientas una al lado de la otra en nuestro resumen de los mejores complementos de creación de ventanas emergentes para WordPress.

Para quién funciona mejor esta configuración

• Autónomos y desarrolladores web que no quieren comprar Pro solo para ventanas emergentes.
• Propietarios de tiendas WooCommerce que ejecutan pancartas de venta y ofertas de recuperación de carritos.
• Bloggers y creadores de contenido capturando suscriptores de correo electrónico.
• Agencias que gestionan muchos sitios de clientes con presupuestos ajustados.
• Startups y pequeñas empresas validan ofertas antes de pagar por herramientas premium.

Preguntas frecuentes