Los formularios emergentes pueden ser herramientas de marketing esenciales, que te permiten captar direcciones de correo electrónico, promover las ventas y mucho más. Sin embargo, hacer popups atractivos y personalizados en WordPress no siempre es sencillo.

Afortunadamente, el plugin constructor de páginas Elementor facilita la creación y personalización de ventanas emergentes en tu sitio web. Puedes ajustarlas para que se adapten al diseño de tu sitio y añadir activadores basados en el comportamiento del usuario o en su origen.

Esta guía te dará una visión general de los diferentes tipos de ventanas emergentes de Elementor y de por qué puedes querer utilizarlas. Luego, explicaremos cómo hacer estas ventanas emergentes con las herramientas gratuitas y Pro de Elementor. ¡Empecemos!

Una visión general de las ventanas emergentes de Elementor

Elementor es uno de los plugins constructores de páginas más populares para los sitios web de WordPress. Te permite arrastrar y soltar elementos en su sitio para diseñar páginas bonitas y fáciles de usar:

Constructor de páginas Elementor
Constructor de páginas Elementor

Además, Elementor te permite crear una gran variedad de ventanas emergentes. Se trata de formularios personalizados que aparecen en tu sitio después de un tiempo predeterminado, o después de que un usuario complete una acción determinada.

Los popups pueden ser herramientas esenciales por varias razones. Puedes utilizarlos para recoger clientes potenciales y ampliar tu lista de marketing por correo electrónico. Los popups de Elementor se integran con el software de marketing por correo electrónico, enviando las direcciones de los clientes directamente a la plataforma que elijas.

Incluso puedes utilizarlos para promocionar ventas, descuentos y eventos relacionados con tu tienda de comercio electrónico. De este modo, las ventanas emergentes pueden formar parte de tu estrategia global de marketing.

Además, los popups pueden ayudarte a conectar con tus clientes. Puedes incrustar encuestas para pedir la opinión de los consumidores y mejorar tus productos y servicios.

Sin embargo, los popups pueden parecer baratos e intrusivos si no los diseñas bien y eliges los activadores correctos para tu audiencia. Por lo tanto, tendrás que asegurarte de que los utilizas de forma eficaz. Aquí es donde entra Elementor.

Los formularios emergentes pueden ayudarte a captar direcciones de correo electrónico, promover ventas y mucho más. 📧 ¡Aprende a crear los tuyos en esta guía! 🚀Click to Tweet

Tipos de Popups de Elementor

Elementor viene con más de 100 plantillas de popups que puedes personalizar según tus necesidades. Estos diseños incluyen:

  • Formularios de captación de clientes potenciales
  • Ventanas emergentes de registro de correo electrónico
  • Popups promocionales
  • Formularios de inicio de sesión y de bienvenida
  • Ventanas emergentes de contenido restringido
  • Formularios de venta cruzada y de venta adicional

Estas plantillas de popups vienen incorporadas en los kits de Elementor, que incluyen varias características de diseño para diferentes tipos de sitios web:

Plantillas popup de ElementorKits
Plantillas popup de ElementorKits

Además, puedes elegir entre diferentes colocaciones de ventanas emergentes y diseños visuales, entre ellos:

  • Modal
  • Slide-in
  • Pantalla completa
  • Barra superior o inferior

Por último, puedes utilizar el editor de Elementor para personalizar rápidamente cualquier plantilla de ventanas emergentes para adaptarla a tus necesidades. A continuación te explicaremos cómo puedes hacerlo con Elementor gratuito y con Elementor Pro.

¿Cómo crear una ventana emergente con Elementor (gratis)?

Anteriormente, el plugin Essential Addons for Elementor tenía una función Modal Popup que permitía a los usuarios crear un formulario emergente gratuito. Su uso era una de las formas más populares de evitar el pago de Elementor Pro. Puedes encontrar muchos vídeos tutoriales de hace unos años para mostrarte cómo utilizar este método.

Sin embargo, la función gratuita Modal Popup se ha transformado en un elemento Lightbox y Modal premium. Su uso ya no es gratuito. Por lo tanto, tendrás que actualizarte a Elementor Pro o pagar por uno de los plugins premium de Elementor que cubrimos más adelante en este post.

¿Cómo crear un Popup con Elementor Pro? (en 5 sencillos pasos)

Elementor Pro viene con una función de Popups incorporada que utilizaremos en este tutorial. Primero tendrás que comprar y activar Elementor Pro. Después, puedes dirigirte a tu panel de control de WordPress para empezar a crear popups.

Paso 1: Crea tu ventana emergente

Empieza por ir a Elementor > Plantillas > Popups en tu panel de control de WordPress. A continuación, haz clic en AÑADIR NUEVO POPUP para crear uno nuevo:

