Uso de fondos de módulo 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. Utilizaremos múltiples fondos de 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

Descargar The Inline Parallax Layout 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=RJF5rrlJbxY (/ incrustar)

Suscríbase a nuestro canal de Youtube

Comencemos 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 columna

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

Configuración de columna 1

Espaciado

Agregue un valor de relleno superior a la primera columna.

  • Relleno superior:
    • Escritorio: 2vw
    • Tableta + Teléfono: 6vw

Configuración de columna 2

Espaciado

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

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

Añadir contenido H2

Ahora, agregue el primer módulo de texto a la columna 1. Inserte el contenido H2 que prefiera.

Encabezado de texto

Pase 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.

  • Relleno 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. Insertar algún contenido de párrafo.

Texto

Pase a la pestaña de diseño y cambie la configuración de 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

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

  • Acolchado inferior:
    • Teléfono: 4vw
  • Acolchado Izquierdo:
    • Escritorio + Tableta: 1.4vw
  • Relleno derecho:
    • Escritorio: 1.3vw
    • Tableta + Teléfono: 1.7vw

Agregar módulo de botón a la columna 1

Agregar contenido

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

Añadir enlace

Agregue un enlace al botón también.

Botón

Pase a la pestaña de diseño y aplique estilo a 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.

Antecedentes

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 por encima.

  • Desplazamiento del 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 gradiente sobre la imagen de fondo: Sí

Encabezado de texto

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 espacio.

  • Margen superior:
    • Teléfono: -6vw
  • Relleno 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

Frontera

Continúa estilizando 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 de desplazamiento

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

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

Antecedentes

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 un fondo de gradiente flotante también.

  • Desplazamiento del 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 gradiente sobre la imagen de fondo: Sí

Encabezado de texto

A continuación, aplique estilo a 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.

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

Frontera

Cambie la configuración del borde también.

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

Transformar escala de desplazamiento

Por último, pero no menos importante, agregue un efecto de zoom 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

Clone ambos módulos de texto y colóquelos 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

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

Cambiar gradiente de color al pasar el mouse

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

  • 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, 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 gradiente de color al pasar el mouse

Cambia el fondo del 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.

Encabezado de texto

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. Insertar algún contenido de párrafo.

Texto

Pase a la pestaña de diseño y cambie la configuración de 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 espacio.

  • Acolchado inferior:
    • Teléfono: 4vw
  • Acolchado izquierdo: 0.9vw
  • Relleno 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

  • 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 espacio en el módulo de botón duplicado y ya está.

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