Cómo crear un pop-up en HTML para tu sitio web
Tanto si estás diseñando una página de destino, optimizando rutas de conversión, como si solo estás experimentando con características front-end, saber cómo crear un pop-up en HTML es una habilidad valiosa. En esta guía, te mostraremos dos enfoques prácticos para agregar un pop-up personalizado a tu sitio web: uno usando HTML, CSS y JavaScript, y otro con un creador sin código que lo hace en minutos.
Si disfrutas codificar manualmente y tener control total del diseño, apreciarás nuestro recorrido paso a paso del método manual. Y si prefieres evitar la complejidad técnica, te presentaremos a Claspo, una herramienta poderosa y sin código para construir pop-ups receptivos y de alta conversión en solo unos pocos clics.
Como bono, también compartiremos consejos de expertos sobre la facilidad de uso de los pop-ups, mejores prácticas de diseño y cómo hacer que tu pop-up se sienta como una parte natural de tu sitio, y no una interrupción.
Cómo crear un popup en HTML y sin código
En esta sección, exploraremos dos métodos principales: crear una notificación emergente en HTML, CSS y JavaScript y usar una plantilla para simplificar el proceso. La primera opción todavía se usa debido a las posibilidades infinitas de personalización. Mientras tanto, la segunda se refiere a las soluciones sin código que están ganando impulso y convirtiéndose en una solución para usuarios no técnicos y aquellos que no pueden permitirse contratar a un desarrollador cada vez que necesitan un pop-up.
Popup en HTML CSS: un método que requiere código
Las habilidades avanzadas de codificación te permiten crear una ventana emergente personalizada en HTML desde cero y adaptar su apariencia y comportamiento en el sitio web para satisfacer tus necesidades. Entonces, ¿cómo haces un popup en HTML si tienes tales habilidades? Vamos a revisarlo paso a paso.
Paso 1: Prepara tu imagen
Antes de comenzar a codificar, asegúrate de tener una imagen para tu caja emergente HTML lista (¿no puedes hacerlo tú mismo? Felicidades, también necesitas un diseñador). La imagen debe estar alojada en un servidor para que se pueda acceder a ella mediante una URL. Puedes cargar tu imagen en el servidor de tu sitio web o utilizar un servicio de alojamiento externo de imágenes.
Paso 2: Estructura del widget con un botón emergente en HTML
El código HTML del popup forma la estructura de tu widget. Aquí tienes una explicación del código del popup:
1. Declaración DOCTYPE: define el tipo de documento y la versión de HTML.
<!DOCTYPE html>
<html lang="es">
2. Sección Head: contiene información meta sobre el documento, como el conjunto de caracteres y enlaces a hojas de estilo y scripts.
<head>
<meta charset="UTF-8">
<title>Cómo Hacer un Popup</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
3. Sección Body: contiene el contenido principal del documento, incluido el botón emergente en HTML para activar el pop-up y el propio pop-up.
<body>
<div class="container">
<button type="submit" class="btn" onclick="openPopup()">Enviar</button>
<div class="popup" id="popup">
<img src="https://yourserver.com/path-to-image.png" alt="">
<h2>¡Gracias!</h2>
<p>Tus datos han sido enviados con éxito. ¡Gracias!</p>
<button type="button" onclick="closePopup()">OK</button>
</div>
</div>
</body>
</html>
- Div de contenedor: centra la caja emergente en HTML y el botón.
- Botón: activa el pop-up al hacer clic.
- Div de popup: contiene el contenido del pop-up, incluida una imagen, un encabezado, un mensaje y un botón de cierre.
- Imagen: muestra la imagen que has preparado. El atributo src debe apuntar a la URL donde está alojada tu imagen.
Paso 3: Estilización de popup con CSS
El diseño de popup con CSS se utiliza para estilizar el widget y hacerlo atractivo. Aquí está lo que hace cada parte del código CSS:
1. Importar fuente: importa una fuente personalizada desde Google Fonts.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
2. Estilos globales: establece estilos predeterminados para todos los elementos.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
3. Estilos del contenedor: centra el contenido en la página.
.container {
width: 100%;
height: 100vh;
background: linear-gradient(to right, #485563, #29323c);
display: flex;
align-items: center;
justify-content: center;
}
4. Estilos del botón: estiliza el botón popup y añade una animación de clic.
.btn {
padding: 10px 60px;
background: #fff;
border: 0;
outline: none;
cursor: pointer;
font-size: 22px;
font-weight: 500;
border-radius: 10px;
transition: transform 0.2s;
}
.btn:active {
transform: scale(0.95);
}
5. Estilos del pop-up: estiliza el pop-up y controla su visibilidad y animación de entrada (como desvanecimiento o deslizamiento).
.popup {
width: 400px;
background: #fff;
border-radius: 6px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 60px;
color: #333;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
.open-popup {
visibility: visible;
top: 50%;
transform: translate(-50%, -50%) scale(1);
}
.popup img {
width: 100px;
margin-top: -50px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.popup h2 {
font-size: 38px;
font-weight: 500;
margin: 30px 0 10px;
}
.popup button {
width: 100%;
margin-top: 50px;
padding: 10px 0;
background-color: #e02189;
color: #fff;
border: 0;
outline: none;
font-size: 18px;
border-radius: 4px;
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
Consejos para hacer que tu pop-up en HTML y CSS destaque
Cuando creas un popup en HTML, no se trata solo de funcionalidad — se trata de impacto visual. Un widget bien diseñado puede atraer instantáneamente la atención e impulsar la interacción si se diseña con claridad y propósito. Aquí se detalla cómo mejorar tu popup utilizando estrategias de diseño comunes.
1. Usa una superposición con opacidad ajustada.
Una superposición es una capa semitransparente que se sitúa detrás del popup. Oscurece el resto de la pantalla, permitiendo a los usuarios concentrarse en tu mensaje. Para lograr esto, crea un div separado como contenedor de superposición para el popup y establece su background-color con rgba y un valor de opacidad apropiado (como 0.6) en tu CSS.
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6); /* superposición con opacidad */
z-index: 999;
display: none; /* alternado por JS */
}
2. Mantén la caja del popup HTML centrada y estilizada para crear impacto.
Cuando creas popups en HTML usando CSS, asegúrate de que tu contenedor esté estilizado con padding, un ancho máximo, sombra sutil y un borde redondeado. Diseña tu contenedor de popup con un fondo blanco o brillante, sombra sutil y generoso espacio de padding. Ya sea que lo muestres en la parte superior de la pantalla, en el centro, o cerca de un menú, el contraste visual es clave. Usa un CTA fuerte y una fuente llamativa (como Poppins o Montserrat) para aumentar la visibilidad.
3. Añade animaciones suaves con transiciones CSS.
Las animaciones como aparecer lentamente o deslizar hacia abajo pueden mejorar la experiencia. Aplica una clase con propiedades de transición y transformación a tu ventana emergente en HTML y CSS. Esto hace que se sienta más interactiva y moderna, incluso sin efectos pesados de JavaScript.
4. Responsive por defecto.
No olvides asegurarte de que tu ventana emergente funcione en todos los tamaños de pantalla. Usa consultas @media y anchos basados en porcentajes para tu contenedor. Esto hace que tu enfoque de ventana emergente con HTML sea amigable para móviles sin herramientas adicionales.
Combinando estructura, HTML y CSS, y sutiles animaciones, puedes crear una ventana emergente en HTML que no solo sea funcional, sino verdaderamente atractiva — diseñada para destacar y convertir.
Paso 4: Funcionalidad JavaScript
JavaScript se utiliza para dar vida a la ventana emergente en HTML controlando su comportamiento. Esto es lo que hacen las funciones básicas:
1. Obtener el elemento emergente: selecciona el elemento emergente por su ID.
let popup = document.getElementById('popup')
2. Función para abrir la ventana emergente: agrega una clase para mostrar la ventana emergente e iniciar la animación.
function openPopup() {
popup.classList.add('open-popup')
}
3. Función para cerrar la ventana emergente: quita esa clase para ocultar la ventana emergente y restaurar el estado predeterminado.
function closePopup() {
popup.classList.remove('open-popup')
}
Con JavaScript, puedes controlar cuándo y dónde aparece tu ventana emergente — como en páginas específicas como precios, blog, o checkout. Esto asegura que tu mensaje sea relevante y bien programado, en lugar de disruptivo.
if (window.location.pathname === "/pricing") {
popup.style.display = "block";
}
Método sin código: plantillas de ventanas emergentes
Los principales beneficios de las soluciones sin código para crear una ventana emergente en HTML son el ahorro de tiempo y flexibilidad. Cuando tienes una plantilla lista, no pierdes tiempo preparando una imagen emergente, y el editor de arrastrar y soltar te da la flexibilidad para personalizar la plantilla según tus necesidades. Podemos añadir el ahorro de dinero a esta lista, ya que no necesitas un desarrollador ni diseñador. Entonces, ¿cómo agregar una ventana emergente en HTML en este caso? En general, el proceso se reduce a los siguientes pasos, haciéndolo mucho más simple que codificar una ventana emergente en HTML con CSS desde cero:
- Selecciona una plantilla lista que se adapte a tu propósito (como una ventana emergente de suscripción, informador, prevenir el abandono de carrito, etc.) de las opciones disponibles en la biblioteca.
- Personalízala de acuerdo con tu marca, diseño del sitio web y requisitos específicos.
- Previsualiza cómo se ve tu ventana emergente finalizada en las versiones móvil y de escritorio del sitio.
- Configura las reglas de visualización de la ventana emergente (cuándo, dónde, con qué frecuencia y a quién se muestra, etc.).
- Incorpora la ventana emergente en tu sitio web y publícala.
¿Esta opción parece mucho más sencilla que la anterior, verdad? Así es si eliges Claspo. Después de todo, ya has venido a nosotros, así que mira a continuación cómo crear una ventana emergente en HTML con CSS (¡usando nuestro editor intuitivo, por supuesto!) y ponte manos a la obra inmediatamente después de leer el artículo.
Cómo hacer una ventana emergente con Claspo: 8 pasos
Lo primero que debes saber es que Claspo, una de las mejores herramientas para ventanas emergentes, te brinda las mismas opciones de personalización integral que el método que requiere código. Sin embargo, a diferencia de este último, Claspo es adecuado para aquellos que no tienen habilidades de programación y diseño. Facilita la creación de un pop-up en HTML de manera simple y rápida. Veamos cómo hacer un pop-up utilizando nuestro generador sin esfuerzo adicional.
Paso 1. Regístrate y comienza
Crea una cuenta gratuita en Claspo y haz clic en el botón "Nuevo Widget". Se te ofrece la opción de crear un widget desde cero o usar la galería de plantillas. Para ahorrar el máximo de tiempo, optaremos por la segunda opción.
Paso 2. Elige tu plantilla
Nuestra biblioteca de plantillas contiene más de 1000 plantillas listas que cubren múltiples casos de uso. Puedes encontrar fácilmente la que se ajuste a tus necesidades utilizando los filtros en el lado izquierdo de la pantalla. Permiten elegir el caso de uso, la disposición (HTML formulario de pop-up, barra flotante, caja flotante, widget de bloqueo de contenido, etc.), industria y tema. Una vez que encuentres un ejemplo que necesites, procederás al editor.
Paso 3. Personaliza tu plantilla
Dado que este artículo está dedicado a cómo hacer un pop-up en HTML en tu sitio web, elegimos un pop-up como disposición y uno de los casos de uso más populares para ello — recopilar datos de usuarios. Como puedes ver en el ejemplo a continuación, nuestra plantilla puede cambiarse más allá de su reconocimiento.
En este caso, reemplazamos la imagen, primero creando una utilizando IA, reemplazamos el texto de un formulario pop-up en HTML, eliminamos un campo de entrada, añadimos un checkbox para el consentimiento al procesamiento de datos para hacer el pop-up compatible con GDPR, y finalmente modificamos el esquema de color, incluyendo el color del botón CTA. La única limitación es tu imagen, por lo que puedes personalizar la plantilla aún más.
Paso 4. Previsualiza tu pop-up
Una vez que hayas realizado todos los cambios necesarios, puedes previsualizar cómo se ve tu pop-up en las versiones de escritorio y móvil de tu sitio web. Para hacerlo, haz clic en el icono del dispositivo correspondiente en la parte superior derecha de la pantalla. Si no estás satisfecho con algo, siempre puedes continuar editando.
Paso 5. Configura las reglas de visualización
Si te preguntas cómo crear un popup en HTML en un sitio web sin molestar a los usuarios, Claspo tiene la solución. Nuestra plataforma ofrece capacidades de segmentación avanzadas y reglas de visualización óptimas para una experiencia de usuario fluida, preestablecidas por defecto. Por ejemplo, el popup de notificación HTML aparece automáticamente una vez por sesión después de que el usuario ha pasado 20 segundos en la página. Además, deja de mostrarse automáticamente a aquellos que ya han dejado su correo electrónico, ayudándote a captar efectivamente a la audiencia de tu sitio web. Lógico, ¿verdad?
Y el toque final — protegemos automáticamente tus ventanas emergentes de aparecer simultáneamente y superponerse. Esto significa que puedes escalar tu estrategia de generación de leads con popups sin miedo a asustar a los visitantes.
No obstante, siempre puedes personalizar las reglas de visualización para adaptarlas a tus necesidades. Puedes activar fácilmente varias opciones para dirigirte a comportamientos específicos del usuario, como habilitar disparadores de intención de salida. A diferencia del método que requiere código, solo necesitas hacer clic en algunos botones en nuestra sección “Activadores”, sin necesidad de sumergirte en CSS complejos de ventanas emergentes. Esto significa que un popup en Claspo ofrece más control y flexibilidad al crear una ventana emergente usando nuestras herramientas intuitivas para recopilar direcciones de correo electrónico y otros datos valiosos.
Paso 6. Integra Claspo con la plataforma elegida
Más allá de la pregunta de cómo crear un popup en tu sitio web, necesitas entender cómo sincronizar un mensaje emergente en HTML con otras herramientas de marketing. Pero en Claspo, esta tarea también se reduce a unos pocos clics.
- Integra Claspo con un CRM, ESP o CDP adecuado de la lista desplegable. En este caso, toda la información sobre los usuarios recopilada usando nuestros pop-ups se transferirá instantáneamente a la plataforma seleccionada para la posterior segmentación y lanzamiento de tus campañas automáticas.
- Integra Claspo con Google Analytics. Esto te proporcionará ideas más valiosas sobre cómo los usuarios interactúan con tus pop-ups y te ayudará a optimizarlos para un mejor rendimiento.
Paso 7. Instala tu pop-up
Una vez que tu pop-up esté listo, recibirás un código de script ya hecho que necesitas integrar en tu sitio web. Probablemente estés pensando, "¡Espera! ¡Pensé que estábamos hablando de cómo crear un popup en un sitio web sin habilidades de codificación para pop-ups!" ¡Esto es cierto! En Claspo, solo necesitas copiar y pegar el código terminado siguiendo una de nuestras instrucciones paso a paso. Puedes encontrarlas fácilmente debajo de tu código de script en nuestro editor.
Aun así, si no puedes manejarlo por tu cuenta, no dudes en contactar a nuestro equipo de soporte, ¡y nosotros instalaremos el mensaje emergente HTML en tu sitio web sin costo alguno!
Paso 8. Analiza y optimiza
¡Tu pop-up ha sido creado y está trabajando activamente para aumentar tus conversiones! Pero, ¿qué tan exitoso es? Siempre puedes rastrear los indicadores clave de rendimiento de cada pop-up, como el número de vistas únicas, el número de acciones dirigidas y la tasa de conversión directamente en Claspo. ¿Tienes alguna idea para mejorar el rendimiento de tu pop-up? Usa nuestra prueba A/B para experimentar con cualquier elemento y verificar qué resuena mejor con tu audiencia.
Claspo tiene como objetivo simplificar tu tarea y obtener los resultados deseados más rápido. Con esto en mente, nuestro equipo de marketing creó una plantilla de prueba A/B. Contiene las etapas críticas de este proceso y te permite poner en práctica cualquier hipótesis. Consíguela gratis y úsala para todas las pruebas A/B subsiguientes (no solo aquellas relacionadas con pop-ups).
Cómo formatear un pop-up para que sea fácil de usar
Descargo de responsabilidad: la apariencia óptima de su pop-up solo se puede determinar mediante pruebas A/B. Sin embargo, algunas reglas básicas le ayudarán a crear un diseño de pop-up atractivo para los usuarios y efectivo para usted.
- La marca es vital, por lo que asegúrese de que todos los elementos del diseño del pop-up sean coherentes con el esquema de colores y el estilo de su marca. Esto ayudará a reforzar la identidad de su marca y hará que el pop-up se vea como una parte natural de su sitio web.
- Recuerde el principio de reciprocidad y ofrezca algo a cambio de su información de contacto.
- Refuerce su mensaje con una imagen para aumentar la tasa de clics hasta en un 25%. Use imágenes de alta resolución para asegurarse de que se vean bien en todos los dispositivos. Las imágenes borrosas o pixeladas pueden restar profesionalismo a su pop-up.
- No agregue demasiados campos de entrada. Las estadísticas muestran que los pop-ups con dos campos de entrada tienen la tasa de conversión más alta. Esto es suficiente para aclarar los datos de contacto del prospecto y su nombre sin aburrirlos con su formulario de pop-up.
- Asegúrese de que cada campo esté claramente etiquetado para que los usuarios sepan exactamente qué información se requiere. Use texto de marcador de posición para proporcionar ejemplos o instrucciones adicionales.
- Diseñe para visibilidad y legibilidad. Use alto contraste entre el texto y el fondo para facilitar la lectura de su mensaje. Elija fuentes que sean fáciles de leer y evite fuentes excesivamente decorativas que puedan ser difíciles de descifrar.
- Optimice para móviles. Asegúrese de que su formulario de pop-up sea responsivo y se vea bien en todos los tamaños de pantalla, incluidos smartphones y tablets. Asegúrese de que los botones y enlaces sean lo suficientemente grandes para ser fácilmente pulsados con un dedo.
- Tenga cuidado con los widgets de pantalla completa. El grupo Norman Nielsen aconseja usar widgets que bloqueen contenido solo cuando necesite verificar la edad de los usuarios, obtener su consentimiento legal, etc. En otros casos, pueden hacer que su publicidad sea intrusiva e irritar a los usuarios.
- Asegúrese de que haya un botón de cierre claramente visible para que los usuarios puedan descartar fácilmente el pop-up si no están interesados. Permita a los usuarios cerrar el pop-up haciendo clic fuera de él o presionando la tecla de escape.
Consejos para ajustar la ventana del pop-up
Incluso el pop-up más atractivo visualmente puede ser intrusivo y alejar a los visitantes de su sitio. Por lo tanto, para responder a la pregunta de cómo crear un pop-up que convierta y no sea molesto, es vital discutir no solo el diseño, sino también las reglas de visualización.
No bombardee a los usuarios con pop-ups. El 45,6% de los visitantes se quejansobre demasiados pop-ups en un sitio. Con Claspo, puedes evitar esto de varias maneras:
- Utiliza el intervalo silencioso preconfigurado para evitar la aparición simultánea de pop-ups y muéstralos una vez cada tres minutos (el intervalo se puede ajustar)
- Elige páginas con el contexto adecuado para un pop-up específico en lugar de mostrar el mismo pop-up en todo el sitio web.
- Personaliza tus pop-ups, por ejemplo, solo para visitantes por primera vez, usuarios de una geolocalización específica, o aquellos que llegaron al sitio desde una fuente de tráfico o campaña específica
- El 28.6% de los usuarios odian la aparición inmediata de pop-ups. Crea un pop-up que aparezca cuando el usuario haya pasado al menos unos segundos en el sitio web. De esta forma, les das tiempo para sentirse cómodos y aprender un poco más sobre tu empresa antes de mostrarles tu oferta. Esto mejora su experiencia de navegación y aumenta tus posibilidades de conversión. Nuestras reglas de visualización preestablecidas retrasan los pop-ups por 20 segundos, pero siempre puedes ajustar este tiempo.
- Usa un disparador de desplazamiento para tu formulario de pop-up. Esto permite mostrar un pop-up cuando el usuario ha desplazado la página en un cierto porcentaje, trayendo más conversiones que un disparador de tiempo. La razón principal es que tu pop-up aparece en el contexto adecuado.
Por ejemplo, si un usuario ha leído tu artículo de blog hasta cierto punto, invítalo a suscribirse a tu boletín para obtener más información útil. Un pop-up también puede aparecer cuando el usuario ha desplazado hasta la sección de precios para ofrecer un descuento en el primer pedido o una prueba gratuita.
- Detén tu pop-up de desplegarse de manera oportuna. El 20% de los usuarios se molestan cuando ven los mismos formularios de pop-up cada vez que visitan un sitio web. ¡Cuida de su experiencia! Evita mostrar el pop-up a aquellos que ya lo han cerrado una o más veces y a aquellos que ya han dejado su información de contacto. Esto se logra fácilmente con Claspo.
Conclusión
¡Así que ahí lo tienes! Has aprendido cómo crear pop-ups en HTML y el camino increíblemente sencillo y sin código. Esperamos que hayas visto cuánto puede simplificar Claspo genuinamente tu vida y tus proyectos de diseño web. Con Claspo, no necesitas ninguna experiencia previa en codificación para obtener tu primer widget para el sitio. Nuestra plataforma te permite crear pop-ups que se ven geniales en cualquier dispositivo, desde computadoras de escritorio hasta teléfonos inteligentes, asegurando una experiencia sin interrupciones para tus visitantes.
Ya sea tu objetivo construir tu lista de correos electrónicos con atractivos ejemplos de pop-ups de correo electrónico, recopilar comentarios o anunciar una oferta especial, literalmente puedes tener pop-ups impresionantes en minutos. Una vez que descubras casos de éxito del uso de pop-ups, naturalmente, también querrás crear un pop-up para tu sitio web. Por eso te invitamos a lanzarte con nuestro plan gratuito de por vida. Puedes comenzar a construir y ver resultados reales para tu negocio sin gastar un centavo. Es la manera perfecta de utilizar HTML (¡sin necesidad de codificarlo!) para mejorar el rendimiento de tu sitio web. ¿Por qué no intentarlo y ver lo fácil que es crear widgets impactantes para tu sitio hoy mismo?
