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

Free Elementor no incluye un generador de ventanas emergentes. El Generador de ventanas emergentes es una función de Elementor Pro. Para obtener ventanas emergentes sin pagar Pro, instale gratis Creador de ventanas emergentes de complementos maestros, diseñe la ventana emergente dentro del editor Elementor normal, configúrela para que se abra al cargar la página y publique. Esa ruta es gratuita, funciona en la versión gratuita de Elementor y tarda unos cinco minutos.

Esta guía recorre todo el asunto, con capturas de pantalla tomadas en Elementor 4.2.4 y Master Addons 3.2. También cubre las partes que omiten la mayoría de los tutoriales: qué activadores son realmente gratuitos, cómo mantener una ventana emergente fuera de cada página cuando la orientación a la página es una función Pro y la API de JavaScript que reemplaza elementorProFrontend.modules.popup.showPopup cuando no tienes Pro.

¿elementor free tiene un creador de ventanas emergentes?

El propio creador de ventanas emergentes de No. Elementor se envía únicamente con Elementor Pro. Instale Elementor gratis y no habrá ningún elemento emergente en ninguna parte del menú, y el elementor/popup/show el evento no existe en la página.

Tienes tres salidas:

Master Addons es la opción que se trata aquí porque la ventana emergente está integrada en el mismo lienzo de Elementor que ya usa, por lo que no hay un segundo editor que aprender. Es un complemento gratuito en WordPress.org que se ejecuta Más de 30.000 sitios, y el generador de ventanas emergentes viene con la descarga gratuita.

Si prefiere comparar varias herramientas primero, mantenemos un resumen separado de ellas los mejores complementos de creación de ventanas emergentes para WordPress.

Lo que realmente te ofrece el creador de ventanas emergentes gratuito

La división a continuación se verificó control por control en el complemento, para que pueda ver dónde se detiene la versión gratuita antes de comenzar a construir.

Entonces, la versión gratuita le brinda una ventana emergente real con control de diseño real. Lo que no le brinda es variedad de activación y orientación a nivel de página. Ambos tienen soluciones alternativas y ambos se tratan a continuación.

Cómo agregar una ventana emergente en Elementor gratis, paso a paso

Paso 1: instale Elementor y complementos maestros

Desde el panel de WordPress vaya a Complementos → Agregar complemento, busca Elementor, instálelo y actívelo. Luego busque Complementos maestros para Elementor y haz lo mismo. Elementor Pro no es necesario en ningún momento.

El enlace Obtener Elementor Pro en esa captura de pantalla es el sorteo de que esta es la compilación gratuita. Todo lo siguiente se hizo exactamente en esa configuración. Las notas de instalación completas están activas en el documentos de instalación.

Paso 2: Abra los complementos maestros → Creador de ventanas emergentes

Al activar el complemento se agrega un Complementos maestros elemento en la barra lateral de WordPress. Ábrelo y haz clic Creador de ventanas emergentes.

Esta lista es más útil de lo que parece. Cada fila muestra la condición de visualización de la ventana emergente, ya sea activa o inactiva, y el código corto que puede usar para colocarlo en una sola página. Tenga en cuenta esa columna de código corto, solucionará el problema de orientación de página gratuita más adelante.

Paso 3: nombra la ventana emergente y activa la activación

Hacer clic Agregar nueva ventana emergente. Se abre un pequeño cuadro de diálogo con dos campos.

Dale un nombre que reconocerás en seis meses y luego gira Activación encendido. Una ventana emergente que queda inactiva nunca se representa en la interfaz, incluso si la publica e incluso si la coloca por código corto. Esta es la razón más común por la que una ventana emergente terminada no muestra nada.

Paso 4: establezca dónde aparece la ventana emergente

Cambiar al Condiciones pestaña en el mismo cuadro de diálogo.

