Cuando usa una imagen de fondo en su sección, hay un par de formas de diseñar esa imagen desde el principio. Puede usar modos de fusión, superposiciones de fondo degradado y habilitar efectos de paralaje . Ahora, con Divi y sus nuevos efectos de desplazamiento, puede llevar la animación un paso más allá y combinar maravillosamente un efecto de alejamiento con el efecto de paralaje para aumentar otro tipo de su dimensión en su diseño web. Para hacer esto, usaremos módulos de imagen de posición absoluta y la unidad de ancho de ventana gráfica. En este tutorial, lo guiaremos a través del proceso recreando un hermoso diseño de CTA de estudio de caso que también puede descargar de forma gratuita.
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue GRATIS el diseño de los módulos de imagen en posición absoluta
Para poner sus manos en el diseño de módulos de imagen de posición absoluta gratuitos, 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!
¡Empecemos a Recrear!
Agregar nueva sección
Color de fondo
Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y cambie el color de fondo.
- Color de fondo: #000000
Dimensionamiento
Pase a la pestaña de diseño de la sección y cambie el ancho en la configuración de tamaño.
- Ancho: 95%
- Alineación de la sección: Centro
Espaciado
Agregue también algunos valores de espaciado personalizados.
- Margen superior: 5%
- Margen inferior: 5%
- Relleno superior: 0px
- Relleno inferior: 0px
desbordamientos
Y asegúrese de ocultar los desbordamientos de la sección. Este es un paso importante para hacer que el tutorial funcione. Al ocultar los desbordamientos, nos aseguraremos de que nada sobrepase 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 la fila y modifique la configuración de tamaño de la siguiente manera:
- 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
Agregue el módulo de texto n. ° 1 a la columna
Agregar contenido H2
Luego, agregue un primer módulo de texto con algún 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:
- Encabezado 2 Fuente: Lato
- Encabezado 2 Peso de la fuente: Light
- Título 2 Color del texto: #ffffff
- Título 2 Tamaño del texto: 4vw (escritorio), 8vw (tableta y teléfono)
- Encabezado 2 Espaciado entre letras: 1px
Espaciado
Agregaremos algunos valores de espaciado personalizados también.
- Margen superior: 25vw (escritorio), 50vw (tableta y teléfono)
- Margen Izquierdo: 5%
- Margen Derecho: 5%
Agregue el Módulo de Texto #2 a la Columna
Agregar contenido
El siguiente módulo que necesitamos es otro módulo de texto. Agregue algún contenido de descripción de su elección.
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:
- Fuente del texto: Lato
- Color del texto: #ffffff
- Tamaño de texto: 0.8vw (Escritorio), 2vw (Tableta), 3vw (Teléfono)
- Altura de línea de texto: 2,1 em
Dimensionamiento
Modifique el ancho en diferentes tamaños de pantalla a continuación.
- Ancho: 800px (Escritorio), 80% (Tableta), 90% (Teléfono)
Espaciado
Y complete la configuración del módulo agregando algunos valores de margen personalizados a la configuración de espaciado.
- Margen superior: 2%
- Margen inferior: 2%
- Margen Izquierdo: 5%
- Margen Derecho: 5%
Agregar copia
Pasamos al siguiente módulo, que es un módulo de botones. Agregue 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: 1.5vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
- Color del texto del botón: #ffffff
- Color degradado 1: rgba(255,255,255,0)
- Color degradado 2: #ffffff
- Tipo de gradiente: lineal
- Posición inicial: 98%
- Posición final: 98%
- Ancho del borde del botón: 0px
- Fuente del botón: Lato
- Peso de la fuente del botón: Pesado
- Mostrar icono de botón: Sí
- Ubicación del icono del botón: Izquierda
- Solo mostrar icono al pasar el mouse sobre el botón: No
Espaciado
También estamos usando algunos valores de espaciado personalizados en diferentes tamaños de pantalla.
- Margen inferior: 7vw (escritorio), 20vw (tableta), 25vw (teléfono)
- Margen Izquierdo: 5%
- Margen Derecho: 5%
Agregar módulo de imagen a la parte superior de la columna
Una vez que haya completado los primeros tres módulos en la columna de su fila, es hora de agregar el módulo de imagen de posición absoluta y usarlo como una imagen de fondo alejada. El primer paso para hacerlo es agregar un nuevo módulo de imagen en la parte superior de su columna.
Dejar cuadro de imagen vacío
Deje el cuadro de imagen vacío.
Imagen de fondo
Y use una imagen de fondo de paralaje en su lugar. Puede usar cualquier imagen que desee, pero si desea recrear exactamente el mismo resultado, puede encontrar las imágenes que se usaron en este tutorial descargando la carpeta al comienzo de este tutorial.
- Usar efecto de paralaje: Sí
- Método de paralaje: CSS
Dimensionamiento
Pase a la pestaña de diseño del módulo y fuerce el ancho completo.
- Forzar ancho completo: Sí
Espaciado
Agregue también un relleno superior e inferior personalizado en diferentes tamaños de pantalla.
- Acolchado superior: 27vw (escritorio), 54vw (tableta), 68vw (teléfono)
- Acolchado inferior: 27vw (escritorio), 54vw (tableta), 68vw (teléfono)
Posición
Ahora, para asegurarnos de que el módulo no ocupe ningún espacio contenedor en nuestra columna, reubicaremos todo el módulo en la pestaña avanzada.
- Posición: Absoluta
- Ubicación: Arriba a la izquierda
Efecto de desplazamiento de escala hacia arriba y hacia abajo
Y completaremos la configuración del módulo agregando un efecto de desplazamiento de escala hacia arriba y hacia abajo.
- Habilitar escalado hacia arriba y hacia abajo: Sí
- Escala inicial: 150% (al 30%)
- Escala media: 150% (al 45%)
- Escala final: 100% (al 55%)
- Disparador de efecto de movimiento: medio del elemento
Clone toda la sección tantas veces como sea necesario
Una vez que hayas completado la primera sección, puedes clonarla tantas veces como quieras.
Cambiar copia para cada sección duplicada
Asegúrese de cambiar la copia de cada duplicado.
Cambiar la imagen de fondo del módulo de imagen para cada sección duplicada
¡Junto con la imagen de fondo del módulo de imagen y listo!
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo ser creativo con los nuevos efectos de desplazamiento de Divi . Más específicamente, hemos utilizado módulos de imagen de posición absoluta junto con fondos de paralaje para crear un hermoso efecto de alejamiento de sección. ¡Acompañamos este tutorial con un hermoso diseño de CTA de estudio de caso que pudo descargar 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.