¿Cómo crear un popup con Elementor?

¿Cómo crear un popup con Elementor?
Tabla de Contenidos

_ Te asesoramos sin compromiso _

Presupuesto diseño web​ ¿Tienes un proyecto en mente? Cuéntanoslo
Los datos facilitados a través de este formulario serán tratados por GALERNA ESTUDIO S.L.U. con CIF B39706023 y domicilio en Calle San Fernando, 58, 8-D · 39010 Santander (Cantabria) de acuerdo con lo establecido en nuestra política de privacidad con la finalidad de poder enviarle información sobre nuestros productos / servicios. Los datos recabados por este formulario no se cederán a terceros salvo por obligación legal. Le recordamos que usted tiene derecho al acceso, rectificación, limitación de tratamiento, supresión, portabilidad y oposición al tratamiento de sus datos dirigiendo su petición a la dirección postal indicada o al correo electrónico [email protected] Igualmente puede dirigirse a nosotros para cualquier aclaración adicional. En caso de no aceptación sus datos no serán tratados.

Los popups resultan ser excelentes herramientas de marketing si se implementan adecuadamente. Sin embargo, hacer esto correctamente y de forma eficiente no siempre es sencillo, son muchos aspectos a tomar en cuenta. Por tal motivo, hoy traemos este post sobre cómo crear un popup con Elementor atractivo y realmente efectivo. ¡Acompañanos!

Con esta guía podrás tener una idea más clara de qué trata un popup, los diferentes tipos que existen y porque debes utilizarlos. Y como ya lo dijimos, también tendrás la oportunidad de aprender cómo crear un popup con Elementor en WordPress.

Es de saber, que Elementor es un plugin constructor de páginas que facilita en gran medida la creación y personalización de un sitio web, ya que ofrece infinitas opciones de diseño, como por ejemplo los popups, los cuales se pueden ajustar  para que se adapten al diseño la página, así como configurar para que se activen en función al comportamiento del usuario.

Ahora bien, y por si no lo sabes, el término pop-up hace referencia a aquellas ventanas que aparecen inesperadamente cuando se navega por un sitio web. Su principal función es captar la atención del usuario con información relevante o complementaria, con la que se desea generar algún tipo de conversión.

No obstante, el uso de estos debe realizarse con mucha precaución debido a que tienden a ser un poco invasivos, lo que hace que la experiencia de usuario no sea óptima.

Debemos tener presente que estas ventanas no han sido solicitadas por el usuario, por lo que este podría percibirla como algo poco amigable, si no se utiliza de manera acertada.

Beneficios de utilizar Elementor para crear popups

La gran ventaja que proporciona Elementor es que permite integrar popups al diseño de un sitio web de una forma fácil y rápida. Con su sistema de arrastrar y soltar, el trabajo se reduce significativamente.

Así mismo, ofrece una gran variedad de ventanas emergentes, las cuales se pueden configurar para que aparezcan después de un tiempo determinado, luego de que el usuario realice una acción en concreto o bajo otras condicionantes.

Ahora, si hablamos en concreto de los beneficios de implementar popups con ayuda de Elementor, se puede decir que pueden llegar a convertirse en perfectos aliados por muchas razones. Los puedes utilizar para captar potenciales clientes y para ampliar la lista de marketing por correo electrónico. Es importante saber, que un popup de Elementor se puede integrar al software de marketing por correo electrónico, enviando las direcciones a la plataforma de tu preferencia.

También se pueden utilizar para promocionar ventas, eventos, descuentos. Así mismo, pueden ayudar para conectar de manera asertiva con los clientes; en este elemento puedes incluir encuestas para pedir opinión con el fin de mejorar tus servicios o productos.

Tipos de popups de Elementor

El maquetador Elementor cuenta con más de 1000 plantillas de popups totalmente personalizables. Entre algunos de los diseños más utilizados tenemos:

  • Popups promocionales.
  • Popups para generación de leads.
  • Formulario popup elementor de bienvenida.
  • Ventanas emergentes de registro de correo electrónico.
  • Formulario popup elementor de inicio de sesión.
  • Ventana emergente de elementor cookies popup.
  • Formulario popup elementor de venta cruzada y de venta adicional.
  • Ventanas emergentes de suscripción para newsletters.
  • Exit intent.
  • Restricción de contenido.
  • Entre otros.

Así como se tiene una amplia flexibilidad en cuanto a opciones de diseño para crear páginas, la hay para ser sumamente creativos y personalizar los diferentes elementor popups.

