Uso de fondos de módulo para mostrar imágenes de Parallax en línea con Divi

Publicado: 2019-09-07

El uso de fondos de paralaje en línea de CSS realmente puede ayudar a mejorar la apariencia de su sitio web y este tutorial es el ejemplo perfecto. Usaremos fondos de varios módulos para crear un resultado sorprendente y coherente que muestre múltiples partes de su imagen de fondo. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el diseño de Parallax en línea GRATIS

Para poner sus manos en el diseño de paralaje en línea gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

Empecemos a recrear

Agregar nueva sección

Comience agregando una nueva sección regular a la página en la que está trabajando.

paralaje en línea

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Configuración de la columna 1

Espaciado

Agregue un valor de relleno superior a la primera columna.

Acolchado superior:
- Escritorio: 2vw
- Tableta + Teléfono: 6vw

Configuración de la columna 2

Espaciado

Agregue también un valor de relleno superior a la segunda columna.

Acolchado superior:
- Escritorio: 4vw
- Tableta + Teléfono: 6vw

Configuración de la columna 4

Espaciado

Omita la columna 3 y agregue algunos valores de espaciado a la columna 4.

Acolchado superior
- Escritorio: 19vw
- Tableta: 0vw
- Teléfono: 1vw
Acolchado izquierdo y derecho
- Escritorio y tableta: 1vw
- Teléfono: 0vw

Agregue el primer módulo de texto a la columna 1

Agregar contenido H2

Ahora, agregue el primer módulo de texto a la columna 1. Inserte algún contenido H2 de su elección.

Texto de encabezado

Vaya a la pestaña de diseño y cambie la configuración del texto H2 en consecuencia:

Nivel de texto del encabezado: H2
Fuente H2: EB Garamond
Estilo de fuente H2: TT
Color del texto H2: Negro #oooooo
Tamaño de texto H2:
- Escritorio: 3.1vw
- Tableta: 5.4vw
- Teléfono: 10vw
Altura de la línea H2:
- Escritorio + tableta: 1.1em
- Teléfono: 1.3em

Espaciado

Luego, agregue algo de espacio al módulo.

Acolchado superior:
- Escritorio: 4vw
- Tableta + Teléfono: 0vw
Acolchado izquierdo:
- Escritorio y tableta: 1vw
- Teléfono: 2vw
Acolchado derecho
- Escritorio y tableta: 1vw
- Teléfono: 0vw

Agregue el segundo módulo de texto a la columna 1

Agregar contenido

Ahora, agregue un segundo módulo de texto debajo del primero. Inserte algún contenido de párrafo.

Texto

Vaya a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:

Fuente de texto: EB Garamond
Color del texto: gris oscuro # 3d3d3d
Tamano del texto:
- Escritorio: 1vw
- Tableta: 2.2vw
- Teléfono: 3.8vw
Altura de la línea de texto: 1.8em

Espaciado

A continuación, ajuste la configuración de espaciado del módulo.

Acolchado inferior:
- Teléfono: 4vw
Acolchado izquierdo:
- Escritorio + Tableta: 1.4vw
Acolchado derecho:
- Escritorio: 1.3vw
- Tableta + Teléfono: 1.7vw

Agregar módulo de botones a la columna 1

Agregar contenido

Para completar la primera columna, agregue un módulo de botones. Inserta alguna copia.

Añadir enlace

Agrega un enlace al botón también.

Botón

Vaya a la pestaña de diseño y aplique el estilo de la configuración del botón en consecuencia:

Tamaño del texto del botón:
- Escritorio: 1vw
- Tableta: 2vw
- Teléfono: 4vw
Color del texto del botón: gris oscuro # 3d3d3d
Ancho del borde del botón: 1 px
Fuente del botón: EB Garamond

Espaciado

Luego, ajuste la configuración de espaciado del botón.

Margen superior:
- Escritorio + Tableta: 1vw
Margen inferior:
- Teléfono: 5vw

Agregue el primer módulo de texto a la columna 2

Agregar contenido

¡A la siguiente columna! Agregue un módulo de texto con contenido H4 de su elección.

Fondo

Continúe agregando una imagen de fondo. Cargue una imagen de fondo de paralaje CSS para escritorio y use una imagen normal en tamaños de pantalla más pequeños (sin paralaje CSS).

Fondo de escritorio: imagen
- Paralaje: CSS
Fondo de tableta + teléfono: imagen

Desplazamiento del fondo

A continuación, agregue un fondo degradado solo al pasar el mouse.

Desplazamiento de fondo: degradado de color
Degradado de color 1: Amarillo dorado claro # edba63
Degradado de color 2: amarillo dorado # ed9d12
Dirección del gradiente: 23 grados
Colocar degradado sobre la imagen de fondo: Sí

Texto de encabezado

Vaya a la pestaña de diseño y cambie la configuración de texto H4.

Nivel de encabezado de texto: H4
Fuente H4: EB Garamond
Color del texto H4: Blanco #ffffff
Tamaño de texto H4:
- Escritorio: 2.3vw
- Tableta: 4.5vw
- Teléfono: 8.5vw

Espaciado

Luego, ajuste el espaciado.

Margen superior:
- Teléfono: -6vw
Acolchado superior:
- Escritorio: 15vw
- Tableta: 22vw
- Teléfono: 43vw
Acolchado inferior:
- Escritorio + Tableta: 1vw
Acolchado izquierdo y derecho:
- Escritorio y tableta: 1.5vw
- Teléfono: 5vw

