Con Divi y sus nuevos efectos de desplazamiento, puede crear cualquier tipo de diseño que desee utilizando las opciones integradas de Divi y agregar algunos hermosos efectos de movimiento de desplazamiento para llevar su diseño al siguiente nivel. En el tutorial de hoy, agregaremos una técnica creativa a su lista que puede usar para próximos proyectos. Más específicamente, le mostraremos cómo agregar movimiento a las imágenes de fondo usando el módulo de imagen de Divi y la posición absoluta. ¡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.
Imagen de fondo de movimiento #1
Escritorio
Móvil
Imagen de fondo de movimiento #2
Escritorio
Móvil
Descargue los diseños de fondo de movimiento GRATIS
Para poner sus manos en los diseños de fondo de movimiento libre, primero deberá descargarlos 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
Comience agregando una nueva sección Divi a la página en la que está trabajando.
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la sección.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Columna 2 Espaciado
Luego, abra la configuración de la columna 2 y agregue algunos valores de relleno personalizados.
- Acolchado superior: 10vw
- Acolchado inferior: 10vw
- Acolchado izquierdo: 5vw
- Acolchado derecho: 5vw
Agregar módulo de imagen a la columna 1
Dejar cuadro de imagen vacío
¡Es hora de agregar módulos! Para agregar la imagen de fondo a nuestra primera columna, usaremos un contenedor de módulo de imagen vacío. Colocar la imagen de fondo en un contenedor de módulo separado nos ayudará a agregar efectos de desplazamiento solo a ese elemento. Más adelante en el tutorial, colocaremos otros módulos encima usando la posición absoluta de Divi. Asegúrese de dejar el cuadro de imagen del módulo de imagen vacío.
Fondo degradado
Agregue un fondo degradado en su lugar.
- Color 1: rgba(255.255.255,0)
- Color 2: #000000
- Tipo de gradiente: lineal
- Dirección del gradiente: 185 grados
- Coloque el degradado sobre la imagen de fondo: Sí
Imagen de fondo
Junto con una imagen de fondo de su elección.
Espaciado
Aumente la altura del módulo agregando algunos valores de relleno personalizados a continuación.
- Acolchado superior: 21vw
- Acolchado inferior: 21vw
Agregue el módulo divisor a la columna 1
Visibilidad
El siguiente módulo que necesitamos en la columna 1 es un módulo divisor. Asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.
- Mostrar divisor: Sí
Línea
Cambia el color de la línea del módulo a continuación.
- Color de línea: #ffffff
Dimensionamiento
Modifique también la configuración de tamaño.
- Peso del divisor: 6px
- Ancho: 100%
Espaciado
Luego, agregue un poco de margen superior en diferentes tamaños de pantalla.
- Margen superior: 30 px (escritorio), 20 px (tableta y teléfono)
Posición
Y cambie la posición del módulo divisor usando la posición absoluta de Divi.
- Posición: Absoluta
- Ubicación: Centro
Agregar módulo de texto a la columna 1
Agregar contenido H2
El siguiente módulo que necesitamos en la primera columna es un módulo de texto con algo de contenido H2.
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:
- Encabezado 2 Fuente: Raleway
- Encabezado 2 Peso de fuente: Negrita
- Título 2 Color del texto: #ffffff
- Título 2 Tamaño del texto: 70 px (escritorio), 50 px (tableta), 40 px (teléfono)
- Título 2 Color de sombra de texto: rgba(0,0,0,0.95)
Espaciado
Agregue un poco de relleno superior e inferior personalizado a continuación.
- Relleno superior: 150px
- Relleno inferior: 150px
Posición
Y reposicione el módulo en la pestaña avanzada.
- Posición: Absoluta
- Ubicación: Centro
Agregue el Módulo de Texto #1 a la Columna 2
Agregar contenido H3
A la siguiente columna. Agregue un primer módulo de texto con algún contenido H3 de su elección.
Configuración de texto H3
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H3 de la siguiente manera:
- Encabezado 3 Fuente: Raleway
- Título 3 Tamaño del texto: 50 px (Escritorio), 35 px (Tableta), 30 px (Teléfono)
- Encabezado 3 Altura de línea: 1,2 em
Espaciado
Agregue un poco de margen inferior también.
- Margen inferior: 50px
Agregue el Módulo de Texto #2 a la Columna 2
Agregar contenido
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 del texto: Raleway
- Altura de la línea de texto: 2,5 em
Agregar copia
El siguiente y último módulo que necesitamos en la columna 2 es un módulo de botones. Introduzca alguna copia de su elección.
Configuración de botones
Dale estilo al botón siguiente.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 25px
- Color del texto del botón: #000000
- Ancho del borde del botón: 0px
- Fuente del botón: Raleway
- Peso de la fuente del botón: Negrita
- Mostrar icono de botón: Sí
- Color del icono del botón: #000000
Espaciado
Y complete la configuración del módulo agregando un margen superior.
- Margen superior: 50px
Agregar fondo de movimiento n.° 1 al módulo de imagen
movimiento vertical
Ahora, en este punto, puede agregar cualquier tipo de efecto de desplazamiento de su elección al Módulo de imagen en la columna 1. Para recrear el primer ejemplo que se mostró en la vista previa de esta publicación, abra el Módulo de imagen y use la siguiente vertical ajustes de movimiento:
- Habilitar movimiento vertical: Sí
- Compensación inicial: 0
- Compensación media: 0 (al 69 %)
- Compensación final: -2
movimiento horizontal
Agregue un poco de movimiento horizontal también.
- Habilitar movimiento horizontal: Sí
- Compensación inicial: -2
- Desplazamiento medio: 0
- Compensación final: 0
Escalando hacia arriba y hacia abajo
Junto con un efecto de desplazamiento de escala hacia arriba y hacia abajo.
- Habilitar escalado hacia arriba y hacia abajo: Sí
- Escala inicial: 70% (al 21%)
- Escala media: 80% (al 39%)
- Escala final: 100% (al 54%)
Agregar fondo de movimiento n.° 2 al módulo de imagen
movimiento horizontal
Si prefiere recrear el segundo ejemplo de imagen de fondo de movimiento, agregue el siguiente efecto de movimiento horizontal:
- Habilitar movimiento horizontal: Sí
- Compensación inicial: -10
- Compensación media: -10 (al 40 %)
- Compensación final: 0 (al 50 %)
Desvanecimiento de entrada y salida
Utilice también el efecto de aparición y desaparición gradual:
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 0%
- Opacidad media: 0% (al 35%)
- Opacidad final: 100% (al 45%)
Giratorio
Y complete la configuración del efecto de desplazamiento del módulo agregando un efecto de rotación:
- Habilitar rotación: Sí
- Rotación inicial: 30°
- Rotación media: 0° (al 40%)
- Rotación final: 0° (al 50%)
Clona fila tantas veces como quieras
Una vez que hayas completado la fila con todos sus módulos, puedes clonar toda la fila tantas veces como quieras.
Cambiar imagen de fondo
Cambie la imagen de fondo del módulo de imagen para cada duplicado.
Cambiar contenido
Junto con el contenido y ya está!
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Imagen de fondo de movimiento #1
Escritorio
Móvil
Imagen de fondo de movimiento #2
Escritorio
Móvil
Pensamientos finales
En este tutorial, le mostramos cómo ser creativo con los efectos de desplazamiento de Divi. Hemos recreado un hermoso ejemplo desde cero donde hemos agregado efectos de desplazamiento a una imagen de fondo. ¡Hemos utilizado la configuración de posición absoluta integrada de Divi para llegar allí y también pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, 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.