Ahora, como es de esperar, también se puede escoger entre las diferentes posiciones y formas para que aparezcan cualquier elementor pop que vayas a crear, entre estas:

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

Cómo crear un popup con Elementor

Como ya sabemos, puedes utilizar el editor de Elementor para crear un popup, pero no todo queda allí, también te permite personalizarlo rápidamente para que se adapte a las necesidades de tu sitio web.

A continuación te dejamos un tutorial en donde explicamos paso a paso como puedes hacer un popup con Elementor gratuito y un popup con Elementor Pro. ¡Comencemos!

Paso 1: Instalación y configuración de Elementor en tu sitio web

Lo primero que debes hacer es dirigirte a la sección de Plugins > Añadir nuevo y buscar Elementor en el buscador de plugins.

Una vez lo hayas encontrado, haz clic en Instalar y luego en Activar.

Ya con estos dos sencillos pasos habrás instalado Elementor gratuito. Sin embargo, si lo que quieres es instalar Elementor Pro, tendrás que comprar una licencia y luego subirla desde la misma sección de plugins de WordPress.

Ahora para configurarlo, y en función de cual versión hayas instalado, tendrás diferentes opciones. En tal sentido, podrás configurar varias pestañas como ajustes, envíos, fuentes personalizables, custom icons, código personalizado, gestor de perfiles, herramientas, entre otros.

Paso 2: Creación de un nuevo popup en Elementor

Ahora, para crear un popup en Elementor solo tienes que ir a Elementor > Plantillas > Popups, desde el panel de control de WordPress.

Luego, haz clic en Añadir nuevo popup para dar inicio a la creación del mismo. Al hacer esto se te pedirá que le coloques nombre a la plantilla.

Lo siguiente que tienes que hacer es dar clic en Crear plantilla. Esto hará que se abra el editor Elementor.

Ahora puedes elegir entre los diversos diseños de plantillas de popups existentes o construir tu propia plantilla desde cero.

Es de saber, que las plantillas existentes pueden ser editadas y personalizadas en su totalidad, puedes cambiar su diseño, alineación, colores, etc.

popup 1

popup 2

Paso 3: Diseño y personalización de tu popup

En el caso de que estés basándote en una plantilla, es muy probable que no tengas que realizar muchos cambios. Por ejemplo, lo que podrías cambiar son los colores, imágenes, textos, configurar la integración con tu software de email marketing, en el caso de que estés usando el widget de Formularios.

En tal sentido, puedes agregar widgets de Elementor como videos, botones, iconos, imágenes, formularios, etc.

Desde los mismos aspectos del popup tienes que hacer clic en el apartado Estilos para simplemente adaptar el contenido de tu ventana emergente según como lo necesites. Estando allí puedes hacer los siguientes ajustes:

  • Ajustes generales: título del popup, estado, etiqueta HTML.
  • Disposición: ancho y alto de la ventana emergente, posición horizontal y vertical, superposición, botón de cerrar, animación de entrada y de salida, duración de la animación.
  • Entre otros.

popup 3

 

popup 4

Paso 4: Configuración de las opciones de visualización y comportamiento

Ya que hayas obtenido el diseño de tu elementor popup, es momento de que elijas en qué condiciones quieres que se visualice o se despliegue en tu sitio web.

Para ello debes hacer clic en la fecha ubicada a un lado del botón verde de Publicar y en Condiciones de visualización.

A continuación se presentan tres opciones para configurar: condiciones, disparadores y reglas avanzadas.

En condiciones puedes elegir en cuales paginas quieres que se abra el popup. Tienes la opción de elegir que sea en todo el sitio web, por archivos, por páginas o página única, incluso si se trata de una tienda online en qué productos o archivos de productos. También está la opción de incluir o excluir páginas.

Con respecto a los disparadores, no elegirás las páginas o entradas sino que puedes escoger entre ciertos disparadores:

  • Al cargar la página. Aquí se puede configurar a los cuantos segundos quieres que aparezca el elementor popup.
  • Al desplazarse. Bien sea que quieras que aparezca cuando el usuario se desplace hacia abajo o hacia arriba, o cuando se desplace hasta un elemento.
  • Al hacer clic en algún lugar de la página.
  • Luego de varios segundos de inactividad.
  • O cuando el usuario intente salir de la página (exit intent).

En la parte de reglas avanzadas puedes elegir configuraciones avanzadas. Por ejemplo, que se muestre luego de cierto número de visitas, cuando el usuario llegue desde un buscador, en ciertos dispositivos, etc.