En la versión gratuita obtienes una regla: Incluir → Sitio completo. Las otras reglas (Página principal, Singular, Archivo, Búsqueda, 404), el tipo Excluir y el botón Agregar condición son Pro. Si desea la ventana emergente en una sola página y permanece libre, avance hasta método shortcode.

Ahora haga clic Editar con Elementor.

Paso 5: comience desde una plantilla o un lienzo en blanco

El editor se abre con un marco emergente vacío. En el área de caída hay un botón de complementos maestros violeta junto a los botones de adición del propio Elementor. Haga clic en él para abrir la biblioteca de plantillas emergentes.

Hay 25 diseños emergentes allí, todos ellos disponibles en el complemento gratuito, que cubren ventas, lanzamientos de productos, ofertas de temporada, próximas páginas y sobre páginas. Pase el cursor sobre una tarjeta y haga clic Insertar para importarlo. Todo importa como elementos Elementor normales, para que puedas reescribir el texto e intercambiar los colores de inmediato.

La misma idea de biblioteca se encuentra en el complemento. Si también desea páginas y secciones ya preparadas, ese es el Biblioteca de plantillas de complementos maestros.

Paso 6: diseña la ventana emergente

¿Prefieres crear el tuyo propio? Arrastre los widgets al lienzo como lo haría en cualquier página. El encabezado, el editor de texto y el botón cubren una opción típica.

Algunas cosas que vale la pena hacer aquí:

• Mantenga la copia a una promesa. Un titular, una línea de texto de soporte, un botón.
• Verifique las vistas de tableta y móvil con los íconos del dispositivo en la parte superior. Una ventana emergente de 640 px está bien en una computadora portátil y está apretada en un teléfono.
• Para capturar correo electrónico, ingrese un widget de formulario desde cualquier complemento de formulario que ya haya ejecutado. El formulario de contacto 7 y MC4WP funcionan dentro de la ventana emergente.
• Toate 80+ Widgets de complementos maestros también están disponibles dentro de la ventana emergente, por lo que los temporizadores de cuenta regresiva y las tablas de precios funcionan igual que en una página.

Paso 7: elige el gatillo

Hacer clic Configuración de la ventana emergente MA en la barra de herramientas superior. Es el cuarto icono de la izquierda, el que parece un documento con un engranaje. Los tutoriales más antiguos apuntan a un engranaje en la esquina inferior izquierda, que es donde vivía antes del Elementor 4.

Se enumeran siete desencadenantes. Carga en la página es el libre, y Retraso después de la carga de la página (seg) acepta cualquier cosa de 0 a 60 en pasos de 0,1. De dos a tres segundos es un punto de partida sensato. El disparo molesta instantáneamente a las personas en conexiones lentas, y cualquier cosa que supere los diez segundos generalmente extraña al visitante por completo.

Debajo de él, Mostrar de nuevo retraso controla cuánto tiempo esperar antes de mostrar la ventana emergente nuevamente a alguien que la cerró. Gratis te da Sin Retraso, 1, 3 y 5 minutos. Pro extiende eso a horas, días, un mes y No volver a aparecer.

Deshabilitar el desplazamiento de página es gratuito y tiene el valor predeterminado Sí, que bloquea la página detrás de la ventana emergente.

Paso 8: establece el diseño, la posición y la animación

Abre el Diseño sección en el mismo panel. Todo es gratis.

Mostrar como cambia la ventana emergente entre tres formas:

• Modalidad emergente: el cuadro centrado que la mayoría de la gente entiende por ventana emergente.
• Barra de notificaciones: una tira fijada en la parte superior de la página, buena para anuncios y ofertas de envío.
• Pantalla completa: se hace cargo de la ventana gráfica, lo mejor para una única oferta sólida.

Luego, los diseños modales obtienen nueve posiciones, desde el centro central hasta la parte inferior derecha, y aproximadamente 70 animaciones de entrada. Fade In a 400 ms es el valor predeterminado seguro. El referencia de configuración emergente enumera todos los controles si desea el mapa completo.

Paso 9: publíquelo y pruébelo en la interfaz

