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

El uso de fondos de paralaje en línea 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 impactante y coherente que muestre varias partes de su imagen de fondo. ¡También podrá descargar el archivo JSON de forma gratuita!

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 paralaje 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 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!

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.

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 un valor de relleno superior a la segunda columna también.

  • 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
  • Relleno 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

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

  • Nivel de texto de encabezado: H2
  • Fuente H2: EB Garamond
  • Estilo de fuente H2: TT
  • H2 Color del texto: Negro #oooooo
  • Tamaño de texto H2:

    • Escritorio: 3.1vw
    • Tableta: 5.4vw
    • Teléfono: 10vw
  • Altura de 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
  • Relleno 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

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

  • Fuente del 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,8 em

Espaciado

Ajuste la configuración de espaciado del módulo a continuación.

  • Acolchado inferior:

    • Teléfono: 4vw
  • Relleno izquierdo:

    • Escritorio + Tableta: 1.4vw
  • Relleno 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

Agregue un enlace al botón también.

Botón

Pase a la pestaña de diseño y diseñe 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: 1px
  • 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 algún 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 de fondo

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

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

Texto de encabezado

Pase 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
  • Relleno izquierdo y derecho:

    • Escritorio y tableta: 1.5vw
    • Teléfono: 5vw

Borde

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

Pasar el cursor por la escala de transformación

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

  • Escala de transformación 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 de fondo

Agregue también un fondo degradado flotante.

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

Texto de encabezado

Aplique estilo a la configuración de texto H4 a continuación.

  • 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
  • Relleno izquierdo y derecho:

    • Escritorio y tableta: 1.5vw
    • Teléfono: 5vw

Borde

Cambie también la configuración del borde.

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

Pasar el cursor por la escala de transformación

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

  • Escala de transformación 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

Clona ambos módulos de texto y colócalos en la tercera columna de la fila.

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

Cambiar contenido H4

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

Cambiar fondo para tableta y teléfono

Cambie la imagen de fondo en tamaños de pantalla más pequeños a continuación.

Cambiar el degradado de color al pasar el mouse

Continúe cambiando los colores en el gradiente de desplazamiento.

  • Gradiente de color 1: rosa rosa #cc9293
  • Gradiente de color 2: Rosa #cc9293

Espaciado

Finalmente, ajuste el espacio de la siguiente manera.

  • Margen superior:

    • Tableta: -6.4vw
    • Teléfono: 0vw

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

Cambiar contenido H4

Primero, cambia 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 el fondo degradado también.

  • Gradiente de color 1: Pino suave #5c755c
  • Gradiente 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

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

  • Nivel de texto de encabezado: H3
  • Fuente de texto H3: EB Garamond
  • Estilo de fuente H3: TT
  • Color del texto H3: negro #oooooo
  • Tamaño de texto H3:

    • Escritorio: 3vw
    • Tableta: 5vw
    • Teléfono: 12vw
  • Altura de 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

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

  • Fuente del 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,8 em

Espaciado

Luego, ajuste el espaciado.

  • Acolchado inferior:

    • Teléfono: 4vw
  • Acolchado izquierdo: 0.9vw
  • Acolchado derecho: 2.2vw

Módulo de botón duplicado de la columna 1 a la columna 4

Duplicar y arrastrar el módulo de botones

  • Duplica 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 botones duplicados 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!