Cómo transformar varios elementos para efectos abstractos de desplazamiento en Divi


Como ya sabrá, Divi tiene un montón de configuraciones de diseño que le permiten crear efectos de desplazamiento únicos para cualquier elemento Divi (secciones, filas o módulos). Por lo general, un efecto de desplazamiento está aislado en un solo elemento. Por ejemplo, si agrega una propiedad transform rotate a un módulo al pasar el mouse, esa rotación se activará al pasar el mouse sobre el módulo. Sin embargo, si agrega un efecto de desplazamiento adicional a la fila que contiene el módulo, esto agrega otra capa de efectos de desplazamiento al pasar el cursor sobre el módulo. Esto abre la puerta a algunos efectos de desplazamiento abstractos únicos.

En este tutorial, exploraremos cómo transformar múltiples elementos para efectos de desplazamiento abstractos utilizando la configuración incorporada de Divi. Y dado que usaremos filas de manera un poco diferente para este diseño, le mostraré cómo crear un diseño de cuadrícula para sus filas para que pueda mostrar estos efectos de desplazamiento en una galería (si lo desea).

Empecemos.

Vistazo

efectos de desplazamiento abstractos

efectos de desplazamiento abstractos

efectos de desplazamiento abstractos

efectos de desplazamiento abstractos

Descargue GRATIS Transformar varios elementos en el diseño de desplazamiento

Para tener en sus manos 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 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.

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

Vayamos al tutorial, ¿de acuerdo?

Empezando

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

Suscríbete a nuestro canal de Youtube

Para este tutorial, necesitará lo siguiente:

  1. El tema Divi instalado y activo
  2. Algunas imágenes. Estoy usando imágenes de nuestros diseños prediseñados accesibles desde Divi Builder

Una vez que esté listo, vaya a su Panel de WordPress. Luego cree una nueva página (Páginas> Agregar nueva), asigne un título a su página e implemente Divi Builder. Elija la opción "Construir desde cero".

¡Ahora te espera tu lienzo en blanco!

Efectos abstractos de desplazamiento para una imagen

Este primer diseño combinará los efectos de desplazamiento de transformación sesgada en la fila y el módulo de imagen para crear un efecto de abanico en nuestra imagen al desplazar el cursor. Además de verse bien, este efecto también puede servir como una interacción de interfaz de usuario útil que le permite al usuario saber que al hacer clic en la imagen, verá más imágenes. Por lo tanto, podría usar la imagen como un enlace a la página de su galería si lo desea.

He aquí cómo hacerlo.

Primero cree una nueva sección regular con una fila de una columna.

efectos de desplazamiento abstractos

Luego agregue un módulo de imagen a la fila.

efectos de desplazamiento abstractos

A continuación, agregue cargar una imagen al módulo.

efectos de desplazamiento abstractos

Agregar efectos de desplazamiento del módulo de imagen

Ahora podemos agregar algunos efectos de transformación de desplazamiento a la imagen que escalarán, rotarán y sesgarán la imagen. Para hacer esto, vaya a las opciones de transformación y actualice lo siguiente:

Transformar la escala de los ejes X e Y: 110%

efectos de desplazamiento abstractos

Transformar Girar eje Z: 9 grados

efectos de desplazamiento abstractos

Transformar Skew X e Y ejes: 3 grados

efectos de desplazamiento abstractos

¡Eso es! Bastante simple. Ahora necesitamos personalizar la fila para agregar otro efecto de desplazamiento que se activará al pasar el cursor sobre los elementos.

Configuración de filas

Para que este diseño funcione, la fila deberá tener el mismo tamaño que la imagen dentro de ella, de modo que el área de desplazamiento sea la misma para ambos. Esto nos permitirá agregar diferentes efectos de desplazamiento tanto para el módulo como para la fila que se activará al pasar el cursor sobre el módulo (o en este caso la imagen). Esto funciona porque al pasar el cursor sobre un módulo dentro de una fila, se activarán los efectos de desplazamiento de la misma forma que lo haría si se desplazara sobre la fila. Y, debido a que tenemos un efecto de desplazamiento diferente en el módulo, ambos efectos de desplazamiento se activarán al pasar el cursor sobre el módulo. Esto nos permite usar una combinación de efectos abstractos de desplazamiento usando la sombra de cuadro, transformar sesgo y transformar rotar tanto en la fila como en el módulo.

Ya tenemos nuestro módulo de efectos de desplazamiento para nuestra imagen en su lugar, ahora necesitamos ajustar el tamaño de nuestra fila. Según el tamaño de la imagen, el módulo debería abarcar todo el ancho de la fila, por lo que técnicamente no es necesario ajustar el ancho de la fila. Pero para este ejemplo, reduciré la fila para dejar espacio para nuestros efectos de desplazamiento.

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

Ancho máximo: 400 px

Como queremos que la altura de nuestra fila coincida con la imagen dentro de ella, debemos deshacernos del relleno superior e inferior predeterminado:

