Claro, las ventanas emergentes aumentan las tasas de conversión, pero también son molestas. Especialmente esas persistentes que no captan la indirecta la primera vez que las cierras. Un buen punto medio en cuanto a experiencia de usuario es el formulario de registro que aparece al hacer scroll. Llama la atención, pero no te impide leer ni disfrutar de tu existencia.
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ñadir un div y darle estilo
Añade un div al lienzo, asígnale la clase “Slide In Wrapper” y aplica estos ajustes:
- Relleno (padding) en todos los lados: 20px
- Posición: Fija (Fixed), en la parte inferior (Bottom)
- Z-index: 9999
- Color de texto: #ffffff
- Color de fondo: #332e5a
Ajustes de sombra de caja (box shadow):
- Color: rgba(0, 0, 0, 0.25)
- Ángulo: 90°
- Distancia: 1px
- Desenfoque (blur): 50px
- Tamaño: 0px
Paso 2: Añadir contenido al contenedor deslizante
Añade un contenedor dentro del “Slide In Wrapper”, asígnale la clase “Flex Row” y configura el display en flex, horizontal, justify:center y align:center.
Añade dos divs al contenedor “Flex Row”, nómbralos ambos “Flex Col” y configúralos en Expand.
Antes de añadir el contenido a los divs Flex Col, añade otra clase llamada “Sign Up Text” al Flex Col de la izquierda, configura el Flex Item en Shrink if Needed y añade un margen derecho de 20px.
Ahora añade dos encabezados H3 y un encabezado H1. Asígnales la clase “No Margin” y elimina el margen predeterminado superior e inferior. He añadido dos encabezados H3 porque uno se mostrará en la vista de escritorio, mientras que el segundo aparecerá en todos los dispositivos móviles.
Cambia el texto de la siguiente manera:
- Primer H3 a “Suscríbete a nuestro boletín”
- Segundo H3 a “Suscríbete a nuestro”
- H1 a “Boletín”
CONSEJO PRO: Crea una clase llamada “No Margin” y establece el margen superior e inferior en 0px. Esto te da una clase reutilizable que puedes añadir a cualquier elemento de texto para eliminar los márgenes predeterminados y mantener intacta tu configuración tipográfica.
Selecciona el primer H3, abre el panel de ajustes y configúralo como visible solo en: Tablet y Móvil. Selecciona el segundo y configúralo como visible solo en: Escritorio.
Selecciona el encabezado H1 y configúralo como visible solo en: Escritorio.
Ve a la vista de tablet en el diseñador y configura el Flex Row como Vertical, con la alineación Stretch seleccionada. Desplázate hacia abajo y establece la alineación del texto en Centrado. Esto también se aplicará automáticamente a las vistas de teléfono móvil.
En el segundo Flex Col, añade un bloque de formulario (Form Block).
Añade un bloque div al bloque de formulario, llámalo “Form Flex” y utiliza estos ajustes:
- Display: Flex, Horizontal
- Justify: Start
- Align: Center
Añade otros dos divs al div Form Flex. Llámalos ambos “Input Wrapper” y configúralos para que se expandan.
En cada div de tipo input wrapper, coloca una etiqueta (Label) y un campo de entrada (Input Field).
Vamos a darle estilo a los elementos del formulario. Primero, selecciona la clase predeterminada All Labels.
Y aplica estos ajustes a las etiquetas:
- Peso: Normal
- Tamaño: 10px
- Altura de línea: 10px
- Transformación de texto: Todo en mayúsculas
A continuación, asigna la clase "Input Field" a ambos campos del formulario.
Aplica estos estilos:
- Margen inferior: 0px
- Altura mínima: 45px
- Ancho máximo: 95%
- Radio del borde: 3px (elimina la configuración de borde predeterminada)
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 vamos a mover y dar estilo al botón de envío; colócalo al final del div Form Flex y asígnale la clase "Submit Button". Añade estos ajustes:
- Elemento flexible: Reducir si es necesario
- Alineación personalizada: Alinear al final
- Relleno superior e inferior: 13px
- Relleno izquierdo: 25px
- Relleno derecho: 60px
- Tamaño de fuente: 16px
- Color de fondo: #00e766
Para el icono de correo, usé este de Flaticon. Una vez que hayas añadido el icono al panel de recursos, agrégalo como imagen de fondo al botón y utiliza estos ajustes para colocar la imagen/icono de fondo:
- Ancho: 29px
- Posición: 84%
- Mosaico: Ninguno
- Radio del borde: 3px
Ajustes de sombra paralela:
- Color: rgba(0, 0, 0, 0.17)
- Deja el resto de los ajustes como están por defecto.
Baja hasta la sección de Transiciones y Transformaciones en el panel de estilos, haz clic en el icono del cronómetro arriba a la derecha y elige Color de fondo en el menú desplegable, seguido de otra transición de "Sombra de caja". Deja ambos estilos en su estado predeterminado.
Ahora vamos a ajustar el estado al pasar el cursor sobre el botón de enviar. Haz clic en el menú desplegable de estados en la parte superior derecha del panel de estilos y selecciona hover.
Luego cambia el color de fondo a #00ca59 y ajusta el desenfoque de la sombra paralela a 9px.
¡Listo! Es hora de añadir las interacciones.
Paso 3: Añadir interacciones
Selecciona el contenedor de deslizamiento (Slide In Wrapper) y abre el panel de interacciones. Haz clic en el icono de más en la sección de la página actual. En el menú desplegable, selecciona la interacción de desplazamiento de página.
Haz clic en el menú desplegable en la sección de Al desplazar hacia arriba y selecciona Iniciar una animación.
Desde ahí, selecciona el signo más en la parte superior derecha de la sección Al desplazar hacia arriba.
Llama a esta interacción "Mostrar formulario de registro deslizante".
Haz clic en el icono de más junto al texto Acciones temporizadas. Selecciona la opción Mover en el menú desplegable.
Configura la aceleración (Easing) en "In Out Quart" y deja la duración predeterminada de 0.5s. En la sección Mover de abajo, establece la posición Y en 0%.
Hemos terminado con esta interacción. Cierra este nivel pulsando la X en la parte superior derecha del panel.
Vuelve a la interacción de desplazamiento de página, baja hasta la sección Al desplazar hacia abajo y añade una nueva interacción seleccionando Iniciar una animación en el menú desplegable.
Haz clic en el signo más en la parte superior derecha de esta sección. Llama a esta interacción "Ocultar formulario de registro deslizante".
Añade una interacción de Mover desde el menú desplegable pulsando el icono de más junto al texto Acciones temporizadas.
Configura la aceleración (Easing) en “In Out Quart” con una duración de “0.4s” y añade una posición Y de “105%”.
¡Buen trabajo! ¡Ahora pruébalo!
