Divi y sus nuevos efectos de desplazamiento están hechos para que lleves fácilmente tu experiencia de diseño web al siguiente nivel. Por supuesto, puede aplicarlo directamente a los elementos dentro de su sección, pero también puede optar por agregar movimiento a los elementos subyacentes. Optar por un enfoque subyacente le permite mantener el contenido estático mientras se produce un movimiento de fondo. En este tutorial, usaremos formas de movimiento transformadas como elementos subyacentes para crear una sección animada. Manejaremos dos ejemplos diferentes, pero las posibilidades son realmente infinitas. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Ejemplo 1
Escritorio
Móvil
Ejemplo #2
Escritorio
Móvil
Descarga el diseño de formas de movimiento transformado GRATIS
Para poner sus manos en el diseño de formas de movimiento transformadas gratis, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Pasos generales
Agregar nueva sección
Fondo degradado
Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y aplique un fondo degradado.
- Color 1: #ffffff
- Color 2: #97c6fc
- Tipo de gradiente: lineal
- Dirección del gradiente: 306 grados
- Posición inicial: 50%
- Posición final: 50%
Espaciado
Pase a la pestaña de diseño de la sección y use algunos márgenes personalizados y valores de relleno.
- Margen Izquierdo: 4%
- Margen Derecho: 4%
- Acolchado superior: 11%
- Acolchado inferior: 11%
Sombra de la caja
También estamos usando una sombra de caja sutil.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba(0,0,0,0.1)
- Posición de la sombra del cuadro: Sombra exterior
Visibilidad
Y completaremos la configuración de la sección configurando los desbordamientos como ocultos. Esto asegurará que cuando agreguemos las formas de movimiento transformadas, no excedan el contenedor de la sección.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a su sección usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de fila y cambie el ancho máximo en la configuración de tamaño.
- Ancho máximo: 1580px
Columna 1 Espaciado
También estamos agregando algo de relleno superior a la configuración de espaciado de la primera columna.
- Acolchado superior: 9%
Agregue el módulo de texto n.º 1 a la columna 1
Agregar contenido H2
Una vez que haya completado la configuración de la fila, es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Agregue contenido H2 de su elección.
Configuración de texto H2
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H2 en consecuencia:
- Rúbrica 2 Fuente: Abril Fatface
- Título 2 Color del texto: #7206a0
- Título 2 Tamaño del texto: 80 px (escritorio), 65 px (tableta), 50 px (teléfono)
Agregue el Módulo de Texto #2 a la Columna 1
Configuración de texto
Agregue otro módulo de texto justo debajo del anterior con algún contenido descriptivo de su elección.
Configuración de texto
Cambie la configuración de texto del módulo de la siguiente manera:
- Fuente de texto: Open Sans
- Color del texto: #7206a0
- Altura de línea de texto: 2em
Agregar copia
El último módulo que necesitamos en la columna 1 es un módulo de botones. Introduzca alguna copia de su elección.
Configuración de botones
Luego, ve a la pestaña de diseño y dale estilo al botón según corresponda:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 20px
- Color del texto del botón: #ffffff
- Color de fondo del botón: #077bff
- Ancho del borde del botón: 0px
- Fuente del botón: Abril Fatface
Espaciado
También estamos agregando algunos valores de relleno personalizados.
- Relleno superior: 20px
- Relleno inferior: 20px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Agregar módulo de imagen a la columna 2
Cargar imagen
En la segunda columna de la fila, el único módulo que necesitamos es un módulo de imagen. Sube una ilustración de tu elección. Si desea usar exactamente el que hemos usado en este tutorial, puede encontrarlo en la carpeta de descarga que pudo descargar al comienzo de esta publicación.
Alineación
Pase a la pestaña de diseño del módulo a continuación y cambie la alineación de la imagen.
- Alineación de imagen: Derecha
Dimensionamiento
Complete la configuración del módulo modificando el ancho en diferentes tamaños de pantalla.
- Ancho: 100 % (escritorio), 50 % (tableta y teléfono)
Recrear el ejemplo n.º 1
Agregar módulo de texto a la parte superior de la columna 1
Una vez que todos los módulos regulares estén en su lugar, ¡es hora de agregar las formas de movimiento transformadas! Recrearemos el primer ejemplo agregando un nuevo módulo de texto en la parte superior de la primera columna. Deje el cuadro de contenido vacío.
Fondo degradado
Agregue un fondo degradado al siguiente módulo.
- Color 1: rgba(255.255.255,0)
- Color 2: #00fff6
- Tipo de gradiente: lineal
- Dirección del gradiente: 306 grados
- Posición inicial: 54%
- Posición final: 54%
Dimensionamiento
Modifique también la configuración de tamaño.
- Ancho: 165%
- Altura: 270%
Espaciado
Luego, vaya a la configuración de espaciado y use algunos valores de espaciado personalizados.
- Margen inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Acolchado superior: 29%
- Acolchado inferior: 29%
Transformar Rotar
Estamos rotando el módulo a continuación.
- Izquierda: 270 grados
Transformar sesgo
También aplicaremos un valor de sesgo de transformación.
- Abajo: 16 grados
- Derecha: 16 grados
Posición
Luego, pase a la pestaña avanzada y modifique la configuración de posición de la siguiente manera:
- Posición: Absoluta
- Ubicación: Arriba a la izquierda
- Desplazamiento vertical: -50 %
- Desplazamiento Horizontal: -50%
Efecto de desplazamiento de movimiento vertical
A continuación, agregaremos los efectos de desplazamiento , comenzando con un poco de movimiento vertical.
- Habilitar movimiento vertical: Sí
- Compensación inicial: 4
- Compensación media: 0 (al 50 %)
- Compensación final: -4
Efecto de desplazamiento de movimiento horizontal
¡Y completaremos la configuración del módulo agregando también algo de movimiento horizontal!
- Habilitar movimiento horizontal: Sí
- Compensación inicial: 4
- Compensación media: 0 (al 50 %)
- Compensación final: -4%
Recrear el Ejemplo #2
Agregar módulo de texto a la parte superior de la columna 1
¿Quiere recrear el segundo ejemplo en su lugar? Agregue un módulo de texto en la parte superior de la primera columna.
Color de fondo
Abra la configuración del módulo y aplique un color de fondo.
- Color de fondo: #00fff6
Dimensionamiento
Pase a la pestaña de diseño del módulo y cambie la configuración de tamaño.
- Ancho: 165%
- Altura: 270%
Espaciado
También estamos agregando algunos valores de espaciado personalizados.
- Margen inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Acolchado superior: 29%
- Acolchado inferior: 29%
Rotar sesgar
Y aplicaremos un efecto de sesgo de transformación en la configuración de transformación.
- Derecha: -54 grados
Posición
Luego, iremos a la pestaña avanzada y cambiaremos la configuración de posición del módulo.
- Posición: Absoluta
- Ubicación: Arriba a la izquierda
- Desplazamiento vertical: -50 %
- Desplazamiento Horizontal: -50%
Efecto de desplazamiento de movimiento vertical
A continuación, añadiremos los efectos de desplazamiento. Comenzando con un poco de movimiento vertical.
- Habilitar movimiento vertical: Sí
- Compensación inicial: 4
- Compensación media: 0 (al 50 %)
- Compensación final: -4
Efecto de desplazamiento de movimiento horizontal
¡Y completaremos la configuración del módulo agregando también algo de movimiento horizontal!
- Habilitar movimiento horizontal: Sí
- Compensación inicial: 4
- Compensación media: 0 (al 50 %)
- Compensación final: -4
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Ejemplo 1
Escritorio
Móvil
Ejemplo #2
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo agregar creativamente formas de movimiento transformadas al diseño de su sección. Las formas de movimiento transformadas subyacentes ayudan a agregar una animación sutil a sus diseños de sección. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.