Relleno personalizado: 0px arriba, 0px abajo

efectos de desplazamiento abstractos

Ahora necesitamos agregar una imagen de fondo a la columna de la fila. Esta imagen de fondo aparecerá a la vista cada vez que el efecto de desplazamiento del módulo de imagen se incline y gire.

Imagen de fondo de la columna 1: (ingresar imagen)

efectos de desplazamiento abstractos

Continúe actualizando la fila con una sombra de cuadro al pasar el mouse de la siguiente manera:

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 0px (predeterminado), -30px (desplazamiento)
Posición vertical de la sombra del cuadro: 0px (predeterminado), -15px (desplazamiento)
Color de sombra: # 002f66

efectos de desplazamiento abstractos

Esta sombra de cuadro agrega el efecto de otra imagen que aparece detrás de la imagen de fondo de la fila que aparecerá una vez que agreguemos nuestros efectos de desplazamiento de transformación que rotarán e inclinarán la imagen de fondo a la vista.

Finalmente, estamos listos para agregar una propiedad de transformación sesgada para agregar un efecto de desplazamiento adicional para la fila.

Transformar Skew X e Y eje: -3deg

efectos de desplazamiento abstractos

Resultado final

Aquí esta el resultado final.

efectos de desplazamiento abstractos

Y también escalará muy bien en dispositivos móviles.

efectos de desplazamiento abstractos

Efectos de desplazamiento abstracto para una llamada a la acción (ejemplo 1)

Configuración de filas

Cree una nueva sección regular con una fila de una columna.

efectos de desplazamiento abstractos

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

Degradado de fondo de la columna 1 Color a la izquierda: rgba (34,43,58,0.71)
Degradado de fondo de la columna 1 Color derecho: # 222b3a
Imagen de fondo: (insertar imagen)
Ancho máximo: 400px
Relleno personalizado: 0px arriba, 0px abajo

efectos de desplazamiento abstractos

Regresaremos a la configuración de la fila para completar nuestros efectos abstractos de desplazamiento en un momento, pero por ahora, agreguemos nuestro módulo de llamada a la acción a la fila.

efectos de desplazamiento abstractos

Configuración del módulo de llamada a la acción

Abra la configuración del Módulo de llamada a la acción y actualice el contenido de la siguiente manera:

Título: Viajar con puntos
Texto del botón: haga clic aquí
Contenido: solo por tiempo limitado
URL del enlace del botón: # (solo para activar el botón por ahora)
Usar color de fondo: NO

efectos de desplazamiento abstractos

Luego, actualice la configuración de diseño para el texto y el espaciado del módulo.

Fuente del título: Gilda Display
Tamaño del texto del botón: 16px
Color del texto del botón: # ffb238
Color de fondo del botón: rgba (0,0,0,0)
Ancho del borde del botón: 0px

Relleno personalizado: 20% superior, 20% inferior

efectos de desplazamiento abstractos

Ahora agregue un borde al módulo.

Ancho del borde: 2px
Color del borde: # 222b3a

efectos de desplazamiento abstractos

Eso se encarga de nuestro diseño predeterminado. Ahora es el momento de la parte divertida. Recuerde, debido a que nuestra fila y módulo son esencialmente del mismo tamaño (alto y ancho), el área de desplazamiento será el mismo para ambos. En otras palabras, los efectos de desplazamiento que agregamos a la fila y al módulo se activarán al pasar el cursor sobre los elementos. Esto nos permite usar una combinación de efectos abstractos de desplazamiento usando la sombra del cuadro, transformar el sesgo y transformar la rotación tanto en la fila como en el módulo.

Comencemos con los efectos de desplazamiento de filas.

Efectos de desplazamiento de fila

Primero, podemos agregar una sombra de cuadro al pasar el mouse a nuestra fila. Abra la configuración de la fila y actualice lo siguiente:

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 0px (predeterminado), 90px (desplazarse)
Posición vertical de la sombra del cuadro: 0px (predeterminado), 80px (desplazamiento)
Fuerza de propagación de la sombra del cuadro: 0 px (predeterminado), -40 px (desplazamiento)

Color de sombra: # ffb238

Tenga en cuenta que la sombra del cuadro también heredará las opciones de transformación que agregaremos a continuación.

efectos de desplazamiento abstractos

Ahora agreguemos una propiedad de transformación de rotación e inclinación al pasar el mouse.

Transformar Girar eje X (flotar): 10 grados
Transformar el eje X sesgado (flotar): -4deg
Transformar el eje Y oblicuo (flotar): -4 grados

efectos de desplazamiento abstractos

Eso se encarga de los efectos de desplazamiento de las filas. Ahora necesitamos agregar el efecto de desplazamiento al módulo de llamada a la acción que completará el diseño.

Efectos de desplazamiento del módulo de llamada a la acción

Abra la configuración del módulo de llamada a la acción y dele un efecto de desplazamiento de sombra de cuadro de la siguiente manera:

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 0px
Posición vertical de la sombra del cuadro: 0 px (predeterminado), 30 px (desplazamiento)
Color de sombra: #ffffff

efectos de desplazamiento abstractos

Finalmente, agregue una propiedad de transformación de escala, rotación e inclinación al pasar el mouse de la siguiente manera:
Transformar la escala del eje X e Y (flotar): 115%
Transformar Girar eje Z (flotar): 9 grados
Transformar el eje X sesgado (flotar): 3 grados
Transformar el eje Y oblicuo (flotar): 3 grados

Aumentar el tamaño del módulo usando la escala al pasar el mouse ayudará a minimizar la posibilidad de que el usuario se mueva solo sobre el elemento de la fila en lugar del módulo.

efectos de desplazamiento abstractos

Resultado final

Aquí está el resultado final del efecto de desplazamiento abstracto. Observe cómo tanto los efectos de desplazamiento de fila como los efectos de desplazamiento del módulo se activan al desplazarse para inclinar los elementos hacia un diseño abstracto.

efectos de desplazamiento abstractos

Así es como se verá el efecto de desplazamiento en el móvil. Sin embargo, dado que la mayoría de los navegadores móviles requieren un toque para activar el efecto de desplazamiento, es posible que desee deshabilitar el efecto de desplazamiento en el dispositivo móvil para evitar que el usuario tenga que tocar dos veces si está utilizando el módulo como enlace.

efectos de desplazamiento abstractos

Efectos de desplazamiento abstracto para una llamada a la acción (ejemplo 2)

Para poner en marcha el diseño de este próximo efecto de desplazamiento abstracto, dupliquemos la sección que contiene nuestro primer ejemplo. Ahora todo lo que tenemos que hacer es realizar algunos ajustes menores en el diseño y los efectos de desplazamiento para obtener un diseño único.

Actualizar configuración de fila

Primero, actualice la configuración de la fila de la siguiente manera:

Transformar Girar eje Z: -5deg
Transformar Skew X e Y eje: -4deg

efectos de desplazamiento abstractos

Actualizar la configuración del módulo de llamada a la acción

Ahora modifiquemos la configuración del módulo de la siguiente manera:

Primero, saca el borde …

Ancho del borde: 0px

efectos de desplazamiento abstractos

Luego actualice la sombra del cuadro de la siguiente manera:

Posición horizontal de la sombra del cuadro: 0px
Posición vertical de la sombra del cuadro: 110px
(asegúrese de deshabilitar el efecto de desplazamiento heredado del diseño anterior que duplicó)
Color de sombra: # ffb238

efectos de desplazamiento abstractos

Ahora podemos actualizar nuestros efectos de desplazamiento de propiedad de transformación. Aquí básicamente estamos disminuyendo un poco la escala y agregando valores negativos a nuestras propiedades anteriores de transformación de rotación e inclinación para mover el elemento en la dirección opuesta al pasar el mouse.

Actualice las siguientes opciones de transformación:

Transformar la escala del eje X e Y (desplazamiento): 110%
Transformar Girar eje Z (flotar): -9deg
Transformar el eje X sesgado (flotar): -3 grados
Transformar el eje Y oblicuo (flotar): -3deg

efectos de desplazamiento abstractos

Crear un diseño de cuadrícula para sus filas

Debido a que este diseño requiere que la fila principal se envuelva alrededor del módulo y tenga la misma altura y ancho, realmente no tiene la capacidad de crear un diseño de columna como lo haría normalmente.Sin embargo, puede usar la propiedad flexible para alinear sus filas. horizontalmente en un diseño de cuadrícula.

Para hacer esto, primero duplique la fila que contiene su módulo un par de veces para que tenga tres filas en una sección.

efectos de desplazamiento abstractos

Luego agregue un margen personalizado a cada una de las filas:

Margen personalizado: 50 px arriba, 50 px abajo

Luego abra la configuración de la sección y simplemente agregue el siguiente CSS personalizado al elemento principal.

display: flex;
flex-wrap: wrap;

efectos de desplazamiento abstractos

Ahora tiene tres columnas de filas que responderán con el tamaño de su navegador.

efectos de desplazamiento abstractos

efectos de desplazamiento abstractos

efectos de desplazamiento abstractos

Pensamientos finales

La transformación de varios elementos al pasar el mouse proporciona otro nivel de creatividad que puede explorar. Los ejemplos de este tutorial estaban destinados a mostrarte lo que es posible, pero siéntete libre de modificar los diseños para tu propio proyecto. Como era de esperar, puede volverse bastante loco si lo desea. Pero también puede ser un poco más conservador para crear un elemento de diseño de interacción sutil como el ejemplo del módulo de imagen en este tutorial.

Espero tener noticias tuyas en los comentarios.

¡Salud!