Golpear Publicar, luego abra su sitio en una ventana privada. Aquí está la ventana emergente que se activa dos segundos después de la carga de la página, en Elementor gratuito con solo el complemento Master Addons gratuito activo.

Pruebe en una ventana privada en lugar de en la vista previa del editor. El editor suprime deliberadamente las ventanas emergentes y es posible que una pestaña normal del navegador le proporcione una página almacenada en caché.

Muestra una ventana emergente en una sola página, de forma gratuita

Las condiciones de visualización a nivel de página son Pro. El código corto es gratuito y alcanza el mismo resultado desde la otra dirección.

Cada ventana emergente en la lista Popup Builder lleva un código corto como . Péguelo en una página, una publicación, un área de widget o un widget de código corto en Elementor, y esa ventana emergente se carga solo en esa página. Colocarlo de esta manera omite por completo las condiciones de visualización.

Dos reglas para saber:

• La ventana emergente debe publicarse y su Activación alternar debe estar activado. Una ventana emergente inactiva no representa nada, sea de código corto o no.
• El código corto no genera ningún marcado visible donde lo pegas. La ventana emergente se imprime en el pie de página y se abre según su activador.

Entonces, una ventana emergente gratuita específica de la página se ve así: deje la condición en todo el sitio y suelte el código corto en la página que debería tenerlo.

Los siete activadores emergentes y cuáles obtienes gratis

La intención de salida es sólo de escritorio por naturaleza. Los teléfonos no tienen cursor para salir de la ventana, por lo que no hay nada que el activador pueda detectar. Pruébelo en un navegador de escritorio antes de presentar un error.

El disparador gratuito On Page Load tiene el suyo propio configurar documento si quieres la versión corta.

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

Este es el activador más solicitado después de la carga de la página y es el que la gente intenta falsificar con mayor frecuencia con JavaScript. Con Master Addons Pro es un campo de texto.

1. Diseñe y guarde la ventana emergente como de costumbre.
2. En Configuración de la ventana emergente MA, set Abrir ventana emergente a En clic.
3. En Abierto por selector, escriba el selector que incluye el punto, por ejemplo .open-newsletter-popup.
4. Edita el botón que debería abrirlo. Ir a Avanzado → Clases CSS y tipo open-newsletter-popup, asta vez sin el punto.
5. Actualice ambos y luego pruebe en la interfaz.

La falta de coincidencia de puntos en los pasos 3 y 4 provoca la mayoría de los informes que vemos sobre “mi activador de clic no hace nada”. El campo de activación toma un selector CSS, el campo Elementor toma un nombre de clase.

El selector no se limita a botones. Cualquier elemento al que puedas darle una clase funciona: un contenedor, un encabezado, un ícono, una imagen. También puede apuntar a un enlace existente con un selector de atributos como a[href="#pricing-popup"]. Hay un relacionado Widget de activación emergente para colocar acciones de cierre y redireccionamiento dentro de la propia ventana emergente.

Sin Pro, cuatro líneas de JavaScript hacen el mismo trabajo. Ese código está en la siguiente sección.

El evento elementor/popup/show y lo que lo reemplaza sin Pro

elementorProFrontend.modules.popup.showPopup y el elementor/popup/show ambos eventos pertenecen a Elementor Pro. El módulo emergente se registra en el elementorProFrontend objeto, entonces, en una instalación gratuita, ese objeto no está definido y el evento nunca se activa. Ningún fragmento lo recupera, porque el código que lo emitiría está en el complemento Pro.

El complemento gratuito Master Addons incluye su propia API que cubre el mismo terreno.

Master Addons expone un llamado global JltmaPopups en cualquier página donde haya una ventana emergente. Aquí está el mapeo:

Cada ventana emergente está impresa con la identificación DOM jltma-popup-id-<post ID>. El ID de la publicación es el número en el código corto en la pantalla de lista del Generador de ventanas emergentes. Para abrir la ventana emergente 441 desde su propio código:

