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 de rotación de transformación 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 obtener efectos de desplazamiento abstractos utilizando la configuración integrada de Divi. Y dado que usaremos las 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 exhibir estos efectos de desplazamiento en una galería (si lo desea).
Empecemos.
Descargue el diseño Transformar múltiples elementos en el desplazamiento 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.
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!
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?
Empezando
Suscríbete a nuestro canal de Youtube
Para este tutorial, necesitará lo siguiente:
- El tema Divi instalado y activo
- Algunas imágenes. Estoy usando imágenes de nuestros diseños prefabricados accesibles desde Divi Builder
Una vez que esté listo, vaya a su panel de WordPress. Luego cree una nueva página (Páginas > Agregar nuevo), 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 de desplazamiento abstractos 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 pasar el mouse. Además de verse genial, 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. Así que podrías usar la imagen como un enlace a la página de tu galería si quisieras.
Aquí está cómo hacerlo.
Primero cree una nueva sección regular con una fila de una columna.
Luego agregue un módulo de imagen a la fila.
A continuación, agregue cargar una imagen al módulo.
Agregar efectos de desplazamiento del módulo de imagen
Ahora podemos agregar algunos efectos de desplazamiento de transformación 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 escala eje X e Y: 110%
Transformar Girar eje Z: 9 grados
Transformar eje X e Y sesgado: 3 grados
¡Eso es todo! 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 fila
Para que este diseño funcione, la fila deberá tener el mismo tamaño que la imagen dentro de ella para 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 mouse sobre un módulo dentro de una fila, se activarán los efectos de desplazamiento de la misma manera que si pasa el mouse sobre la fila. Y, debido a que tenemos un efecto de desplazamiento diferente en el módulo, ambos efectos de desplazamiento se activarán cuando se desplace sobre el módulo. Esto nos permite usar una combinación de efectos de desplazamiento abstractos usando sombra de cuadro, sesgo de transformación y rotación de transformación tanto en la fila como en el módulo.
Ya tenemos nuestros efectos de desplazamiento del módulo 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 ya 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: 400px
Dado que queremos que la altura de nuestra fila coincida con la imagen que contiene, debemos deshacernos del relleno superior e inferior predeterminado:
Relleno personalizado: 0px arriba, 0px abajo
Ahora necesitamos agregar una imagen de fondo a la columna de la fila. Esta imagen de fondo se verá cada vez que el efecto de desplazamiento de la transformación del módulo de imagen se sesgue y gire.
Columna 1 Imagen de fondo: [ingresar imagen]
Continúe actualizando la fila con una sombra de cuadro al pasar el mouse de la siguiente manera:
Sombra de cuadro: vea la captura de pantalla
Posición horizontal de sombra de cuadro: 0px (predeterminado), -30px (suspender)
Posición vertical de sombra de cuadro: 0px (predeterminado), -15px (suspender)
Color de sombra: #002f66
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 y sesgarán la imagen de fondo a la vista.
Finalmente, estamos listos para agregar una propiedad de transformación de sesgo para agregar un efecto de desplazamiento adicional para la fila.
Transformar sesgar eje X e Y: -3deg
Resultado final
Aquí esta el resultado final.
Y también se escalará muy bien en dispositivos móviles.
Efectos de desplazamiento abstractos para una llamada a la acción (ejemplo 1)
Configuración de fila
Cree una nueva sección regular con una fila de una columna.
Luego actualice la configuración de la fila de la siguiente manera:
Color de degradado de fondo izquierdo de la columna 1: rgba(34,43,58,0.71)
Color de degradado de fondo derecho de la columna 1: #222b3a
Imagen de fondo: [insertar imagen]
Ancho máximo: 400px
Relleno personalizado: 0px arriba, 0px abajo
Regresaremos a la configuración de la fila para completar nuestros efectos de desplazamiento abstractos en un momento, pero por ahora, agreguemos nuestro Módulo de llamada a la acción a la fila.
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: Viaje 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
Luego actualice la configuración de diseño para el texto y el espaciado del módulo.
Fuente del título: Gilda Pantalla
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
Ahora agregue un borde al módulo.
Ancho del borde: 2px
Color del borde: #222b3a
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á la misma 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 de desplazamiento abstractos usando sombra de cuadro, sesgo de transformación y rotación de transformación tanto en la fila como en el módulo.
Comencemos con los efectos de desplazamiento de fila.
Efectos de desplazamiento de fila
Primero, podemos agregar una sombra de cuadro al pasar el mouse sobre nuestra fila. Abra la configuración de la fila y actualice lo siguiente:
Sombra de cuadro: vea la captura de pantalla
Posición horizontal de la sombra de cuadro: 0px (predeterminado), 90px (al pasar el mouse)
Posición vertical de la sombra del cuadro: 0px (predeterminado), 80px (al pasar el mouse)
Intensidad de propagación de la sombra del cuadro: 0px (predeterminado), -40px (al pasar el mouse)
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.
Ahora agreguemos una propiedad de transformación de rotación y sesgo al pasar el mouse.
Transformar Rotar eje X (desplazamiento): 10 grados
Transformar Eje X sesgado (desplazamiento): -4 grados
Transformar Eje Y sesgado (desplazamiento): -4 grados
Eso se encarga de los efectos de desplazamiento de fila. Ahora debemos 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:
Sombra de cuadro: vea la captura de pantalla
Posición horizontal de sombra de cuadro: 0px
Posición vertical de sombra de cuadro: 0px (predeterminado), 30px (pasar el mouse)
Color de sombra: #ffffff
Finalmente, agregue una propiedad de transformación de escala, rotación y sesgo al pasar el mouse de la siguiente manera:
Transformar la escala de los ejes X e Y (pasar el mouse): 115%
Transformar Rotar el eje Z (pasar el mouse): 9 grados
Transformar el eje X sesgado (pasar el mouse): 3 grados
Transformar el eje Y sesgado (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 desplace solo sobre el elemento de la fila en lugar del módulo.
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 de módulo se activan al pasar el cursor para sesgar los elementos en un diseño abstracto.
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 desactivar el efecto de desplazamiento en el móvil para evitar que el usuario tenga que tocar dos veces si está utilizando el módulo como enlace.
Efectos de desplazamiento abstractos para una llamada a la acción (ejemplo 2)
Para impulsar 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 hacer algunos ajustes menores al diseño y efectos de desplazamiento para un diseño único.
Actualizar configuración de fila
Primero, actualice la configuración de la fila de la siguiente manera:
Transformar Girar el eje Z: -5 grados
Transformar Sesgar los ejes X e Y: -4 grados
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, elimina el borde…
Ancho del borde: 0px
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 desactivar el efecto de desplazamiento heredado del diseño anterior que duplicó)
Color de la sombra: #ffb238
Ahora podemos actualizar nuestros efectos de desplazamiento de propiedades de transformación. Aquí básicamente estamos disminuyendo un poco la escala y agregando valores negativos a nuestras propiedades anteriores de rotación y transformación sesgada para mover el elemento en la dirección opuesta al pasar el mouse.
Actualice las siguientes opciones de transformación:
Eje X e Y de escala de transformación (desplazamiento): 110 %
Eje Z de rotación de transformación (desplazamiento): -9 grados
Eje X de sesgo de transformación (desplazamiento): -3 grados
Eje Y de sesgo de transformación (desplazamiento): -3 grados
Crear un diseño de cuadrícula para sus filas
Debido a que este diseño requiere que la fila principal se ajuste al módulo y tenga el mismo alto y ancho, en realidad no tiene la capacidad de crear un diseño de columna como lo haría normalmente. Sin embargo, puede usar la propiedad flex 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.
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.
|
01
02
|
display: flex;flex-wrap: wrap; |
Ahora tiene tres columnas de filas que responderán con el tamaño de su navegador.
Pensamientos finales
La transformación de múltiples elementos al pasar el mouse proporciona otro nivel de creatividad que puede explorar. Los ejemplos de este tutorial pretendían mostrarle lo que es posible, pero siéntase libre de modificar los diseños para su 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 escuchar de usted en los comentarios.
¡Salud!