popup 5
popup 6
popup 7
popup 8

Paso 5: Publicación e integración de tu popup en tu sitio web

Una vez hayas terminado con el diseño y la configuración de tu elementor popup, solo tienes que hacer clic en Publicar y ya lo tendrás funcionando.

También puedes guardar tus ventanas emergentes como plantillas. Para ello debes abrir el popup con el editor de Elementor y hacer clic en la flecha que está junto a Actualizar. Elige Guardar como plantilla y automáticamente se te pedirá que le pongas un nombre. Luego de eso, haz clic en Guardar y listo; esta se guardará en la biblioteca de plantillas.

Consejos y mejores prácticas para el diseño de popups efectivos

Al inicio comentamos como el mal uso de los popups puede resultar en algo contraproducente. Por lo que, además de aprender a crear popup con elementor, es importante que sepas que debes hacer para evitar esto. A continuación dejamos algunos consejos y mejores prácticas para el diseño de un popup con Elementor en WordPress efectivo. ¡Toma nota!

Elegir el momento adecuado para que el popup se active es la clave

Por tal motivo, debes asegurarte que el popup aparezca después que los usuarios hayan tenido la oportunidad de conocer un poco el sitio web y su contenido.

No se recomienda que aparezca inmediatamente después que llegue; no obstante, la única ventana emergente que puede aparecer justo desde el inicio es el elementor cookies popup, es decir, el de los permisos de cookies.

Los popups tienen que ser relevantes

Cada ventana emergente que integres a tu sitio web debe ser relevante para el contenido que están observando los usuarios. Solo así aumentarás las probabilidades de conversión y reducirás las posibilidades de que los mismos terminen por cerrar la ventana.

Ten muy presente que mientras más relevante sea el contexto en el que se muestra la ventana emergente, mayores serán las conversiones.

Limita la frecuencia de las ventanas emergentes

El limitar la frecuencia de los popups evita que los usuarios se molesten. Por tanto, una buena practica seria el mostrar la ventana solo una vez por sesión o una vez al dia. Asegúrate que una vez el usuario cierre el popup no vuelva a mostrarse.

Incorpora popups que sean fáciles de cerrar

Cuando vayas a crear un popup con elementor ten muy presente trabajar en un diseño que le permita al usuario cerrarlo fácilmente. Esto reducirá significativamente las posibilidades de que los usuarios abandonen la página.

En el único caso que se puede justificar que una ventana emergente sea difícil de cerrar es cuando esta sirva para bloquear la navegación, hasta que el usuario realice un determinada tarea o acción; como por ejemplo, con un elementor cookies popup o un popup de login para continuar leyendo un contenido.

En el resto de los casos es importante que el popup muestre la respectiva cruz de cierre, cualquier botón que indique que allí se puede cerrar o simplemente permitiendo que se cierre cuando se haga clic en cualquier parte fuera de la ventana emergente.

Crea un popup en Elementor con un diseño adecuado

Recuerda utilizar un diseño apropiado y asegúrate que el mismo sea coherente con el resto del diseño de tu página web. Ayudará a que el popup sea más atractivo y menos intrusivo, ya que el usuario lo percibirá como parte del sitio.

Mejores plugins para Elementor Popups

En el caso de que quieras funciones de diseño adicionales al momento de crear un popup con Elementor tienes la opción de agregar un plugin. Aquí te dejamos tres de los mejores plugins para popups de Elementor.

JetPopUp

JetPopUp (Crocoblock) es un plugin muy fácil de usar ya que cuenta con la misma interfaz de arrastrar y soltar que la del maquetador Elementor. Con este podrás crear formularios dinámicos y personalizados, como por ejemplo, formularios de consentimiento de cookies o cuentas de registros de correo electrónico.

Lo más destacable de este plugin son las múltiples configuraciones de animación que ofrece. También proporciona configuraciones de visualización adicionales  e innovadoras.

Popup Box Widget (PowerPack)

Popup Box Widget es otro plugin para Elementor que permite crear ventanas emergentes personalizadas con elementos dinámicos como imágenes, mapas de Google, videos, entre otros.

Con este tendrás la oportunidad de activar los popups según las acciones o el comportamiento del usuario, incluyendo la intención de salida. También te permite crear popups interactivos de dos pasos con enlaces y otros elementos de llamada a la acción.

Lightbox & Modal