Ve a "Plantillas" y luego a "Añadir nueva ventana emergente"
Ve a «Plantillas» y luego a «Añadir nueva ventana emergente»

A continuación, se te pedirá que nombres tu plantilla. Una vez que hayas decidido el nombre, selecciona CREAR PLANTILLA:

Nombra tu plantilla de ventana emergente y haz clic en "Crear"
Nombra tu plantilla de ventana emergente y haz clic en «Crear»

Esto lanzará el constructor de páginas de Elementor. Ahora puedes elegir entre los diseños de plantillas de ventanas emergentes existentes o construir la tuya propia desde cero. En nuestro ejemplo, hemos elegido una de las plantillas existentes para editarla:

Elige entre los diseños de ventanas emergentes existentes o construye uno desde cero
Elige entre los diseños de ventanas emergentes existentes o construye uno desde cero

Ahora puedes jugar con los ajustes de diseño para personalizar tu ventana emergente. Por ejemplo, puedes cambiar su diseño, alineación, imágenes de fondo y colores.

Paso 2: Elige las condiciones de visualización

Una vez que estés satisfecho con tu diseño, haz clic en la flecha que mira hacia arriba junto a PUBLICAR. A continuación, selecciona Condiciones de visualización en el menú que aparece:

Elige tus condiciones de visualización
Elige tus condiciones de visualización

A continuación, pulsa AÑADIR CONDICIÓN para elegir dónde se mostrará tu ventana emergente de Elementor en tu sitio web. A continuación, puedes seleccionar una ubicación entre las siguientes opciones: Todo el sitio, Archivos, Singular o WooCommerce:

Elige dónde quieres que se muestre la ventana emergente
Elige dónde quieres que se muestre la ventana emergente

Cuando estés satisfecho con tu elección, pulsa SIGUIENTE. Serás llevado a los activadores de tu formulario emergente.

Paso 3: Configurar los activadores de tu ventana emergente

En la página de activadores, puedes decidir qué deben hacer los usuarios para ver tu ventana emergente de Elementor. Por defecto, cada opción está desactivada, y puedes activarla haciendo clic en el control deslizante. A continuación, tendrás que especificar los valores para tu activador.

Por ejemplo, si optas por «Al cargar la página», tendrás que elegir en cuántos segundos se mostrará tu ventana emergente:

Selecciona los activadores de la ventana emergente que quieras
Selecciona los activadores de la ventana emergente que quieras

Con On Scroll, puedes elegir en qué dirección debe desplazarse el usuario y qué parte de la página debe cubrir antes de que aparezca la ventana emergente:

Activadores de desplazamiento de página
Activadores de desplazamiento de página

La configuración de On Scroll To Element requiere que introduzcas un ID CSS. Cuando un usuario llegue a ese elemento de tu página, aparecerá la ventana emergente:

Activadores de desplazamiento a elemento
Activadores de desplazamiento a elemento

Con On Click, tendrás que especificar cuántas veces debe hacer clic un usuario en tu página web para que se muestre la ventana emergente:

Más opciones de activación en las reglas avanzadas
Más opciones de activación en las reglas avanzadas

El ajuste Después de la Inactividad te permite activar tu ventana emergente después de que el usuario haya estado inactivo en tu página durante un tiempo determinado:

Activadores de inactividad
Activadores de inactividad

Por último, puedes optar por activar la intención de salida de la página. Este ajuste activará tu ventana emergente cuando un usuario intente salir de tu página:

Selecciona el activador "Intención de salida de la página" cuando corresponda
Selecciona el activador «Intención de salida de la página» cuando corresponda

Haz clic en GUARDAR Y CERRAR o en SIGUIENTE para ir a las Reglas Avanzadas cuando hayas terminado. Veremos estas reglas un poco más adelante en este tutorial.

Paso 4: Añade un botón emergente a tu sitio (opcional)

Puede que quieras activar tu ventana emergente de Elementor cuando un usuario haga clic en un elemento específico de tu página. Por ejemplo, puedes diseñar un botón que diga «Regístrate ahora» e incrustarlo en tu pie de página. Cuando un usuario haga clic en el botón, verá tu formulario de registro por correo electrónico en su pantalla.

En primer lugar, tendrás que crear un botón Elementor en tu sitio web. Abre el post o la página en el editor de Elementor y elige Botón en el menú. Arrástralo y suéltalo en tu página:

Elige la opción "Botón" del menú
Elige la opción «Botón» del menú

Una vez que hayas especificado el texto del botón y personalizado su aspecto, haz clic en Enlace > Etiquetas dinámicas. A continuación, elige Acciones > Ventana emergente en el menú desplegable:

Selecciona la acción emergente para el botón
Selecciona la acción emergente para el botón

Haz clic en Popup y elige Abrir Popup en el menú desplegable Acción. También puedes seleccionar tu formulario en el menú Popup:

