Las ventanas emergentes tienen mala fama, y a menudo con razón. Al fin y al cabo, interrumpen, suelen aparecer demasiado pronto para la mayoría de los lectores y rara vez responden a una necesidad real del cliente. Pero no se puede negar que pueden funcionar muy bien. Personalmente, he visto ventanas emergentes que multiplican por cinco las tasas de conversión de suscripciones. ¡Incluso en contenido que ni siquiera estaba optimizado para la conversión!
Además, es muy probable que más de un cliente te haya pedido una ventana emergente precisamente por eso. Así que hoy te enseñaremos a crear una con un pequeño giro: esta la inicia el usuario. Es decir, el usuario hace clic en un botón para activar la ventana, lo que ofrece una interfaz bien enfocada para completar la transacción. (Por supuesto, puedes cambiar el activador para adaptarlo a tus necesidades).
Esto es lo que vamos a crear juntos.
Nota: para este tutorial, asumimos que has configurado una fuente predeterminada en el cuerpo (body).
Paso 1: Añade el título y un botón
Coloca un H3 y un párrafo en el lienzo y actualiza el texto según sea necesario. Añade la clase "Center" a ambos y cambia la alineación del texto a centrado.
CONSEJO PRO: Crea una clase llamada "Center" y establece la alineación del texto en el centro. Esto te da una clase reutilizable que puedes añadir a cualquier elemento de texto para eliminar la alineación a la izquierda predeterminada y conservar tus estilos de tipografía cuidadosamente diseñados.
Ahora, añade un botón debajo del párrafo y asígnale la clase "Sign Up Button" con estos ajustes:
- Margen izquierdo y derecho: Auto
- Relleno superior e inferior: 18px
- Relleno izquierdo: 25px
- Relleno derecho: 60px
- Ancho: 155px
- Tamaño de fuente: 17px
- Radio del borde: 3px
Ajustes de sombra paralela
- Color: rgba(0, 0, 0, 0.32)
- Ángulo: 180°
- Distancia: 1px
- Desenfoque: 4px
También vamos a añadir un fondo degradado y una imagen de fondo a este botón. Desplázate hasta la sección de fondo (Background), selecciona la pestaña de degradado y añade estos colores: de #662d8c a #ed1e79. Configúralo como lineal con un ángulo de 45°.
Luego, haz clic en la pestaña para añadir una imagen de fondo y selecciona un icono de tu ordenador. (O descarga el icono que usé en Flaticon.)
Ahora solo tienes que aplicar estos ajustes a la imagen de fondo:
- Tamaño: 30px
- Posición desde la derecha: 80%
- Mosaico: No repetir
Paso 2: Añade y da estilo a un div para contener el modal
Añade un div en cualquier parte del lienzo. Como vamos a fijar su posición, no importa dónde lo coloques.
Asigna al div la clase "Modal Wrapper" con una configuración de visualización flex, horizontal, con justificación centrada y alineación centrada. Luego, establece la posición en fija y selecciona "full", y dale un z-index de 9999; esto garantiza que el modal se muestre por encima de todo lo demás.
Estilos del Modal Wrapper
- Display: flex
- Diseño flex: horizontal, centrado, centrado
- Posición: Fija, completa (full)
- Z-index: 9999
Por último, añade un fondo con degradado lineal usando versiones un poco más transparentes de los colores que usamos en el degradado del botón: rgba (102, 45, 140, 0.95) y rgba (237, 30, 121, 0.89). Ajusta el ángulo a 45°.
Paso 3: Añade y da estilo al formulario de registro
Ahora arrastra un componente de formulario dentro del div del contenedor modal y asígnale la clase "Sign Up Form". Luego, aplica estos estilos:
- Relleno inferior: 30px
- Desbordamiento (Overflow): Oculto
- Alineación del texto: Centrado
- Color de fondo: #ffffff
- Radio del borde: 3px
También añadiremos una sombra paralela al modal para resaltar la superposición de los elementos:
Ajustes de sombra paralela
- Color: rgba(0, 0, 0, 0.27)
- Ángulo: 135°
- Distancia: 1px
- Desenfoque (blur): 50px
Añade una fila de columnas al formulario, asígnale la clase "Form Row" y añade un margen de 25px a la izquierda y a la derecha. Coloca una etiqueta y un campo de entrada en cada columna.
Ahora añade otro div al contenedor del modal sobre el formulario, llámalo "Form Hero", y aplica un margen inferior de 20px y estos ajustes de relleno:
- Superior: 10px
- Izquierda y derecha: 40px
- Inferior: 20px
Cambia el color del texto a #ffffff y añade un degradado lineal de fondo que vaya de #662d8c a #ed1e79 con un ángulo de 225°. Luego, añade una sombra interior con los siguientes ajustes:
Interior
- Color: rgba(0, 0, 0, 0.31)
- Ángulo: 0°
- Distancia: 11px
- Difuminado: 20px
- Tamaño: -8px
Ahora añade un H2 y un párrafo al div "Form Hero". No hace falta darles estilo, ya que heredarán el color de texto y la alineación del div principal.
Vamos ahora con el estilo de los campos de entrada. Asigna a cada uno la clase "Input" con las siguientes propiedades:
- Margen inferior: 20px
- Altura mínima: 50px
- Radio del borde: 3px
Añade nuestra clase "Sign Up Button" ya creada al botón del formulario y cambia el texto a "Sign Up".
Ya solo nos falta un último elemento para el modal: un botón de cierre.
Coloca un div en cualquier parte del contenedor del modal, asígnale la clase "Close Modal Button" y añade estos estilos:
- Relleno: 5px (en todos los lados)
- Ancho: 30px
- Posición: absoluta, arriba a la derecha, con un margen superior y derecho de 20px
Coloca tu icono de cierre dentro del div. Yo estoy usando este icono de cierre de Flaticon.
Ahora viene lo divertido: ¡darle vida a todo con interacciones!
Paso 4: Añade los estados iniciales de tus interacciones
Para empezar, necesitamos definir el estado inicial del modal, es decir, qué hace cuando se carga la página. Que en nuestro caso es… ser invisible.
Selecciona tu formulario de registro, abre el panel de interacciones y crea una nueva interacción en la página actual con el activador de carga de página.
Selecciona la opción de iniciar una animación en el menú desplegable.
Crea una animación temporizada haciendo clic en el icono de más. Llama a la animación "Ocultar formulario de registro al cargar".
Añade una acción temporizada de escala.
Marca la casilla de estado inicial y establece las escalas X e Y en 0.8. Añade otra acción temporizada de rotación configurada como estado inicial con una rotación Z de -4°.
¡La última! Añade una acción temporizada, configúrala como estado inicial y pon la opacidad al 0%. ¡Listo!
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Ahora haremos una serie de acciones similares con el contenedor del modal. Selecciona el contenedor del modal, abre el panel de interacciones y añade una interacción de página actual con un activador de carga de página.
Elegiremos iniciar una animación cuando la página comience a cargarse.
Ahora crea una animación temporizada y llámala "Ocultar contenedor del modal al cargar".
Luego añade un estado inicial de opacidad al 0% y otro del tipo "ocultar/mostrar", con la opción "oculto" seleccionada.
Paso 5: Añade las interacciones de clic
Ahora tenemos que añadir la interacción de activación al botón de registro en el lienzo.
Tienes dos opciones para acceder al botón de registro, ya que está detrás del contenedor del modal. Opción 1: Búscalo y selecciónalo en el panel del navegador. Opción 2: Configura el contenedor del modal como no visible. Por suerte, todo sigue funcionando perfectamente si dejas el contenedor del modal oculto.
Con el botón de registro seleccionado, abre el panel de interacciones y añade una interacción de "elemento seleccionado" con un activador de clic/toque.
Luego inicia una animación al primer clic.
Crea una animación temporizada y llámala “Open Sign Up Form Trigger”.
Añade una interacción de ocultar/mostrar y ajusta la visualización a flex. Añade una segunda interacción para la opacidad, cambia el inicio a “Con la acción anterior”, establece la duración en 0.5s con aceleración lineal y aumenta la opacidad al 100%.
Como queremos que esta interacción afecte a otro elemento, vuelve a la lista de interacciones haciendo clic en la X de la esquina superior derecha (cerrando el flujo de creación de la interacción actual).
Luego, haz clic derecho en la interacción, selecciona "Cambiar objetivo" en el menú desplegable y haz clic en "Modal Wrapper". Ahora, la interacción que acabamos de crear afecta al div Modal Wrapper.
Hemos terminado con esta interacción, así que haz clic en la X de la esquina superior derecha hasta volver al panel de Interacciones.
Ahora vamos a añadir otra interacción, esta vez en el elemento seleccionado, activada por clic/toque.
Selecciona “Iniciar una animación” en el menú desplegable “En el 1er clic”.
Crea una animación temporizada y llámala “Show Sign Up Form”. Luego, añade 3 acciones temporizadas:
- Opacidad al 100%, aceleración lineal, duración de 0.4s
- Rotar, configurar para iniciar con la acción anterior, aceleración lineal, duración de 0.4s, Z configurado en 0°
- Escalar, configurar para iniciar con la acción anterior, aceleración de entrada y salida (quart), duración de 0.5s, X e Y en 1
Luego cierra este panel, haz clic derecho en la interacción, selecciona "Cambiar objetivo" y haz clic en “Sign Up Form”.
¡Ya casi estamos! Solo necesitamos crear dos interacciones más para el botón de cerrar.
Resalta el div del botón de cerrar, abre el panel de interacciones, haz clic en el icono de más y selecciona “Clic del ratón (toque)”.
Selecciona “Iniciar una animación” en el menú desplegable “En el 1er clic”.
Crea una animación temporizada haciendo clic en el icono de más.
Nombra la interacción “Close Modal Trigger”.
Añade una acción temporizada para la opacidad, deja la aceleración en lineal, establece la duración en 0.2s y la opacidad al 0%.
Añade otra acción temporizada para mostrar/ocultar, configura el inicio en “Después de la acción anterior” y establece la visualización en oculta.
Ya hemos terminado aquí.
A continuación, haz clic derecho en la interacción, selecciona "Cambiar objetivo" y haz clic en “Modal Wrapper”; esta acción ahora afecta al Modal Wrapper.
¡Solo falta uno!
Vuelve a la lista de interacciones y selecciona “Mouse Click (tap)” para añadir otra interacción.
Crea una animación temporizada haciendo clic en el icono de más.
Llámala “Close Modal Form”, añade una acción temporal de escala con una duración de 0.2s y ajusta la escala a 0.8.
Añade otra acción temporal de rotación, con una duración de 0.2s y el eje Z en -4°.
Por último, añade una acción temporal de opacidad, con la misma duración de 0.2s y la opacidad al 0%.
Ahora, haz clic derecho en la interacción, selecciona "Change Target" y haz clic en “Sign Up Form”; esta animación ahora se aplicará al formulario.
¡Lo logramos! ¡Publícalo y pruébalo!
