JetPopup o Popup Builder: ¿Cuál elegir?

Las primeras ventanas emergentes aparecieron en los años 90 y se crearon por Ethan Zukerman. Los usuarios quejaron del número enorme de anuncios en su sitio web, por lo que decidió colocar los banners en una página separada que se abrió cuando el usuario visitó la página principal. Aquel pequeño fragmento de código todavía no era una ventana emergente real que vemos en casi cada sitio web hoy en día, pero así es como todo inició. En las páginas web modernas las ventanas emergentes se utilizan para diferentes propósitos, no sólo para mostrar anuncios. Hoy en día en las ventanas emergentes a menudo se aparecen formularios de contacto, advertencias sobre políticas y sugerencias de suscripción.

Hay dos cosas que molestan a los usuarios en las ventanas emergentes: si aparecen cuando no quiere ver ellas; y cuando su aspecto difiere completamente del estilo general del sitio web. Ambos problemas se causan por el uso de complementos de baja calidad. El problema clave de la mayoría de los complementos es la falta del control sobre el resultado final. Sin embargo, puedes evitar todos esos problemas, si utilizas Elementor para crear tus sitios web. Hay dos complementos brillantes creados especialmente para el constructor web Elementor que te ayudan a crear ventanas emergentes de cualquier tipo, forma y estilo: Popup Builder y JetPopups. Como ambos se crearon para Elementor, la única pregunta es: ¿cuál de estos dos complementos elegir? Para ayudarte a tomar la decisión correcta, te ofrecemos el análisis profundo de ambos para que puedas comparar sus pros y contras.


Descarga e instalación

Éste no es el criterio más importante de la elección del complemento, pero es lo primero que debes tener en cuenta. Pues, comencemos desde el principio y describamos el proceso de obtención del plugin y la simplicidad de su instalación.


Popup Builder

Este complemento se creó por el equipo de Elementor, por lo que podemos llamarlo su "hijo". El plugin es la actualización más reciente lanzada en enero de 2019 para satisfacer las necesidades de los clientes. Sin embargo, no está disponible para los usuarios de la versión gratuita de Elementor. Popup Builder se incluye en el plan de suscripción Pro. Entonces, para obtener este complemento, primero debes obtener Elementor Pro. El plan más básico que te permite usar toda la variedad de productos de Elementor Pro cuesta 49 $ por año. Así que, el algoritmo de obtención de Popup Builder es:

  • Comprar Elementor Page Builder Pro.
  • Abrir tu cuenta personal y descargar el plugin.
  • Ir al panel de control de tu sitio web, Plugins > Añadir nuevo, hacer clic en el botón "Subir plugin" y seleccionar el archivo .zip.
  • Cuando la instalación se complete, activar el complemento con tu clave de licencia.
  • Popup Builder ya está disponible en la pestaña Plantillas > Popups.

Éste es un camino bastante largo, pero con Popup Builder también obtienes una gran colección de elementos web diferentes, aquellos como widgets adicionales, plantillas y otras herramientas.


JetPopup

Probar JetPopup

La "familia" de complementos Jet ya cuenta con más de 10 artículos, y JetPopup es uno de ellos. Se creó cuidadosamente y específicamente para Elementor para ampliar su número de herramientas. El complemento es totalmente compatible con amabas versiones de Elementor, tanto gratuita, como de pago, por lo que no tendrás que hacer compras adicionales. JetPopup cuesta 15 $ y después de comprarlo puedes usarlo en un solo sitio web. Si quieres utilizar JetPopup en más que 1 proyecto, puedes adquirirlo bajo la licencia del desarrollador (cuesta 45 $) y usarlo en hasta cinco sitios web. El algoritmo de obtención de este plugin es un poco más sencillo:

  • Comprar el plugin en el mercado de TemplateMonster. Se descargará a tu computadora.
  • Ir al panel de control de tu sitio web, Plugins > Añadir nuevo, hacer clic en el botón "Subir plugin" y seleccionar el archivo .zip.
  • Cuando la instalación se complete, activar el complemento.
  • ¡Voila! Cuando abres el menú de personalización de Elementor (haciendo clic en el botón "Editar con Elementor"), encontrarás la sección de JetPopup en el menú del widget a la izquierda.

Creación de ventanas emergentes

Ahora puedes proceder a la creación de una ventana emergente con ambos complementos para poder analizar su funcionalidad y facilidad de uso. A continuación crearemos una ventana emergente básica y echaremos un vistazo a las opciones de personalización de Popup Builder y JetPopups.


