Cómo crear un efecto de desplazamiento de fondo de doble capa con Divi

Si está buscando una forma de hacer que su sitio web se destaque, es posible que desee aprender a crear fondos de doble capa. La creación de fondos de doble capa ayudará a que su imagen de fondo cobre vida a través del movimiento. En el tutorial de hoy, le mostraremos cómo crear un diseño de fondo de doble capa con Divi. Este tutorial contiene tres partes:

1. Preparación de dos archivos de imagen en Adobe Photoshop
2. Creando el diseño dentro de Divi
3. Aplicar los efectos de desplazamiento para animar el fondo

¡También podrá descargar los archivos JSON y de imagen 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

Descarga The Layout GRATIS

Para poner sus manos en el diseño 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.

DESCARGAR

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!

1. Cree archivos de imagen en Photoshop

Elija la imagen del producto con fondo limpio y ábrala en Photoshop

En la primera parte de este tutorial, crearemos los archivos de imagen que usaremos a lo largo del tutorial Divi. Para crearlos, usaremos Adobe Photoshop, pero siéntase libre de usar cualquier otro software de edición de imágenes de su elección. El efecto de imagen de fondo de doble capa funcionará mejor si la imagen con la que está trabajando tiene:

1. Un enfoque claro en un objeto dentro de la imagen.
2. Un fondo limpio

La siguiente imagen es un ejemplo perfecto. Puede encontrar este archivo de imagen en la carpeta comprimida compartida en el área de descarga de esta publicación.

Duplicar capa

Una vez que haya abierto la imagen dentro de Photoshop, clone la capa original una vez. Trabajaremos en la capa duplicada.

Ocultar capa original

Para asegurarnos de que vemos el resultado a medida que avanzamos en el tutorial, oculte la capa original.

Crear PNG a partir de la selección de objetos en la imagen

Utilice la herramienta de selección rápida en la placa

En total, necesitaremos dos archivos de imagen para el tutorial:

1. un PNG del objeto, en este caso, la placa
2. un JPEG del fondo sin el objeto

Estamos separando el objeto de su fondo para poder manipularlos individualmente una vez dentro del entorno Divi.

Para comenzar a seleccionar el objeto, elija la "Herramienta de selección rápida" en la barra de herramientas e intente cubrir la mayor cantidad posible del objeto.

Seleccionar + Selección de máscara

Notará que la selección de objetos aún no es lo suficientemente buena. Puede ajustar el aspecto de su selección utilizando la opción "Seleccionar y enmascarar" cuando hace clic con el botón derecho en la selección. Una vez allí, puedes jugar con la opacidad, suavidad, etc.

Crear una máscara de capa a partir de la selección

Aunque hemos creado una selección suave, todavía hay partes dentro del objeto que aún no están seleccionadas. Agregaremos manualmente estas partes a nuestra selección haciendo clic en el botón de máscara de capa que puede ver en la pantalla de impresión a continuación:

Ajuste fino de la máscara interior de selección con pinceles

Una vez que haya creado su máscara de capa, puede comenzar a usar un pincel para modificar la máscara de capa. Asegúrate de que tu máscara de capa esté seleccionada.