Lightbox & modal es un widget muy versátil que contiene la herramienta Essential Addons for Elementor (Addons esenciales para Elementor) y también te ayuda a crear popups elementor con características interactivas.

Esta herramienta está diseñada para funcionar con botones y enlaces del sitio web. Puedes crear botones, textos personalizados que activan los formularios, iconos, etc.

Solución de problemas comunes al crear popups con Elementor

Ya sabemos que los popups de Elementor es una función útil y poderosa. No obstante, cuando se trabaja con estos pueden surgir ciertos problemas al configurarlos. A continuación, dejamos algunas soluciones para algunos de los problemas más comunes al crear popups con Elementor:

El contenido del popup no se muestra correctamente

Solución: si te sucede esto, verifica la configuración de las columnas, secciones y widgets dentro del popup. Si es necesario ajusta el tamaño de las columnas y widgets, así como el margen y el relleno.

El popup no se muestra al hacer clic en el botón o enlace correspondiente

Solución: en este caso debes verificar que hayas configurado correctamente la acción de apertura del popup. En el widget de botón o enlace, corrobora que haya seleccionado la opción correcta para abrir el popup. Además, asegúrate de que el botón o enlace esté configurado con la etiqueta correcta de “href” para activar la apertura del mismo.

El elementor popup no se muestra correctamente en dispositivos móviles

Solución: para solucionar este problema revisa las opciones de diseño responsive en la pestaña Avanzado del widget. Aquí puedes ajustar los valores de margen, tamaño de fuente y relleno para cada tipo de dispositivo: móvil, tablet o escritorio. También, es importante que verifiques la configuración de diseño y estructura de los elementos dentro del popup, para que constantes de que se están adaptando adecuadamente a los diferentes dispositivos.

El popup se cierra automáticamente o no se cierra cuando el usuario hace clic fuera de este

Solución: como ya sabemos, Elementor tiene opciones de comportamiento que permiten controlar cuándo y cómo cerrar un popup. Bajo este problema en concreto, lo que tienes que hacer es dirigirte a la configuración en la pestaña de Avanzado y verificar que la opción de cierre automático está desactivada, si lo que quieres es que el mismo sea cerrado manualmente por el usuario.

Así mismo, debes verificar la opción “Haga clic fuera para cerrar” si deseas permitir que los usuarios cierren la ventana emergente haciendo clic fuera de esta.

Ahora bien, si encuentras algún otro problema, puedes verificar la documentación oficial de Elementor o solicitar ayuda directamente con el centro de atención de usuarios o  por medio de la comunidad de Elementor.

Conclusiones

Los popups o ventanas emergentes son elementos esenciales dentro del diseño de una página web, debido a que permiten generar muchas más conversiones y todos los beneficios que vimos anteriormente.

Sin embargo, más allá de simplemente crear un popup con Elementor, lo primordial es saberlo integrar correctamente y asertivamente al diseño del sitio. Por lo que esperamos que todo lo aquí dicho te haya servido de ayuda para lograr este objetivo.

Lleva a cabo el paso a paso de nuestro tutorial sobre cómo crear un elementor popup y toma en consideración nuestros consejos y mejores prácticas para el diseño de un popup efectivo y luego nos cuentas tu éxito gracias a este.

¡Nos vemos en una próxima entrega! Recuerda que somos una agencia SEO especialista en crear sitios web atractivos y funcionales. Si necesitas que te apoyemos con respecto a este tema, no dudes en contactarnos y con gusto te ayudamos.

Fuentes : Elementor.com, Joaquín Barberá Aledo, Byteweb.es

_ Te asesoramos sin compromiso _

Presupuesto diseño web​ ¿Tienes un proyecto en mente? Cuéntanoslo
Los datos facilitados a través de este formulario serán tratados por GALERNA ESTUDIO S.L.U. con CIF B39706023 y domicilio en Calle San Fernando, 58, 8-D · 39010 Santander (Cantabria) de acuerdo con lo establecido en nuestra política de privacidad con la finalidad de poder enviarle información sobre nuestros productos / servicios. Los datos recabados por este formulario no se cederán a terceros salvo por obligación legal. Le recordamos que usted tiene derecho al acceso, rectificación, limitación de tratamiento, supresión, portabilidad y oposición al tratamiento de sus datos dirigiendo su petición a la dirección postal indicada o al correo electrónico [email protected] Igualmente puede dirigirse a nosotros para cualquier aclaración adicional. En caso de no aceptación sus datos no serán tratados.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *