Cómo crear efectos de desplazamiento de movimiento 3D en Divi

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos juntos.

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, 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.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON a Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

El concepto explicado

La creación de efectos de desplazamiento de movimiento 3D en Divi realmente implica tres pasos:

1. Agregar perspectiva a la fila
2. Agregar rotación de transformación a la columna
3. Agregar efectos de desplazamiento a los módulos

Aquí hay un vistazo rápido a cómo hacer esto…

Agregar perspectiva a la fila

Para la configuración de la fila, agregue un fragmento de CSS personalizado que agregue perspectiva con un valor que determine qué tan lejos desea que se vea el elemento desde el usuario/pantalla en el espacio 3D una vez que se gira el elemento secundario.

Agregar rotación de transformación a la columna

Luego agregamos rotación a la columna agregando un valor de grado a la opción de rotación de transformación a lo largo del eje X o Y.

Agregar efectos de desplazamiento (movimiento) al módulo

Finalmente, agregamos efectos de desplazamiento al módulo dentro de la columna que moverá el módulo a lo largo del plano que se ha girado en el espacio 3D. En otras palabras, parecerá que el módulo se mueve «alejando» y «acercando» al usuario.

Tenga esto en cuenta mientras abordamos nuestro diseño para este tutorial a continuación.

Sumerjámonos.

Parte 1: agregar rotación y movimiento 3D a un encabezado y una imagen

Para esta primera parte del diseño, agregaremos rotación 3D a un encabezado simulado y una imagen. Este sería un gran diseño para presentar un producto o estudio de caso de una manera única.

Agregar sección y fila

Para comenzar, agregue una fila de una columna a la sección regular predeterminada proporcionada.

Relleno de sección

Antes de agregar cualquier módulo, abra la configuración de la sección y actualice lo siguiente:

• Acolchado: 40vh superior

Esto centrará el texto del encabezado verticalmente (más o menos) y también nos dará espacio para que ocurran los efectos de desplazamiento.

Agregar perspectiva a la fila

Para un diseño 3D más realista, necesitamos agregar perspectiva al contenedor principal del elemento que vamos a rotar en el espacio 3D. Para este ejemplo, vamos a rotar la columna, por lo que debemos agregar perspectiva a la fila. Para obtener una explicación más detallada de cómo funciona esto, consulte nuestra publicación sobre cómo usar la perspectiva con opciones de transformación .

Para agregar perspectiva a la fila, abra la configuración de la fila y agregue el siguiente CSS al elemento principal:

Agregar módulo de texto

Una vez que se haya agregado la perspectiva a la fila, agregue un nuevo módulo de texto a la columna.

Contenido del texto

Luego actualice el contenido del texto con el siguiente encabezado h1:

Configuración de diseño de texto

Luego actualice el diseño del texto de la siguiente manera:

• Fuente del encabezado: Raleway
• Título Peso de la fuente: Negrita
• Alineación del texto del título: Centro
• Tamaño del texto del título: 6vw

Agregar módulo de imagen

Una vez que el texto esté en su lugar, agregue un nuevo módulo de imagen debajo del texto.

Cargar imagen

Para este diseño, vamos a utilizar una captura de pantalla simulada de una página web tomada del paquete de diseño Web Freelancer. La imagen es de 880px por 1260px. El tamaño de la imagen definitivamente afectará el diseño 3D una vez que giremos la columna, así que para obtener los mismos resultados, intente usar dimensiones similares para la imagen que usa.

Configuración de imagen

Actualice la configuración de la imagen de la siguiente manera:

• Alineación de imagen: Centro
• Altura: 600px
• Sombra de caja: ver captura de pantalla
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de cuadro: 60px
• Color de sombra: rgba(0,0,0,0.2)

Rotando la columna

Abra el cuadro de capas y luego abra la configuración de la columna.

Con nuestro texto e imagen en su lugar, ahora podemos rotar la columna en el espacio 3D. Para hacer esto, abra el cuadro de capas y luego abra la configuración de la columna.

Luego actualice la siguiente configuración de columna:

• Transformar origen: centro superior

Ahora agreguemos rotación de transformación a la columna de la siguiente manera:

En la pestaña de transformación de rotación…

• Transformar Rotar Eje Y: 30 grados

Efectos de desplazamiento de texto

Ahora que los elementos giraron en el espacio 3D, podemos agregar los efectos de desplazamiento a cada uno de los elementos de nuestra columna. Para comenzar, abra la configuración del módulo de texto y agregue lo siguiente:

En la pestaña Movimiento vertical…

• Habilitar movimiento vertical: SÍ
• Desplazamiento inicial: -4 (a 0 % de ventana gráfica)
• Desplazamiento medio: 0 (al 50 % de la ventana gráfica)
• Desplazamiento final: 4 (al 100 % de la ventana gráfica)

En la pestaña Escalar hacia arriba y hacia abajo…

• Habilitar escalado hacia arriba y hacia abajo: SÍ
• Escala inicial: 100 % (a 0 % de ventana gráfica)
• Escala media: 100 % (al 50 % de la ventana gráfica)
• Escala final: 50 % (al 100 % de la ventana gráfica)

Efectos de desplazamiento de imagen

A continuación, abra la configuración del módulo de imagen y actualice lo siguiente:

En la pestaña Movimiento vertical…

• Habilitar movimiento vertical: SÍ
• Desplazamiento inicial: 0 (a 0 % de ventana gráfica)
• Desplazamiento medio: 0 (a 0 % de ventana gráfica)
• Compensación final: -6.5 (al 100 % de la ventana gráfica)
• Disparador de efecto de movimiento: Parte superior del elemento

En la pestaña Escalar hacia arriba y hacia abajo…

• Habilitar escalado hacia arriba y hacia abajo: SÍ
• Escala inicial: 130 % (a 0 % de ventana gráfica)
• Escala media: 100 % (al 50 % de la ventana gráfica)
• Escala final: 50 % (al 100 % de la ventana gráfica)

Ahora veamos el resultado de la parte 1 del efecto de desplazamiento de movimiento 3D.

Parte 2: agregar movimiento y rotación 3D a las imágenes y sus columnas

En la parte 2 de este tutorial, vamos a crear un par de filas que presentan contenido con una imagen y una columna que se mueven en el espacio 3D al desplazarse.

Agregar sección y columna

Primero, agregue una nueva sección regular al diseño.

Luego agregue una nueva fila de dos columnas a la sección.

Configuración de fila

Abra la configuración de la fila y actualice lo siguiente:

• Margen: 200px inferior
• Relleno: 0px arriba, 0px abajo

Luego dale a la fila una sombra de cuadro:

• Sombra de caja: ver captura de pantalla
• Posición vertical de la sombra del cuadro: 40px
• Fuerza de desenfoque de sombra de cuadro: 50px
• Color de sombra: rgba(0,0,0,0.2)

A continuación, como antes, debemos agregar perspectiva a la fila agregando el siguiente CSS al elemento principal:

Esta vez estamos usando «1000px» para que el efecto no sea tan drástico (el objeto aparecerá a 1000px de la pantalla en lugar de solo 500px).

Configuración de la columna 1

Una vez que se haya agregado la perspectiva a la fila, abra la configuración de la columna 1 y actualice lo siguiente:

• Fondo degradado Color izquierdo: rgba(0,13,255,0.53)
• Fondo degradado Color derecho: #000dff
• Dirección del gradiente: 35 grados
• Relleno: 5% a la izquierda, 5% a la derecha

Columna giratoria 1

Una vez que se haya agregado el degradado de fondo a la columna, agregue la siguiente opción de transformación:

• Transformar Rotar Eje X: 30 grados

Efectos de desplazamiento de la columna 1

Esta vez, también vamos a agregar efectos de desplazamiento a la columna.

En la pestaña Movimiento horizontal…

• Habilitar movimiento horizontal: SÍ
• Desplazamiento inicial: 4 (a 0 % de ventana gráfica)
• Desplazamiento medio: 0 (a 40 %-60 % de ventana gráfica)
• Compensación final: -4 (al 100 % de la ventana gráfica)

Agregar imagen a la columna 1

A continuación, agregue un módulo de imagen a la columna 1.

Luego cargue una nueva imagen para el módulo.

Diseño de imagen

Luego actualice la configuración de la imagen de la siguiente manera:

• Alineación de imagen: Centro
• Margen: -20px arriba, -20px abajo
• Sombra de caja: ver captura de pantalla
• Posición horizontal de la sombra del cuadro: -40px
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de cuadro: 40px
• Color de sombra: rgba(0,0,0,0.2)

El margen personalizado hace que la imagen se extienda por encima y por debajo de la columna muy bien. Y la sombra del cuadro crea cierta separación de la columna.

Efectos de desplazamiento de imagen

Ahora agregamos los efectos de desplazamiento a la imagen que complementan los efectos ya agregados a la columna detrás de ella.

En la pestaña Movimiento vertical…

• Habilitar movimiento vertical: SÍ
• Desplazamiento inicial: 4 (a 0 % de ventana gráfica)
• Desplazamiento medio: 0 (a 40 %-60 % de ventana gráfica)
• Compensación final: -4 (al 100 % de la ventana gráfica)

En la pestaña Movimiento horizontal…

• Habilitar movimiento horizontal: SÍ
• Desplazamiento inicial: -4 (a 0 % de ventana gráfica)
• Desplazamiento medio: 0 (a 40 %-60 % de ventana gráfica)
• Desplazamiento final: 4 (al 100 % de la ventana gráfica)

Aquí está el resultado hasta ahora…

Creación del contenido de la columna derecha (opcional)

El siguiente paso es opcional porque no incluye elementos 3D ni efectos de desplazamiento. Sin embargo, completa el diseño del diseño.

En la columna de la derecha, agregaremos un nuevo módulo de texto que formará el contenido simulado para el diseño. Continúe y agregue un nuevo módulo de texto en la columna 2.

Configuración de texto

Actualice la configuración de texto de la siguiente manera:

• Fuente del texto: Poppins
• Texto Color del texto: rgba(0,0,0,0.4)
• Texto Tamaño del texto: 16px
• Altura de línea de texto: 1,9 em
• Margen: 30px inferior

• Encabezado 2 Fuente: Raleway
• Encabezado 2 Peso de fuente: Negrita
• Encabezado 2 Tamaño del texto: 48px
• Encabezado 2 Altura de línea: 1,5 em

Botón

Debajo del módulo de texto, agregue un nuevo módulo de botón.

Diseño de botones

Luego actualice el diseño del botón de la siguiente manera:

• Color del texto del botón: blanco
• Color de fondo del botón: #29cb8b
• Ancho del borde del botón: 0px
• Espaciado entre letras de botones: 2px
• Fuente del botón: Poppins
• Peso de la fuente del botón: semi negrita
• Estilo de fuente del botón: TT

Relleno de columna 2

Una vez que el texto esté diseñado, agregue algo de relleno a la columna actualizando lo siguiente:

• Relleno: 40 px arriba, 40 px abajo, 40 px a la izquierda, 40 px a la derecha

Eso se encarga de nuestra primera fila de contenido destacado. Así es como debería verse.

Los efectos de desplazamiento también están ahí, pero antes de probarlo, agreguemos otra fila de contenido destacado complementario debajo de esta.

Agregando Contenido Destacado Fila 2

Duplicar filas y cambiar columnas

Para crear la siguiente fila de contenido destacado, duplique la fila anterior.

Esto creará un duplicado de la fila y todo el contenido con ella.

Para crear más equilibrio en el diseño, cambie las posiciones de las columnas llevando la columna de la izquierda a la derecha (o viceversa). Puede hacerlo fácilmente en la vista de capas arrastrando la columna superior debajo de la columna inferior.

Actualizar rotación de transformación de la columna 2

Ahora que la imagen 3D y la columna o en el lado derecho, actualice la rotación de transformación para que gire en la dirección opuesta. Para hacer esto, abra la configuración de la columna 2 y actualice lo siguiente:

• Transformar Rotar Eje X: -30 grados

Diseño final

¡Eso es todo! Ahora veamos el diseño final de nuestros elementos de movimiento 3D mientras nos desplazamos hacia abajo en una página en vivo.

Pensamientos finales

Con suerte, este artículo fue útil para mostrarle cómo agregar algunos efectos de desplazamiento de movimiento 3D a su sitio web Divi. Realmente se reduce a tres simples pasos:

1. Agregar perspectiva a la fila
2. Agregar rotación de transformación a la columna
3. Agregar efectos de desplazamiento a los módulos

Después de eso, puede divertirse explorando nuevos diseños ajustando la configuración y los valores en innumerables otras combinaciones.

Espero escuchar de usted en los comentarios.

¡Salud!