• El uso de un pincel negro (# 000) eliminará partes de su máscara de capa
• El uso de un pincel blanco (#fff) agregará partes posteriores de su máscara de capa

Use un cepillo que no tenga demasiada dureza, para que no tenga que ser muy preciso.

Máscara de doble verificación con capa coloreada

Siempre puede verificar su máscara de capa colocando una capa de color debajo de ella. Las capas de colores lo delatarán más fácilmente si se ha perdido un lugar.

Guardar selección PNG como archivo de imagen independiente

Crear nuevo archivo

Ahora que tiene la selección PNG de su objeto, puede clonar toda la capa, por lo que siempre puede volver a ella. En la siguiente parte, usaremos la capa duplicada para crear la imagen de fondo sin el objeto.

El tamaño de nuestro objeto es mucho más pequeño que el tamaño del archivo inicial, por lo que crearemos un nuevo archivo para nuestro objeto y lo traeremos.

Ajustar selección en archivo nuevo

Copie y pegue la capa con su máscara de capa dentro del nuevo archivo que ha creado.

Exportar para Web

Y expórtelo para web como PNG.

Comprimir archivo de imagen

Los PNG con fondos transparentes tienden a tener un tamaño de archivo más grande, por lo que se recomienda que comprima el archivo con una herramienta de su elección.

Eliminar objeto en la imagen original

Seleccionar máscara de capa

¡De vuelta al archivo inicial de Photoshop! Allí, vamos a crear la imagen de fondo sin el objeto. Estamos usando la capa superior dentro de nuestro archivo para hacer eso. Primero, asegúrese de que su máscara de capa esté seleccionada.

Invertir máscara

Luego, vaya a las propiedades de esta capa y haga clic en "Invertir".

Aplicar máscara de capa

Ahora notará que el objeto es transparente dentro de la capa inicial. Vamos a aplicar la máscara de capa a nuestra capa haciendo clic derecho y seleccionando "Aplicar máscara de capa".

Llenar el espacio vacío con la herramienta Clonar

Todavía tenemos un agujero en el medio, que debemos llenar. Ahí es donde la herramienta de clonación resulta útil. Seleccione un tamaño de pincel de su elección y complete la imagen. No necesitas ser muy exacto con esto, dentro del tutorial Divi, vamos a colocar el objeto encima.

Guardar imagen sin objeto

Exportar para Web

Una vez que haya completado la imagen de fondo sin el objeto, puede guardarla como un archivo JPEG con una calidad del 70%.

Comprimir archivo de imagen

Asegúrate de comprimir también esta imagen.

2. Cree un efecto de fondo de doble capa en Divi

Agregar nueva sección

Cargar imagen de fondo

Una vez que tenga ambos archivos de imagen a su alcance, ¡es hora de cambiar a Divi! Abra una nueva página y agregue una nueva sección. Sube la imagen de fondo que creaste en la primera parte del tutorial.

Espaciado

Vaya a la pestaña de diseño de la sección y aplique algunos valores de espaciado personalizados. El margen inferior que estamos agregando nos ayudará a ver cómo el efecto encaja. Normalmente, este margen será reemplazado por las siguientes secciones de su diseño.

• Margen inferior: 100vh
• Acolchado superior:
  • Escritorio: 100px
  • Tableta y teléfono: 50px
• Acolchado inferior:
  • Escritorio: 100px
  • Tableta: 600px
  • Teléfono: 500px

Agregar fila n. ° 1

Estructura de la columna

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

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y cambie el ancho y el ancho máximo. Estos ajustes permitirán que la fila toque los lados izquierdo y derecho del contenedor de la sección en todo momento. De esta manera, podemos asegurarnos de que las imágenes PNG y de fondo tengan el mismo equilibrio en todos los tamaños de pantalla.

• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Vaya a la configuración de espaciado de la fila a continuación y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Posición

Luego, reposicione toda la fila.

• Posición: Absoluto
• Localización:
  • Escritorio: Centro
  • Tableta y teléfono: parte inferior central
• Desplazamiento vertical:
  • Escritorio: /
  • Tableta y teléfono: 30vh

Agregar módulo de imagen a la fila

Subir imagen PNG

Una vez que haya completado la configuración de la fila, agregue un Módulo de imagen a la fila y cargue el archivo PNG que creó en la primera parte del tutorial.

Alineación

Pase a la pestaña de diseño y cambie la alineación de la imagen.

• Alineación de la imagen: centro

Dimensionamiento

A continuación, cambie la configuración de tamaño.

• Ancho:
  • Escritorio: 36%
  • Tableta y teléfono: 60%

Agregar fila n. ° 2

Estructura de la columna

Luego, agregue otra fila a la sección usando la siguiente estructura de columnas:

Color de fondo

Abra la configuración de la fila y cambie el color de fondo.

• Color de fondo: #ffffff

Dimensionamiento

A continuación, modifique la configuración de tamaño.

• Ancho: 90%
• Ancho máximo: 550px
• Alineación de filas:
  • Escritorio: Izquierda
  • Tableta y teléfono: Centro

Espaciado

Luego, aplique algunos valores de relleno personalizados.

• Acolchado superior: 11%
• Acolchado inferior: 11%
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Desplazamiento horizontal

También estamos agregando un desplazamiento horizontal a la configuración de posición.

• Desplazamiento horizontal:
  • Escritorio: 5%
  • Tableta y teléfono: 0%

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido H2

Es hora de agregar módulos, comenzando con un primer módulo de texto que contenga algo de contenido H2.

Configuración de texto H2

Diseñe el texto H2 de la siguiente manera:

• Fuente del encabezado 2: Kumbh Sans
• Tamaño del texto del encabezado 2:
  • Escritorio: 90px
  • Tableta: 60px
  • Teléfono: 45px

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido de descripción

Agregue otro módulo de texto justo debajo del anterior e inserte algún contenido descriptivo de su elección.

Configuración de texto

Cambie la configuración de texto del módulo en consecuencia:

• Fuente de texto: Kumbh Sans
• Altura de la línea de texto: 2em

Agregar módulo de botones a la columna 1

Agregar copia

El último módulo que necesitamos en esta columna es un módulo de botones. Agregue una copia de su elección.

Configuración de botones

Diseñe el botón en consecuencia:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 20px
• Color del texto del botón: # 6b6443
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px

• Fuente del botón: Kumbh Sans
• Peso de la fuente del botón: negrita
• Mostrar icono de botón: Sí
• Ubicación del icono del botón: Izquierda
• Mostrar solo el icono al pasar el mouse por el botón: No

Sombra de la caja

Incluya también una sombra de caja.

• Posición horizontal de la sombra del cuadro: 0px
• Posición vertical de la sombra del cuadro: 2px
• Color de sombra: # 6b6443

3. Agregar efectos de desplazamiento

Movimiento vertical de la imagen

En la última parte de este tutorial, nos centraremos en agregar los efectos de desplazamiento al módulo de imagen que contiene el archivo de imagen PNG. Abra la configuración del módulo, navegue hasta la pestaña avanzada y aplique la siguiente configuración de movimiento vertical:

• Habilitar movimiento vertical: sí
• Desplazamiento inicial:
  • Escritorio: 0
  • Tableta y teléfono: 4 (al 0%)
• Desplazamiento medio:
  • Escritorio: 0
  • Tableta y teléfono: 0 (al 97%)
• Desplazamiento final:
  • Escritorio: 0
  • Tableta y teléfono: -2 (al 100%)

Movimiento horizontal de la imagen

Estamos completando nuestro diseño con las siguientes configuraciones de movimiento horizontal:

• Habilitar movimiento horizontal: Sí
• Desplazamiento inicial:
  • Escritorio: 0 (al 0%)
  • Tableta y teléfono: 0
• Desplazamiento medio:
  • Escritorio: 0 (al 65%)
  • Tableta y teléfono: 0 (al 97%)
• Desplazamiento final:
  • Escritorio: -10 (al 100%)
  • Tableta y teléfono: 0

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 crear un fondo de doble capa y animarlo con los efectos de desplazamiento integrados de Divi. En la primera parte del tutorial, preparamos los archivos de imagen dentro de Adobe Photoshop. En la segunda parte del tutorial, nos enfocamos en usar los archivos de imagen dentro de Divi para crear un diseño receptivo. ¡También pudo descargar el archivo JSON gratis! 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.