Selecciona la opción emergente
Selecciona la opción emergente

Por último, selecciona ACTUALIZAR para publicar tu botón. Cada vez que un usuario haga clic en él, será llevado a tu formulario de registro.

Paso 5: Guarda tus plantillas de ventanas emergentes para más adelante

También puedes guardar tus ventanas emergentes como plantillas. Abre tu ventana emergente con el editor de Elementor y haz clic en la flecha hacia arriba junto a ACTUALIZAR. Elige Guardar como plantilla en el menú:

Guarda tu ventana emergente como plantilla
Guarda tu ventana emergente como plantilla

A continuación, se te pedirá que nombres tu plantilla. Cuando hayas terminado, haz clic en GUARDAR:

Dale un nombre a la plantilla emergente y haz clic en "Guardar"
Dale un nombre a la plantilla emergente y haz clic en «Guardar»

La ventana emergente se guardará en tu Biblioteca de Plantillas. Ahora puedes utilizarla cuando construyas una página o un post con plantillas.

¿Cómo configurar los ajustes avanzados de las ventanas emergentes de Elementor?

Ya hemos cubierto cómo hacer una ventana emergente básica de Elementor. Sin embargo, también hay algunos ajustes avanzados que quizás quieras utilizar.

Vuelve a abrir tu ventana emergente con el editor de Elementor y navega hasta Reglas de visualización. Echemos un vistazo a los diferentes ajustes.

Ajustes de visualización de la ventana emergente

Algunas configuraciones avanzadas de visualización de la ventana emergente te permiten controlar cuándo los usuarios ven tu formulario. Estas configuraciones pueden ser útiles para dirigirse a los visitantes que regresan y no a los que llegan por primera vez.

Por ejemplo, puedes elegir mostrar tu ventana emergente después de que tu visitante haya visto tu página un determinado número de veces:

Más configuraciones y condiciones avanzadas
Más configuraciones y condiciones avanzadas

Como alternativa, puedes elegir Mostrar después de X sesiones. Esta configuración se dirige a las visitas en general y no a páginas específicas:

Mostrar ventana emergente después de una determinada cantidad de sesiones
Mostrar ventana emergente después de una determinada cantidad de sesiones

El ajuste Mostrar hasta X veces puede limitar el número de veces que los usuarios verán tu ventana emergente. Podrías considerar habilitarla si no quieres spamear a los visitantes con formularios intrusivos continuamente:

Selecciona cuántas veces verán los usuarios tu ventana emergente
Selecciona cuántas veces verán los usuarios tu ventana emergente

También puedes utilizar la configuración de Mostrar en dispositivos y Mostrar en navegadores para limitar dónde aparecerá tu ventana emergente. Las ventanas emergentes pueden ser especialmente intrusivas en los dispositivos móviles, por lo que puedes considerar desactivarlas allí:

¿Luchando con el tiempo de inactividad y los problemas de WordPress? Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Vea nuestras características
Puedes elegir la opción "Mostrar en dispositivos"
Puedes elegir la opción «Mostrar en dispositivos»

Proporcionar una mejor experiencia de usuario móvil puede mantener a tus visitantes contentos. También puede impulsar tus esfuerzos de optimización para motores de búsqueda (SEO) y ayudar a que tu sitio web ocupe un lugar más alto en los resultados de búsqueda.

Configuración del origen del usuario

Por último, Elementor te permite configurar los ajustes de visualización de las ventanas emergentes en función de la procedencia de tus usuarios. Estos ajustes pueden ser útiles si diriges a los visitantes a una página de aterrizaje promocional y luego utilizas tu ventana emergente para anunciar ofertas o pedir datos de contacto.

Los siguientes ajustes te permiten especificar las URL y elegir qué enlaces activarán las ventanas emergentes:

Mostrar a los usuarios que llegan desde un lugar específico
Mostrar a los usuarios que llegan desde un lugar específico

Por último, puedes elegir ocultar tus ventanas emergentes a los usuarios que hayan iniciado sesión. Puedes utilizar esta opción si tienes un sitio web de pago:

Ocultar las ventanas emergentes para los usuarios registrados
Ocultar las ventanas emergentes para los usuarios registrados

Cuando estés satisfecho con todos los ajustes elegidos, haz clic en GUARDAR Y CERRAR. Puedes volver a navegar aquí y cambiar cualquiera de estas configuraciones si es necesario.

Los 3 mejores plugins para Elementor Popups

Como hemos visto, Elementor Pro facilita la creación de ventanas emergentes para tu sitio web. Sin embargo, puede que no estés preparado para actualizarte al constructor de páginas premium. También es posible que busques funciones de diseño adicionales.

Aquí tienes algunos de los mejores plugins para popups de Elementor teniendo en cuenta estas consideraciones.

1. JetPopUp (Crocoblock)