Popup Builder

En Elementor Pro las ventanas emergentes se crean por separado de las páginas del sitio web. Para editar la apariencia del sitio web, abre la página que necesitas personaliazar, haz clic en el botón "Editar con Elementor" y aplica los cambios necesarios. Pero para crear (y luego editar) las ventanas emergentes, ve a Plantillas > Popups y haz clic en el botón "Añadir nuevo popup".

Probar Popup Builder

En la ventana nueva debes elegir qué plantilla vas a crear (sí, puedes crear plantillas no sólo para ventanas emergentes, sino también para páginas y otros elementos) y escribir su nombre.

Después de hacer clic en el botón "Crear plantilla", serás redirigido al menú de personalización de Elementor. Es más fácil personalizar un elemento existente que construirlo desde cero, por lo que, en primer lugar, se te propone elegir una plantilla adecuada.

Elegimos una de las plantillas que se muestran en la parte superior de la lista. Justo después de hacer la elección procedes al campo de trabajo de Elementor al que probablemente te hayas acostumbrado ya. Las opciones de personalización se colocan en el menú a la izquierda de la pantalla. Hay tres pestañas. La pestaña "Configuración" te permite modificar el layout de la ventana emergente, cambiar el nombre de la plantilla y previsualizar el resultado. En la pestaña "Estilo" puedes personalizar su diseño, es decir, cambiar colores, fuentes, imágenes y bordes. La pestaña "Avanzado" ofrece un conjunto de ajustes adicionales; por ejemplo, evitar que la ventana emergente se cierre al hacer clic en la tecla ESC.

Como puedes ver, si ya has utilizado Elementor, no tendrás ningún problema con este complemento. Aquí está el video detallado (en inglés) de cómo crear una ventana emergente con la ayuda de Popup Builder:


JetPopup

Este complemento también añade una nueva pestaña a tu panel del tema de WordPress y con su ayuda las ventanas emergentes también se crean por separado de las páginas. Las ventanas emergentes ya hechas también se almacenan en una pestaña llamada "Popup library" (Biblioteca de popups). Para crear una nueva ventana emergente, puedes tanto hacer clic en el botón "Añadir" en la plantilla prediseñada para encontrar una opción correspondiente o ir a JetPopups > Añadir nuevo popup, nombrar la plantilla y hacer clic en "Editar con Elementor".

El campo de trabajo se ve un poco diferente, porque ahora estás creando una ventana más pequeña. En el menú a la izquierda puedes elegir qué elemento añadir a tu ventana emergente.

El complemento JetPopup agrega un solo elemento al menú del widget: un botón de acción. Te permite definir el tipo de acción que se realiza cuando un usuario hace clic en el botón.

 

No es realmente obvio cómo abrir la configuración de la ventana emergente. Tienes que hacer clic en el botón de mantenimiento en la parte inferior del menú. El menú de configuración es bastante similar al menú de Popup Builder, pero se compone de dos pestañas de personalización. "Configuración general" te permite elegir el efecto de animación, cambiar el nombre de la plantilla o establecer las condiciones. En la pestaña "Estilo" puedes editar diseños, colores, imágenes, fuentes y bordes.

JetPopups tiene una funcionalidad un poco menos obvia, pero esto compensa con los videotutoriales detallados y útiles (en inglés). Aquí está el primero de nueve videos en el que se describen los detalles del uso de este complemento:


Triggers/Activadores

Para ser útiles y no molestar a los visitantes, las ventanas emergentes deben aparecer en el momento adecuado. Las condiciones que determinan cuando se debe mostrar algún popup se llaman "activadores". Cuanto más detalladas son las condiciones, más flexible es el complemento de popup. La precisión es muy importante, si no deseas que el usuario abandone tu sitio justo después de que aparezca una ventana emergente.


Popup Builder

Este complemento te ayuda a establecer las condiciones necesarias justo después de que termines la personalización de la ventana emergente. Cuando haces clic en el botón "Publicar", ves una ventana en la que puedes definir las condiciones (en qué páginas se mostrará esta ventana emergente), los activadores (cuando se mostrará la ventana emergente) y algunas reglas avanzadas. El constructor de ventanas emergentes proporciona seis activadores, aquellos como mostrar popup cuando un usuario se desplace o haga clic, y siete reglas avanzadas, por ejemplo, mostrar un popup después de un número determinado de sesiones o mostrarlo sólo en algunos dispositivos.