Frontera

Continúe diseñando los bordes.

Esquinas redondeadas: 1vw todas las esquinas
Estilos de borde: todos los lados
Ancho del borde: 0.3vw
Color del borde: blanco #ffffff

Transformar escala flotante

Complete la configuración del módulo agregando un efecto de zoom al pasar el mouse.

Transformar escala al pasar el mouse: 102%

Agregue el segundo módulo de texto a la columna 2

Agregar contenido

Agregue un segundo módulo a la segunda columna con algún contenido H4 de su elección.

Fondo

Al igual que el módulo de texto anterior, agregue una imagen de fondo de paralaje CSS en el escritorio y una imagen de fondo normal en tamaños de pantalla más pequeños.

Fondo de escritorio: imagen
- Paralaje: CSS
Fondo de tableta + teléfono: imagen

Desplazamiento del fondo

Agregue un fondo degradado flotante también.

Desplazamiento de fondo: degradado de color
Degradado de color 1: Magenta claro # 91463f
Degradado de color 2: Magenta # 910400
Dirección del gradiente: 23 grados
Colocar degradado sobre la imagen de fondo: Sí

Texto de encabezado

A continuación, modifique el estilo de la configuración de texto H4.

Nivel de encabezado de texto: H4
Fuente H4: EB Garamond
Color del texto H4: Blanco #ffffff
Tamaño de texto H4:
- Escritorio: 2.3vw
- Tableta: 4.5vw
- Teléfono: 8.5vw

Espaciado

Y modifique la configuración de espaciado.

Acolchado superior:
- Escritorio: 15vw
- Tableta: 21.1vw
- Teléfono: 43vw
Acolchado inferior:
- Escritorio + Tableta: 1vw
Acolchado izquierdo y derecho:
- Escritorio y tableta: 1.5vw
- Teléfono: 5vw

Frontera

Cambie también la configuración de los bordes.

Esquinas redondeadas: 1vw todas las esquinas
Estilos de borde: todos los lados
Ancho del borde: 0.3vw
Color del borde: blanco #ffffff

Transformar escala flotante

Por último, pero no menos importante, agregue un efecto de zoom al módulo de texto.

Transformar escala al pasar el mouse: 102%

Módulos de texto duplicados de la columna 2 a la columna 3

Duplicar y arrastrar módulos de texto

Clone ambos módulos de texto y colóquelos en la tercera columna de la fila.

Ajustar el primer módulo de texto en la columna 3

Cambiar el contenido de H4

Abra el primer módulo de texto duplicado en la columna 3 y cambie el contenido.

Cambiar fondo para tableta y teléfono

A continuación, cambie la imagen de fondo en tamaños de pantalla más pequeños.

Cambiar el degradado de color al pasar el mouse

Continúe cambiando los colores en el gradiente flotante.

Degradado de color 1: rosa rosa # cc9293
Degradado de color 2: rosa # cc9293

Espaciado

Finalmente, ajuste el espaciado de la siguiente manera.

Margen superior:
- Tableta: -6.4vw
- Teléfono: 0vw

Ajustar el segundo módulo de texto en la columna 3

Cambiar el contenido de H4

Primero, cambie el contenido.

Cambiar fondo para tableta y teléfono

Luego, cambie la imagen de fondo en tamaños de pantalla más pequeños.

Cambiar el degradado de color al pasar el mouse

Cambia también el fondo degradado.

Degradado de color 1: Pino suave # 5c755c
Degradado de color 2: Verde pino # 4D754D

Agregue el primer módulo de texto a la columna 4

Agregar contenido

Pasando a la columna 4, agregue un módulo de texto. Inserte algún contenido H3 de su elección.

Texto de encabezado

Vaya a la pestaña de diseño y cambie la configuración de texto H3 de la siguiente manera:

Nivel de texto del encabezado: H3
Fuente de texto H3: EB Garamond
Estilo de fuente H3: TT
Color del texto H3: Negro #oooooo
Tamaño del texto H3:
- Escritorio: 3vw
- Tableta: 5vw
- Teléfono: 12vw
Altura de la línea H3
- Escritorio + tableta: 1em
- Teléfono: 1.1em

Agregue el segundo módulo de texto a la columna 4

Agregar contenido

Agregue otro módulo de texto debajo del primero. Inserte algún contenido de párrafo.

Texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

Fuente de texto: EB Garamond
Color del texto: gris oscuro # 3d3d3d
Tamano del texto:
- Escritorio: 1vw
- Tableta: 2.2vw
- Teléfono: 3.8vw
Altura de la línea de texto: 1.8em

Espaciado

Luego, ajuste el espaciado.

Acolchado inferior:
- Teléfono: 4vw
Acolchado izquierdo: 0.9vw
Acolchado derecho: 2.2vw

Módulo de botones duplicado de la columna 1 a la columna 4

Duplica y arrastra el módulo de botones

Duplique el módulo de botones en la columna 1.
Arrástrelo a la columna 3 debajo de los módulos de texto.

Espaciado

Ajuste algunos valores de espaciado en el módulo de botón duplicado y ¡listo!

Margen inferior: 0vw
Margen izquierdo:
- Escritorio + Tableta: 0.7vw
- Teléfono: 0.9vw

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Conclusión

En esta publicación, le mostramos cómo crear un diseño de paralaje en línea con cuatro cuadros de texto que muestran una parte diferente de la misma imagen. Esperamos que disfrute de este diseño y si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!