JetPopUp (Crocoblock)
JetPopUp (Crocoblock)

JetPopUp es un plugin fácil de usar con una interfaz de arrastrar y soltar que se integra perfectamente con Elementor. Te permite crear formularios emergentes dinámicos y personalizados, incluyendo registros de correo electrónico, formularios de consentimiento de cookies y cuentas atrás.

JetPopUp brilla por sus características interactivas. Puedes elegir entre múltiples configuraciones de animación, como deslizar, voltear y rotar. Además, el plugin tiene varias plantillas que puedes personalizar según tus necesidades.

Este plugin también te permite seleccionar y personalizar múltiples configuraciones de visualización. Por ejemplo, puedes mostrar tus formularios JetPopUp a los usuarios en determinadas fechas cuando intenten salir de tu sitio web, o después de una determinada cantidad de desplazamiento.

Características:

  • Elige entre las plantillas de ventanas emergentes preestablecidas
  • Selecciona diferentes condiciones de visualización de la ventana emergente
  • Incluye y excluye condiciones específicas
  • Utilizar efectos de animación

Precio: JetPopUp cuesta 22 dólares al año. Este paquete incluye la integración con MailChimp, un widget de ventanas emergentes y asistencia al cliente. También puedes pasar a una suscripción con todo incluido por 130 $ al año. Viene con 20 plugins adicionales y 150 widgets extra.

2. Popup Box Widget (PowerPack)

Popup Box Widget (PowerPack)
Popup Box Widget (PowerPack)

Si buscas una configuración avanzada de las ventanas emergentes de Elementor, considera el uso de Popup Box Widget de PowerPack. Te permite crear ventanas emergentes personalizadas que incluyen elementos dinámicos como vídeos, imágenes y mapas de Google.

Este plugin te permite activar las ventanas emergentes según varias acciones del usuario, incluyendo la intención de salida y los retrasos de tiempo personalizados. También puedes crear popups interactivos de dos pasos con enlaces y otros elementos de llamada a la acción (CTA).

Además, Popup Box Widget tiene ajustes avanzados de animación. Puedes hacer que tus ventanas emergentes se amplíen, utilizar un formato de periódico o usar animaciones 3D.

Características:

  • Elige entre los efectos de animación
  • Crea ventanas emergentes de dos pasos
  • Utiliza retardos y activadores de usuario
  • Muestra imágenes, vídeos y otros elementos interactivos

Precios: Popup Box Widget se incluye con una suscripción al PowerPack. Los planes empiezan por 49 $ al año y vienen con más de 70 widgets diferentes de Elementor.

3. Lightbox & Modal (Addons esenciales para Elementor)

Lightbox & Modal (Addons esenciales para Elementor)
Lightbox & Modal (Addons esenciales para Elementor)

Ya hemos hablado brevemente de este plugin de ventanas emergentes para Elementor. Lightbox & Modal es un widget versátil con la herramienta Essential Addons for Elementor. Te ayuda a crear ventanas emergentes con características interactivas como vídeos, imágenes y animaciones.

Lightbox & Modal está diseñado para funcionar con botones y enlaces en tu sitio web de Elementor. Puedes crear botones, iconos y textos personalizados que activen tus formularios emergentes. Además, el widget puede utilizar retrasos de tiempo y otras acciones del usuario.

En general, Lightbox & Modal podría ser la mejor opción para interactuar con tus usuarios en lugar de simplemente presentar información.

Características:

  • Utiliza disparadores de botones para las ventanas emergentes
  • Muestra imágenes, vídeos y contenido personalizado
  • Personaliza los diseños de las ventanas emergentes
  • Elige entre diferentes tipos de animación

Precio: Lightbox & Modal está incluido en Essential Addons for Elementor Pro. Los planes empiezan por 39,97 $ al año y tienen más de 70 widgets y siete extensiones.

Aprende a crear ventanas emergentes con las herramientas gratuitas y Pro de Elementor con la ayuda de esta guía paso a paso 💪📧Click to Tweet

Resumen

Los formularios emergentes pueden ser esenciales para tus campañas de generación de clientes potenciales y de marketing. También pueden ayudarte a interactuar con los visitantes y mantenerlos en tu página. Afortunadamente, puedes crear popups personalizados con el constructor de páginas Elementor.

Es súper fácil crear ventanas emergentes con Elementor Pro. Puedes personalizarlos para que coincidan con tu marca y decidir dónde se muestran en tu sitio. También puedes establecer una configuración de visualización avanzada para mostrar tu ventana emergente en función de las acciones y los orígenes del usuario.

Diseñar un bonito sitio web con Elementor es sólo el primer paso. También necesitarás un proveedor de hosting de WordPress. Consulta nuestros planes de precios hoy mismo para ver cómo Kinsta puede potenciar tu sitio.


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 34 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.