En el mundo del diseño web, solemos pensar en las sombras como algo que podemos agregar en Photoshop o como una propiedad de CSS (como box-shadow o text-shadow). Pero con Divi , podemos pensar fuera de la caja (o box-shadow). Con solo unos pocos ajustes en las opciones integradas de filtro y efecto de desplazamiento de Divi, podemos transformar cualquier imagen en una sombra realista.
En este tutorial, le mostraremos cómo crear sombras de imágenes en movimiento al desplazarse en Divi. El truco es encontrar una imagen PNG con una forma única para que, una vez que la imagen se transforme, mantenga la forma y se vea como una sombra realista de la imagen. Una vez que la imagen/sombra esté lista, podemos agregar algunos efectos de desplazamiento para mover la sombra a medida que el usuario se desplaza. Este efecto inusual (pero familiar) agregará un elemento de diseño impresionante que traerá nueva vida a su sitio.
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
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.
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 de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: Diseño del diseño de la sección
En esta primera parte, vamos a diseñar un diseño de sección rápida para complementar el efecto de desplazamiento de la sombra de la imagen en movimiento.
Agregue la fila de dos columnas
Para comenzar, agregue una fila de dos columnas a la sección regular.
Agregar el módulo de texto
En la columna de la izquierda, agregue un nuevo módulo de texto. Esto servirá como nuestro contenido de texto simulado.
Contenido del texto
Luego pegue el siguiente código HTML dentro del contenido del cuerpo:
|
01
02
|
<h2>Our Wedding</h2><p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p> |
Diseño de texto
En la pestaña de diseño, actualice la configuración de la siguiente manera:
- Texto Tamaño del texto: 16px
- Altura de línea de texto: 2em
- Encabezado 2 Fuente: comfortaa
- Título 2 Color del texto: #444235
- Título 2 Tamaño del texto: 60 px (escritorio), 40 px (tableta)
Agregar acento de diseño de imagen
Debajo del módulo de texto, agregaremos una imagen que servirá como acento de diseño para el texto. Vamos a utilizar la imagen de la rama de un árbol del paquete de diseño Holistic Healer. Esta será la misma imagen que usaremos más adelante para nuestras sombras de imágenes en movimiento.
Añadir imagen
Agregue un nuevo módulo de imagen debajo del módulo de texto.
Luego sube la imagen.
Diseño de imagen
En la pestaña de diseño, reduzca la opacidad de la imagen usando la configuración del filtro.
- Opacidad: 20%
Luego, mueva la imagen hacia la izquierda y hacia arriba usando la siguiente opción de transformación:
- Transformar traducir el eje X: -20 %
- Transformar traducir el eje Y: -90 %
Posición de la imagen
Luego dale a la imagen una posición absoluta.
- Posición: Absoluta
Parte 2: Crear las sombras de la imagen en movimiento
Una vez que el contenido simulado en la columna de la izquierda esté terminado, estamos listos para comenzar a crear la imagen y esas sombras de imágenes en movimiento.
Agregar imagen principal
Agregue un nuevo módulo de imagen a la columna de la derecha.
Luego cargue una imagen que tenga al menos 800px de ancho. Dado que vamos a agregar una sombra de imagen en movimiento de la rama de un árbol, tiene sentido usar una imagen de algún lugar afuera.
Luego elimine el margen inferior predeterminado debajo del módulo de la siguiente manera:
- Margen inferior: 0px
Crear sombra de imagen en movimiento 1
Ahora estamos listos para crear la primera sombra de imagen en movimiento. La idea básica es utilizar una imagen en formato de archivo PNG para que no se muestre el fondo transparente de la imagen. Luego, usaremos los efectos de filtro para ajustar el brillo, la opacidad y el desenfoque para transformar la imagen para que parezca una sombra. Debido a que la imagen PNG tiene una forma única, la sombra también mantendrá la misma forma.
Comencemos agregando la misma imagen PNG de una rama del paquete de diseño Holistic Healer .
Aquí lo tienes…
Agregue el módulo de imagen debajo de la imagen en la columna de la derecha.
Luego cargue la imagen en el módulo.
Filtros de imagen
En la pestaña de diseño, actualice los filtros para que la imagen se vea como una sombra.
- Brillo: 0%
- Opacidad: 25%
- Desenfoque: 8px
Posición de la imagen
Luego, asigne a la sombra de la imagen una posición absoluta para que quede sobre la imagen principal de arriba.
Efectos de desplazamiento de imagen
Para mover la sombra de la imagen, actualice los siguientes efectos de desplazamiento.
En la pestaña Movimiento horizontal…
- Habilitar movimiento horizontal: SÍ
- Compensación inicial: 0 (al 0 %)
- Compensación media: -3 (al 50 %)
- Compensación final: -6 (al 100 %)
En la pestaña Escalar hacia arriba y hacia abajo…
- Habilitar escalado hacia arriba y hacia abajo: SÍ
- Escala inicial: 160 % (al 0 %)
- Escala media: 160% (al 50%)
- Escala final: 160% (al 100%)
(NOTA: Esto ampliará la sombra al 160 % y la mantendrá allí durante todo el efecto de desplazamiento. Pero siéntete libre de ajustar los porcentajes de la escala en diferentes puntos).
En la pestaña Rotación…
- Habilitar movimiento horizontal: SÍ
- Rotación inicial: 30° (al 0%)
- Rotación media: 0° (al 50%)
- Rotación final: -30° (al 100%)
Comprobación del resultado hasta ahora
En este punto, podemos ver el resultado hasta el momento agregando el siguiente margen a la sección temporalmente para que podamos desplazarnos hacia abajo en la página en vivo.
- Margen: 70vh arriba, 70vh abajo
Así es como se ve el efecto hasta ahora.
Ocultar el desbordamiento de columna
Para contener la sombra de la imagen dentro de la misma columna de la imagen principal, abra la configuración de la columna 2 y actualice las opciones de desbordamiento de la siguiente manera:
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Ahora mira el resultado.
Crear sombra de imagen en movimiento 2
Una vez que tenemos nuestra primera sombra de imagen en su lugar, es fácil crear otra. Todo lo que tenemos que hacer es duplicar la sombra de la imagen existente y actualizar los efectos de desplazamiento. Las sombras duales de la imagen en movimiento crearán un hermoso efecto revelador en la imagen.
Sombra de imagen existente duplicada
Usando el modal Capas, duplique la imagen de la sombra.
Actualizar efectos de desplazamiento
Luego abra la configuración para el duplicado y actualice los efectos de desplazamiento de la siguiente manera:
En la pestaña Movimiento horizontal…
- Habilitar movimiento horizontal: SÍ
- Compensación inicial: 0 (al 0 %)
- Compensación media: 3 (al 50 %)
- Compensación final: 6 (al 100 %)
En la pestaña Rotación…
- Habilitar movimiento horizontal: SÍ
- Rotación inicial: 210° (al 0%)
- Rotación media: 180° (al 50%)
- Rotación final: 150° (al 100%)
Aquí está el resultado…
Agregar un efecto de acercamiento a la imagen principal
Debido a que el desbordamiento de la columna está oculto, podemos escalar la imagen principal en el desplazamiento para crear un acercamiento sutil (o efecto ken burns) que complementará las sombras de la imagen en movimiento.
Para hacer esto, abra la configuración de la imagen principal y actualice lo siguiente:
En la pestaña Escalar hacia arriba y hacia abajo…
- Habilitar escalado hacia arriba y hacia abajo: SÍ
- Escala inicial: 100 % (al 0 %)
- Escala media: 115% (al 50%)
- Escala final: 130% (al 100%)
Esto creará un efecto de acercamiento a medida que el usuario se desplaza.
Resultado final
Y aquí está el resultado final.
Pensamientos finales
Espero que estas sombras de imágenes en movimiento hayan sido tan divertidas de construir para ti como lo fueron para mí. Es un elemento de diseño simple pero impresionante que tiene el potencial para adiciones aún más creativas. Siéntase libre de explorar agregando diferentes colores, modos de fusión y otros efectos de desplazamiento para personalizar el diseño.
Espero escuchar de usted en los comentarios.
¡Salud!