jQuery(function ($) {
  var $popup   = $('#jltma-popup-id-441');
  var settings = JltmaPopups.getLocalStorage(441);

  JltmaPopups.openPopup($popup, settings);
});

Para conectarlo a un clic, que es el sustituto gratuito del activador On Click:

jQuery(function ($) {
  $(document).on('click', '.open-newsletter-popup', function (e) {
    e.preventDefault();

    var $popup   = $('#jltma-popup-id-441');
    var settings = JltmaPopups.getLocalStorage(441);

    JltmaPopups.openPopup($popup, settings);
  });
});

Y para cerrarlo de nuevo:

JltmaPopups.closePopup(jQuery('#jltma-popup-id-441'));

Tres cosas a tener en cuenta:

• getLocalStorage() devuelve false hasta que la ventana emergente se haya inicializado en la página, lo que ocurre en DOM Ready. Ejecute su código adentro jQuery(function ($) { ... }) y estás bien.
• La ventana emergente tiene que estar en la página para que todo esto funcione. O su condición incluye la página o la colocas con el código corto.
• El script se omite dentro del editor Elementor a propósito, así que pruébelo en la interfaz.

Por qué elementor/popup/show se activa dos veces

En Elementor Pro, el controlador que se ejecuta dos veces casi siempre significa que quedó vinculado dos veces: una vez activado elementor/frontend/init y nuevamente en un fragmento o un archivo de tema, o una vez por instancia emergente cuando hay varios presentes. Guárdelo con una bandera o vincule con .off('elementor/popup/show').on(...) antes de volver a encuadernar. El propio Elementor documentación de eventos emergentes enumera la firma completa del evento.

El equivalente de Master Addons no tiene ningún evento de documento para vincular dos veces, por lo que el problema no se transfiere. Tú llamas openPopup() directamente en el momento en que desea abrir la ventana emergente.

Por qué no se muestra su ventana emergente Elementor

En orden aproximado de la frecuencia con la que cada uno resulta ser la causa:

1. La activación está desactivada. Abra Master Addons → Popup Builder y verifique la columna Estado. Inactivo significa que nada se representa en ninguna parte, código corto incluido.
2. La ventana emergente sigue siendo un borrador. Guardar el diseño en Elementor no es lo mismo que publicar la ventana emergente.
3. Estás probando en la vista previa del editor. Las ventanas emergentes se suprimen allí por diseño. Utilice una ventana privada.
4. Caché. Purgue el complemento de almacenamiento en caché y la CDN y luego vuelva a cargar en una ventana privada. Una página HTML almacenada en caché no contendrá una ventana emergente recién publicada.
5. Show Again Delay ya despedido. Una vez que cierra la ventana emergente, el complemento almacena una marca de tiempo en el almacenamiento del navegador. Borre los datos del sitio o cambie de navegador cuando realice pruebas repetidamente.
6. El punto no coincide en un selector de clic. El campo de activación quiere .my-class, el campo Clases Elementor CSS quiere my-class.
7. Salir de la intención en un teléfono. No hay cursor, por lo que nada se activa. Sólo escritorio.

Complementos maestros frente a ventanas emergentes de Elementor Pro

Si las ventanas emergentes son la única función Pro que desea, el generador gratuito de complementos maestros más un código corto la cubre. Si desea salir de la intención o hacer clic en activadores sin escribir JavaScript, compare Precios de complementos maestros contra una renovación de Elementor Pro, ya que la licencia Master Addons también trae el Creador de temas y Creador de widgets con eso.

Preguntas frecuentes

Lectura relacionada

• Creador de ventanas emergentes de complementos maestros, la página de funciones con cada configuración enumerada
• Los mejores complementos de creación de ventanas emergentes para WordPress, si quieres comparar herramientas
• Configuraciones y opciones emergentes, la referencia de control total
• Complementos maestros en WordPress.org, foro de descarga y soporte