¿Alguna vez ha navegado por un sitio web, tal vez mirando unos zapatos realmente geniales, y luego fue interrumpido por una ventana emergente que aparece en el centro de su pantalla? Tal vez estabas enojado. O tal vez estabas emocionado porque ofrecía un descuento.
Las ventanas emergentes son una tendencia controvertida en el diseño web. Pueden degradar la experiencia del usuario si se desactivan el tiempo, el proyecto o la copia. Por lo tanto, en 2016, Google comenzó a devaluar las páginas móviles que muestran «anuncios intrusivos de pantalla completa», incluidas las ventanas emergentes que ocultan el contenido principal.
Pero eso no significa que las ventanas emergentes sean completamente inaccesibles. De hecho, si se hace correctamente, puede proporcionar al usuario información importante y, de hecho, aumentar la tasa de conversión. Por ejemplo, las ventanas emergentes de Lightbox pueden notificar a los usuarios sobre promociones, eventos o recursos en los que pueden estar interesados, a cambio de sus direcciones de correo electrónico u otra información necesaria.
Cuando las ventanas emergentes agregan valor a sus visitantes, pueden ser un gran éxito. De acuerdo a Estudio emergente de 1.700 millones de Sumo, la tasa de conversión promedio para todas las ventanas emergentes es 3.09%. Sin embargo, el 10 % de las ventanas emergentes más efectivas tuvo un promedio mucho más alto con una tasa de conversión del 9,28 %.
Para ayudarlo a crear ventanas emergentes efectivas y atractivas para convertir en su sitio, cubriremos qué es una caja de luz, algunos ejemplos populares y cómo puede crear la suya propia.
¿Qué es un lightbox en un sitio web?
Lightbox es una superposición de ventana que aparece en un sitio web, bloquea parte del contenido y oscurece y deshabilita el resto del fondo. Esto asegura que el visitante del sitio no podrá interactuar con otro contenido en el sitio hasta que él o ella realice alguna acción, haciendo clic en un botón, completando o saliendo de una ventana emergente. Si bien puede aparecer en cualquier parte de la pantalla, la caja de luz en el centro aparece con mayor frecuencia.
Las ventanas emergentes de Lightbox son efectivas por varias razones. Eliminan todas las demás distracciones en la página e informan claramente a los visitantes qué hacer a continuación. Además, puede hacer clic en cualquier lugar fuera de la ventana emergente para cerrarla. Como puede ver en el ejemplo anterior, generalmente puede hacer clic en el botón X que aparece cuando pasa el mouse por encima o hacer clic en el texto subrayado que también aparece debajo del botón. Estas opciones hacen que la ventana emergente de la caja de luz sea una alternativa mucho menos frustrante que otros tipos de ventanas emergentes.
Lo más importante es que la ventana emergente de Lightbox sea relevante para el usuario y la razón por la que visitó su sitio web o página. El ejemplo más claro es el código de descuento en la página del producto. También es común y efectivo incluir un formulario de registro de correo electrónico en una publicación de blog. Usted sabe que las publicaciones de su blog son útiles y únicas, por lo que coloca un cuadro de luz emergente que le pide al lector que se registre para obtener contenido más útil y único.
Ahora que entendemos qué es una caja de luz y por qué es efectiva, veamos algunos ejemplos reales en los sitios web.
Ejemplos de sitios lightbox
Las ventanas emergentes de Lightbox se pueden usar para una variedad de propósitos: obtener más suscriptores de boletines, generar ventas, asistir a un evento, hacer que las personas no abandonen su sitio, etc. A continuación, veamos algunos ejemplos diseñados para lograr estos diferentes objetivos.
Suscríbete al boletín
Las suscripciones a boletines o correos electrónicos son las ventanas emergentes de lightbox más comunes. A continuación se muestra uno de Neoyorquino. Este diseño simple y minimalista aparece después de ver el artículo en su sitio. El único acento de color es el botón CTA, lo que lo hace más llamativo que el botón de cierre.
Inicio de sesión / registro de Lightbox
Aumentar el número de conversiones de registro e inicio de sesión es un indicador fundamental para cualquier negocio digital. Jeff Chang, líder técnico de desarrollo en Pinterest, lo define como «el arte de crear una nueva intención de usuario y transformar la intención en usuarios autenticados» en blog de ingeniería de crecimiento.
Pinterest está a la vanguardia de este arte. Cuando los visitantes hacen clic en un pin en una página de resultados de búsqueda, pueden verlo y desplazarse hacia abajo para ver otros pines. En este punto, Pinterest muestra a los visitantes una ventana emergente que les pide que inicien sesión o inicien sesión para ver más contenido. Si bien los visitantes pueden salir para continuar desplazándose, aquellos que están listos para registrarse y aquellos que ya tienen una cuenta pueden iniciar sesión fácilmente.
Lightbox con oferta de contenido
Los blogs pueden ayudar a atraer visitantes a su sitio web, pero ofrecerles contenido gratuito adicional puede ayudarlo a convertirlos en clientes potenciales. Supongamos que tiene entradas de blog a las que cualquiera puede acceder. Luego tiene informes, hojas de cálculo, infografías, videos y cualquier otro contenido al que los visitantes normalmente no tienen acceso. Puede crear un cuadro de luz emergente que solicite a los visitantes su dirección de correo electrónico a cambio de estas actualizaciones de contenido.
Tomemos como ejemplo Marketing 112. Esta empresa de marketing húngara muestra el cuadro de luz a continuación, que ofrece un estudio gratuito de tendencias de marketing 2019-20, después de que el visitante haya visto varias publicaciones en su blog.
Aquí está la misma caja en inglés:
Descuento de caja de luz
Una de las ventanas emergentes más comunes en los sitios de comercio electrónico es una caja de luz de descuento. Estas ventanas emergentes ofrecen a los compradores en línea un descuento o un cupón para solicitar su compra a cambio de su dirección de correo electrónico.
Lo mejor de estas ventanas emergentes es que, incluso si no superan las objeciones comunes que los visitantes pueden tener, por ejemplo, «No tengo un presupuesto en este momento», y los convencen de comprar, aún pueden tener éxito. . datos de contacto del visitante. Mira este ejemplo de Girlfriend Collective, una marca de ropa deportiva sostenible.
publicidad adicional
Lightbox es otra excelente manera de aumentar sus ingresos, ya sea que esté ejecutando un sitio web de comercio electrónico o una organización sin fines de lucro. Quizás esté tratando de pagar y reciba una ventana emergente que muestra productos relacionados que puede agregar a su carrito. O bien, puede hacer una donación única en el sitio web de la organización sin fines de lucro y ver la ventana emergente que le pregunta si desea hacer una donación mensual como se muestra a continuación.
Cubriremos el proceso de creación de una caja de luz a continuación, para que pueda recrear cualquiera de los ejemplos anteriores o crear uno propio.
¿Cómo hacer una caja de luz para su sitio web?
Puedes crear una caja de luz desde ceropero requerirá algunos conocimientos de HTML, CSS y JavaScript. Los no programadores pueden encontrar herramientas para simplificar este proceso para que no tengan que tocar una sola línea de código para crear un lightbox personalizado para su sitio web.
El proceso de creación de un Lightbox varía según la plataforma de desarrollo web o la herramienta de terceros que esté utilizando. A continuación, repasaremos los pasos para crear uno si está utilizando HubSpot o WordPress.
Cómo hacer una caja de luz en HubSpot
Analizaremos brevemente el proceso de creación de lightbox de HubSpot. Para obtener instrucciones más detalladas, puede consultarlo. Artículo de la base de conocimientos.
1. Para empezar, vaya a formularios en tu cuenta de HubSpot. Si tiene una cuenta Professional o Enterprise, irá a Marketing > Captura de prospectos > formularios. Si tiene una cuenta Starter o Free, simplemente vaya a Marketing > formularios.
5. Luego crea y personaliza el formulario que tus visitantes verán cuando hagan clic en el botón CTA.
En este punto, también puede crear un mensaje de agradecimiento y un correo electrónico de seguimiento para nuevos clientes potenciales.
6. Establezca los criterios para cuándo desea que aparezca la ventana emergente en su sitio. Simplemente puede ingresar la URL de las páginas donde desea que aparezca la ventana emergente y elegir si se ejecutará con un 50% de desplazamiento de página, intento de salida o tiempo transcurrido. También puede establecer «reglas de exclusión» para ocultar las ventanas emergentes en su teléfono inteligente y tableta o por otras razones.
7. Cuando esté listo, simplemente haga clic en Publicar en la esquina superior derecha para mover la ventana emergente en vivo.
Cómo hacer una caja de luz en WordPress
No hay una función integrada de creación de formularios de caja de luz en WordPress, lo que significa que necesitará un complemento.
La buena noticia es que puedes descargar gratis Complemento de WordPress de HubSpot para conectar sin problemas tu sitio de WordPress a tu cuenta de HubSpot y acceder a la herramienta emergente de HubSpot. Luego, simplemente siga los pasos descritos anteriormente.
emergente o no
Si bien algunas ventanas emergentes son molestas e intrusivas, otras pueden ayudarlo a mejorar su experiencia de usuario y aumentar sus clientes potenciales o ventas. Por ejemplo, las ventanas emergentes de Lightbox pueden ayudar a llamar la atención de los visitantes sobre información u ofertas importantes, ya sea una actualización de contenido, un código de descuento o un registro por correo electrónico. Solo necesita seguir las pautas de diseño web al configurar la copia, el diseño y la duración de la ventana emergente.
