blog webempresa

¿Cómo crear un popup con Elementor?

por | Abr 20, 2023 | Tutoriales Elementor

¿Cómo crear un popup con Elementor?

Los popups son una solución a tener en cuenta si queremos aumentar las ventas y obtener los correos electrónicos de los visitantes para campañas publicitarias. Sin embargo, crear un popup en WordPress puede convertirse en un trabajo desafiante, pero al utilizar uno de los page builders WordPress más populares en nuestra página web, vamos a tener una forma sencilla de usar popup con Elementor.

Es posible generar y personalizar popups para nuestro sitio web por medio de este plugin. Esto puede ayudarnos a que el diseño mejore con opciones de visualización, control de activadores y más ajustes disponibles en el plugin.

Es por esto que vamos a explicar a lo largo de esta guía tanto que es un popup WordPress como las formas correctas de usarlos con Elementor, de esta forma lograr que nuestro sitio sea productivo pero manteniendo el estilo.

¿Cuándo usar popups en Elementor?

 

Los popups pueden ser una buena solución para convertirse en un llamado de atención para nuestros visitantes, aumentar las tasas de conversión del sitio y más. Pero, debemos usarlos de una forma consciente y estratégica para evitar que sean molestos o intrusivos para los usuarios que visitan nuestro sitio web.

Ejemplo de popup

Los popups son herramientas que poseen diferentes objetivos, si por ejemplo queremos utilizarlos para obtener clientes potenciales o ampliar nuestra lista de email marketing podemos hacerlo.

Podemos utilizar estos popups para promociones de ventas, avisos de descuentos, ruedas de descuentos con WooCommerce, eventos, notificaciones en WordPress, entre otros usos más. Convirtiendo esta opción en una parte fundamental en cuanto a marketing.

Otra de las ventajas que podemos tener al usar popups es que nos ayudan a conectarnos con los clientes, al responder encuestas en WordPress para medir la satisfacción o de opiniones sobre servicios o productos de nuestro sitio web, podemos tener una retroalimentación que muchos desean.

Lo importante de los popups es que, más allá del uso excesivo que se le da en algunos sitios, este recurso es muy bueno si se usa de forma adecuada. Por lo tanto, es importante que los utilicemos de una forma sencilla y efectiva, es aquí donde sale a relucir el potencial del plugin Elementor para hacer esto posible.

Mejores plugins de popups para Elementor

 

Como hemos podido ver, el crear un popup es una herramienta muy grande que puede ayudarnos a lograr un objetivo en concreto como empresa. En este caso, al utilizar Elementor como constructor de bloques, algo similar a lo que serían los bloques reutilizables Gutenberg podemos tomar varios plugins que son creados para trabajar mejor con él.

De esta forma vamos a ver que nos pueden ayudar a mejorar o facilitar el trabajo de hacer los popups con Elementor, solo con instalar los plugins ya podemos disfrutar de sus mejoras.

Elementor Popup Builder: esta es una herramienta integrada con la versión pro del plugin Elementor. Esta herramienta nos va a permitir crear popups personalizados en nuestra web, la podemos usar para diseñar popups atractivos e integrarlos a servicios externos.

Elementor pro

Essential Addons for Elementor: este plugin va más allá de ser solo para crear popups, este es un conjunto de extensiones que se utilizan para Elementor, ofrece una cantidad de más de 70 widgets WordPress que agregan características como: diseños, animaciones, popups, efectos de desplazamientos, tablas de precios y muchos más.

De igual forma cuenta con opciones avanzadas para que podamos ajustar los diseños a las necesidades que tengamos en nuestro sitio web, también dispone de una versión gratuita con ajustes limitados.

Essencial addons elementor

Exclusive Addons for Elementor: este plugin agrega un conjunto de widgets y elementos premium al constructor de Elementor, ofrece una gran variedad de funciones útiles que no están disponibles con normalidad en la versión básica de elementor.

Incluye más de 50 widgets entre: diseños predefinidos, animaciones en WordPress, efectos y más. Nos permite personalizar y mejorar los diseños con herramientas fáciles de configurar y se puede utilizar en páginas y también plantillas.

Exclusive addons elementor

PowerPack for Elementor: este plugin agrega bloques de construcción, diseños de páginas nuevas y más funciones personalizadas al constructor de Elementor, con este plugin podemos mejorar las funciones básicas de Elementor para crear popups y cuadros de diálogo.

Powerpack para Elementor

JetPopup: este plugin es de pago, integra opciones tanto a la versión de popups de Elementor como opciones a nuestro sitio web. Podemos personalizar plantillas, agregar efectos de animación, activadores de eventos y más.

Este es compatible de igual forma con software de email marketing como Mailchimp para WordPress o Convertkit en WordPress para mejorar nuestra estrategia de marketing. Es fácil de utilizar y ofrece una interfaz intuitiva para crear y publicar popups de forma fácil.

JetPopup para elementor

¿Cómo crear un popup con Elementor?

 

Para utilizar la función de Popups en Elementor, es necesario tener la versión Pro del plugin. Una vez que se adquiere y se activa Elementor Pro, se puede acceder a la herramienta de Popups en el panel de control de WordPress para comenzar a crearlas. En este tutorial, explicaremos cómo utilizar esta función de Elementor para crear popups efectivos en tu sitio web.

Crea un popup

 

Lo primero que tenemos que hacer es crear un nuevo popup, para esto ingresamos a Elementor > Plantillas > Popups en esta página vamos a hacer clic en el botón de añadir nuevo popup:

Crear un nuevo popup

Luego de esto nos va a solicitar un nombre para este popup, una vez que sepamos cuál asignarle hacemos clic en crear plantilla:

Nombre de popup

Al crear el popup nos mostrará algunas opciones para construir nuestra página con las opciones de Elementor. Es aquí donde podemos elegir plantillas ya hechas o crear una nosotros mismos, para crearla debemos hacer clic en la X de la parte superior derecha.

Crear popup desde cero

Es aquí donde vamos a poder crear nuestro popup con las opciones que queramos. Por ejemplo, podemos cambiar el texto, fondos, alineaciones, imágenes, márgenes, colores y demás.

Editar contenido del popup

Condiciones de visualización

 

Una vez terminamos por completo el diseño de nuestro popup, debemos hacer clic en el botón de abajo a la izquierda que indica publicar. En este vamos a seleccionar las condiciones para que se visualice el popup:

Botón de publicar popup

Es ahora donde debemos seleccionar las condiciones para que se muestre nuestro popup, hacemos clic en añadir condición de esta forma seleccionaremos donde se va a ver este popup que hemos creado. Entre las opciones disponibles tenemos: todo el sitio, archivos, singular y en caso de tener una tienda WordPress nos mostrará la opción de WooCommerce:

Agregar condición a popup

Cuando sepamos y asignemos donde se va a visualizar este popup podemos hacer clic en el botón de siguiente para continuar con los demás pasos.

Activadores del popup

 

La siguiente sección es la de activadores, aquí podemos hacer que los usuarios tengan que cumplir ciertas condiciones para que se muestre nuestro popup. Todas las opciones por defecto están desactivadas, tendremos que ir viendo una a una cuál se adapta a nuestras necesidades.

Por ejemplo, la primera que nos permite seleccionar es la de (al cargar la página), si elegimos esta opción tendremos que posteriormente asignar cuantos segundos esperara el popup para salir:

Al cargar página en popop

Si activamos la opción (con scroll), podemos elegir la dirección en la que el usuario se tiene que mover en la página como también la cantidad para que se active nuestro popup.

Opción de scroll en popup

La opción de (scroll hacia elemento) posee cierta similitud con el scroll normal, la diferencia es que este debemos conocer el ID de CSS del elemento al que el usuario tiene que llegar para que se muestre el popup.

Con la opción de (al hacer clic), debemos especificar el número de veces que el visitante tiene que hacer clic en la página para que se muestre el popup, así mismo la opción de (después de inactividad) nos permite seleccionar el tiempo que debe permanecer sin hacer nada para que se muestre el popup, este es utilizado en páginas de entradas en WordPress donde el usuario debe esperar o se mantiene estático leyendo el contenido.

