La combinación de efectos de desplazamiento con imágenes de fondo de paralaje puede crear un diseño bastante mágico para sus visitantes. Dado que el efecto de paralaje ya pone la imagen en movimiento a medida que el usuario se desplaza hacia abajo en la página, agregar efectos de desplazamiento adicionales (como movimiento horizontal y rotación) realmente puede diferenciar el diseño y abrir puertas para diseños más creativos.
En este tutorial, veremos cómo animar imágenes de fondo de paralaje usando Divi y sus efectos de desplazamiento. Usaremos la misma imagen de fondo en varios módulos de texto para diseñar un diseño único para mostrar un bloque corto de texto.
Empecemos.
Descargue el diseño de imagen de fondo de Parallax animado GRATIS
Para poner sus manos en el diseño 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?
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.
Crear las imágenes de fondo animadas de Parallax con los efectos de desplazamiento de Divi
Agregar la columna
Para comenzar, cree una fila de una columna.
Creación del módulo de texto
Luego agregue un módulo de texto a la columna.
Contenido del texto
Agregue la letra «p» al contenido del cuerpo.
Agregar imagen de fondo de paralaje al módulo de texto
A continuación, agregue una imagen de fondo de paralaje al módulo de texto de la siguiente manera:
- Imagen de fondo: insertar imagen
- Usar efecto de paralaje: SÍ
- Método de paralaje: CSS
Diseñando el Texto
En la pestaña de diseño, actualice lo siguiente:
- Fuente del texto: Montserrat
- Estilo de fuente de texto: TT
- Texto Color del texto: #ffffff
- Texto Tamaño del texto: 100 px (escritorio), 70 px (teléfono)
- Espaciado entre letras de texto: 5px (teléfono)
- Altura de línea de texto: 1em
- Alineación de texto: centro
- Relleno: 250 px arriba, 250 px abajo
El relleno es lo que crea la altura necesaria para exponer la imagen de fondo de paralaje.
Configuración de fila
Ahora que nuestro módulo de texto está listo, abra la configuración de la fila y actualice lo siguiente:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 100%
Configuración de la columna 1
Luego haga clic para abrir la configuración de la columna.
En la pestaña Avanzado, actualice los siguientes efectos de desplazamiento:
En la pestaña Efectos de movimiento horizontal…
- Habilitar horizontal: SÍ
- Desplazamiento inicial: -2 (a 0 % de ventana gráfica)
- Compensación media: 0 (al 40 %-60 %)
- Compensación final: -2 (al 100 %)
En la pestaña Efectos giratorios…
- Habilitar rotación: SÍ
- Rotación inicial: 20 grados (a 0 % de ventana gráfica)
- Rotación media: 0 grados (al 40% -60%)
- Rotación final: -20 grados (al 100%)
Creando la Columna 2
Aunque comenzamos con un diseño de una columna, vamos a crear un total de 5 columnas. Simplemente es más fácil duplicar la columna con todo su contenido y configuración para crear los siguientes cuatro necesarios para el diseño.
Duplique toda la primera columna (con el módulo de texto) para crear la segunda columna.
Actualización de los efectos de desplazamiento de la columna 2
Luego actualice los efectos de desplazamiento para la columna 2 de la siguiente manera:
En la pestaña Efectos giratorios…
- Rotación inicial: -20 grados
- Rotación final: 20 grados
Creando la Columna 3
Para crear la Columna 3, duplique la columna 2.
Actualización de los efectos de desplazamiento de la columna 3
Luego actualice la configuración de la columna 3 de la siguiente manera:
En la pestaña Efectos de movimiento horizontal…
- Habilitar movimiento horizontal: NO
En la pestaña Efecto giratorio…
- Rotación inicial: 20 grados
- Rotación final: 10 grados
Creando la Columna 4
Para crear la columna 4, duplique la columna 2 y luego arrástrela hacia abajo.
Actualización de los efectos de desplazamiento de la columna 4
Luego abra la configuración para la columna 4 y actualice lo siguiente:
En la pestaña Efectos de movimiento horizontal…
- Compensación inicial: 2
- Compensación final: 2
En la pestaña Efectos giratorios…
- Rotación inicial: -15 grados
- Rotación final: 20 grados
Creando la Columna 5
Finalmente, para crear la columna 5, duplique la columna 4.
Actualización de los efectos de desplazamiento de la columna 5
Luego actualice la configuración de la columna 5 de la siguiente manera:
En la pestaña Efectos giratorios…
- Rotación inicial: 15 grados
- Rotación final: -15 grados
Actualización de las letras del módulo de texto
A continuación, use la opción de texto en línea para cambiar las letras en cada columna para que en conjunto deletreen la palabra «poder».
Actualización del diseño del módulo de texto central
Abra la configuración del módulo de texto en la columna 3 y actualice lo siguiente:
- Fuente del texto: Montserrat Subrayada
- Texto Color del texto: #e0e722
- Texto Tamaño del texto: 150px (escritorio)
- Altura de línea de texto: 100 px
Actualizar el contenido del primer módulo de texto para dispositivos móviles
Para mostrar un solo módulo de texto en el móvil, necesitamos actualizar el módulo de texto en la columna 1 con el siguiente contenido en la pantalla de la tableta y el teléfono:
Contenido del cuerpo en la tableta y el teléfono:
|
01
|
<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p> |
Actualizar la configuración de la columna 1
A continuación, abra la configuración de la columna 1 y actualice lo siguiente:
- Esquinas redondeadas (escritorio): 100% arriba a la izquierda
- Esquinas redondeadas (tableta y teléfono): 40 % arriba a la izquierda, 40 % abajo a la derecha
En la pestaña avanzada, agregue el siguiente CSS personalizado a la pantalla de la tableta del elemento principal:
|
01
|
width: 100% !important; |
Esto asegurará que la columna abarque todo el ancho de la fila en la pantalla de la tableta y el teléfono.
Ocultar el resto de las columnas en la pantalla de la tableta y el teléfono
Ahora que la columna 1 ocupará todo el ancho de la fila en la tableta y el teléfono, podemos ocultar/deshabilitar el resto de las columnas en la tableta y el teléfono. Para hacer esto, abra la configuración de las columnas 2-5 y deshabilite la visibilidad de cada una de las columnas en el teléfono y la tableta.
Actualizar la configuración de la columna 5
Luego abra la configuración de la columna 5 y agregue una esquina redondeada complementaria de la siguiente manera:
- Esquinas redondeadas (escritorio): 100 % abajo a la derecha
Agregar diseño de fondo a la sección
Para finalizar el diseño, actualice la configuración de la sección con un diseño de fondo de la siguiente manera:
- Color de fondo: #e0e722
- Estilo de divisor superior: ver captura de pantalla
- Color del divisor superior: #222222
- Altura del divisor superior: 650 px (escritorio), 500 px (tableta y teléfono)
- Estilo de divisor inferior: Ver captura de pantalla
- Color del divisor inferior: #222222
- Altura del divisor inferior: 500 px (escritorio), 400 px (tableta y teléfono)
Resultado final
Hre es el diseño final en el escritorio.
Y aquí está el diseño alternativo en la pantalla de la tableta y el teléfono.
Pensamientos finales
Las imágenes de fondo de paralaje se combinan con efectos de desplazamiento de formas realmente mágicas. El único inconveniente de usar imágenes de fondo de paralaje es la falta de soporte para dispositivos móviles, pero con la configuración receptiva que proporciona Divi, podemos crear fácilmente una alternativa. Espero que este elegante diseño agregue algo de inspiración a tu día.
Espero escuchar de usted en los comentarios.
¡Salud!