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:
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.
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:
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:
A continuación, se te pedirá que nombres tu plantilla. Una vez que hayas decidido el nombre, selecciona CREAR PLANTILLA:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
Haz clic en Popup y elige Abrir Popup en el menú desplegable Acción. También puedes seleccionar tu formulario en el menú Popup:
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ú:
A continuación, se te pedirá que nombres tu plantilla. Cuando hayas terminado, 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:
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:
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:
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í:
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:
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:
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 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)
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)
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.
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 sitio web bonito con Elementor es sólo el primer paso. También necesitarás un proveedor de Alojamiento de Aplicaciones, Alojamiento de Bases de Datos y Alojamiento Administrado de WordPress a tu lado.
¡Consulta nuestros planes de precios hoy mismo para ver cómo Kinsta puede potenciar tu sitio!
Deja una respuesta