Inactividad en popup

Como ultima opción tenemos la de (intención de salida), esta nos permite asignar la activación del popup cuando el usuario intente salir de nuestra página web:

Intento de salida en popup

Una vez hemos seleccionado una o varias de las opciones que tenemos disponible hacemos clic en siguiente o también podemos hacerlo en guardar y salir. Si seleccionamos el botón de siguiente vamos a ver algunos ajustes avanzados para el popup.

Ajustes avanzados del popup

 

La siguiente sección es opcional, de tal forma que no necesitamos activarlas, solo en caso de que sean necesarias, es por esto que vamos a nombrarlas para conocer que hacen cada una de ellas.

Mostrar después de X páginas vistas: esta opción nos permite activar que sea luego de una cantidad específica de páginas vistas por el usuario que se muestre el popup.

Mostrar después de X sesiones: esta opción permite que el usuario navegue por el sitio, pero solo mostrara el popup cuando sea la cantidad de veces que le asignemos que visite la web.

Mostrar después de X veces: esta nos permite asignar el número de veces que se abrirá el popup al día, semana, mes o año.

Cuando provenga de una URL especifica: podemos indicarle al popup que se muestre si el usuario viene de una URL o también ocultarle el popup depende de nuestro caso.

Mostrar cuando provenga de un sitio: es algo similar a la opción anterior, con la diferencia de que esta se puede usar si la persona ingresa desde páginas externas, un ejemplo de esta opción sería si la persona entra al hacer clic en un enlace de Google.

Ocultar para usuarios logueados: esta opción es bastante útil si solo los usuarios con cuenta son nuestros administradores, ya que evitará que estos estén viendo una y otra vez los popups al editar el sitio.

Mostrar en los dispositivos: nos permite asignar los dispositivos donde se mostrara el popup, si queremos que solo se vea en teléfonos es aquí donde debemos configurarlo.

Mostrar en los exploradores: caso contrario al anterior, esta opción configura los exploradores donde se va a ver este popup, comprendiendo qué exploradores son: Opera, Firefox, Chrome, safari, entre otros.

Botón activador

 

En algunos casos vamos a querer activar el popup de Elementor cuando hagamos clic en un botón o un elemento que tenga un enlace dentro de la página web. Por ejemplo, podemos crear un botón con el texto de Registrate ahora el cual tenga un formulario de suscripción en WordPress en forma de popup para completar el registro.

Para hacer esto, primero tenemos que crear un botón o elemento dentro del Elementor para que se active, una vez hagamos clic en él, vamos a utilizar un botón en este ejemplo.

Crear botón para popup

Una vez que tenemos creado nuestro botón para el popup hacemos clic en Enlace > etiquetas dinámicas entre las opciones que se muestran seleccionamos Acciones > ventana emergente:

Selección de popup en enlace

Para configurar cuál es el popup de los que hemos creado que se abrirá al hacer clic, ingresamos a la herramienta que tiene a un lado del nombre y seleccionamos de la lista escribiendo el nombre de nuestro popup creado previamente:

Asignación de popup al botón

Por último, y no menos importante hacemos clic en el botón de actualizar o publicar según sea el caso. Una vez hecho esto tendremos el botón asignado a nuestro popup creado.

  Conclusiones

 

Elementor nos ofrece una gran variedad de opciones y herramientas para crear popups efectivos y atractivos en tu sitio web. Ofreciendo mejoras en:

  • Personalización de diseños y contenido.
  • Segmentación.
  • Activación de los popups en momentos estratégicos.
  • Facilidad de visualización.
  • Muchos más beneficios.

Elementor nos ayuda a aumentar la efectividad de la estrategia de marketing y aumentar la conversión de visitantes en clientes. Con la ayuda de esta plataforma y un poco de creatividad, podemos crear popups que capten la atención de nuestra audiencia y generen resultados positivos para nuestro sitio web.

¿Te ha resultado útil este artículo?

Promo abril