JetPopups

Todos los activadores, condiciones y eventos de apertura se reúnen en la sección de configuración. Después de hacer clic en el botón de mantenimiento, se abren las pestañas de configuración y te permiten de inmediato establecer los activadores. Puedes definir el porcentaje de la página hasta que un usuario deba desplazarse para que se muestre un popup, o el número de segundos después de que un usuario verá el popup. La ventana se puede mostrar solo una vez o cada vez que un usuario realiza una acción determinada. También puedes elegir con precisión las publicaciones o páginas en las que se mostrará tu ventana emergente. En general, este complemento es bastante flexible y permite mostrar ventanas emergentes con gran precisión.


Posicionamiento

Los usuarios no podrán perder las ventanas que aparecen directamente en el centro de la pantalla, pero distraen la atención del sitio web y pueden ser realmente molestas. No todas las ventanas emergentes deben colocarse en el centro: una cinta estrecha en la parte superior será menos visible, pero puede ser mucho más eficiente. Así que, sería mejor poder controlar la posición de tu ventana emergente.

Tanto Popup Builder como JetPopups dividen la pantalla en nueve sectores y te permiten colocar tu ventana emergente en cualquiera de ellos. El posicionamiento se define con las escalas izquierda-derecha y arriba-abajo.


Efectos de animación

La forma en que una ventana emergente aparece en la página es muy importante. Si una ventana se mueve demasiado rápido o demasiado lento, no será eficaz. Otros efectos también se deben usar con mucho cuidado. Los efectos de animación hacen que el sitio web sea más dinámico, pero también pueden arruinar toda la impresión.

Popup Builder proporciona 36 tipos de efectos de animación, incluso diferentes tipos de deslizamiento, zoom, rebote y rotación. Todo esto, junto con la configuración de duración de animación, se puede encontrar en la sección "Diseño" de la pestaña Configuración.

Hay 13 tipos de animaciones en el complemento JetPopups, incluso los efectos de desvanecimiento, giro vertical, deslizamiento y zoom. Encontrarás todas las animaciones en la sección "Configuración" de la pestaña Configuración.


Plantillas

En algunos casos puede ser que necesites una ventana emergente con una estructura específica y un diseño determinado. Pero con mayor frecuencia no tienes ni una idea de qué elementos debe contener tu ventana emergente futura. En este caso sería mejor optar por las plantillas listas para usar. Incluso si no planeas utilizar ninguna de las muestras prediseñadas, sus aspectos pueden inspirarte. Y, por supuesto, personalizar un producto ya hecho es mucho más rápido y más fácil que construirlo desde cero.

 

Popup Builder agregó una categoría a la biblioteca de plantillas de Elementor. Como ya te dijimos, puedes verla al iniciar el proceso de creación de ventanas emergentes. El surtido de plantillas de ventanas emergentes es grande: hay más de 100 artículos. En la esquina superior izquierda hay una herramienta de clasificación desplegable para que puedas acelerar la búsqueda. Las categorías son comprensibles y no te tomará mucho tiempo encontrar la ventana emergente que necesitas.

JetPopup también tiene una enorme biblioteca de plantillas. Todas ellas están recogidas bajo la pestaña Popup Library (Biblioteca de ventanas emergentes) y tienen aquellas funciones como el botón de vista previa y el contador de uso. Hay un poco más opciones de clasificación, y su lista se puede filtrar para que se muestre algún tipo específico de plantillas y también se puede colocar ellas en algún orden a tu elección, por ejemplo, según la fecha de creación. No sabemos el número exacto de plantillas disponibles, pero ciertamente hay más de 100 de ellas.


Tabla de comparación

Popup BuilderJetPopups
Precio45 $15 $
Plantillass100+100+
Triggers6 triggers, 7 reglas avanzadas5 eventos abiertos con ajustes adicionales
Efectos de animación36 tipos13 tipos
Tutorialesdocumentacióndocumentación, 9 video tutoriales

Conclusión

No podemos decir cuál de estos dos complementos es mejor. Cada paroyecto y cada persona tiene sus propios requisitos específicos. Es que deberías definirlo tú mismo: ¿cuál de estos dos sería mejor para ti?

Fuente: "JetPopup or Popup Builder: Which One do you Choose?" por Lana Miro