Si está buscando una manera de crear animaciones fluidas con Divi y sus efectos de desplazamiento incorporados, le encantará esta publicación. Le mostraremos cómo combinar el ajuste de desplazamiento con los efectos de movimiento integrados de Divi para crear secciones de altura completa entre las que puede desplazarse de una sola vez. Comenzaremos creando la primera sección. Entonces, reutilizaremos esa sección en todo el diseño de nuestra página. Para habilitar el ajuste de desplazamiento, usaremos las propiedades de ajuste de desplazamiento de CSS que asignaremos a las secciones, HTML, encabezado y pie de página de nuestra página. ¡También podrá descargar el archivo JSON de la página de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño de animaciones suaves GRATIS
Para poner sus manos en el diseño de animaciones suaves y gratuitas, 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!
Suscríbete a nuestro canal de Youtube
1. Crear nueva página y comenzar a diseñar la primera sección
Agregar nueva página y cambiar a Visual Builder
Comience agregando una nueva página. Ingrese el título de la página, publíquela y cambie a Visual Builder.
Ajustes de sección
Dimensionamiento
Una vez dentro de la nueva página, abra la sección que ya está allí y cambie la configuración de tamaño.
- Altura mínima: 100vh
Elemento principal
También estamos agregando dos líneas de código CSS a la sección. Estas líneas de código CSS nos ayudarán a convertir la sección en un punto de ajuste para el ajuste de desplazamiento.
|
01
02
|
scroll-snap-align: start;scroll-snap-stop: normal; |
Visibilidad
Para asegurarnos de que nada supere el contenedor de la sección, ocultaremos los desbordamientos de la sección.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique el tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
También eliminaremos el relleno superior e inferior predeterminado de la sección.
- Relleno superior: 0px
- Relleno inferior: 0px
Posición
Y cambiaremos la posición de la fila en consecuencia:
- Posición: Absoluta
- Ubicación: centro inferior
Agregar módulo de texto a la columna
Dejar el cuadro de contenido vacío
El único módulo que necesitamos en esta fila es un módulo de texto. Asegúrese de dejar el cuadro de contenido del módulo vacío.
Color de fondo
Luego, cambia el color de fondo.
- Color de fondo: #ffee00
Configuración de texto
También eliminaremos la altura de la línea de texto del módulo.
- Altura de línea de texto: 1em
Dimensionamiento
Luego, iremos a la configuración de tamaño y cambiaremos el ancho.
- Ancho: 30%
Espaciado
Convertiremos el módulo en un cuadrado agregando también algo de relleno superior.
- Acolchado superior: 30%
Añadir Fila #2
Estructura de la columna
A la siguiente fila. Utilice la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la configuración de tamaño en la pestaña de diseño:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 60vw
- Ancho máximo: 100%
Espaciado
A continuación, agregue un margen superior personalizado en diferentes tamaños de pantalla.
- Margen superior: 20vh (escritorio), 5vw (tableta y teléfono)
Columna 2 Espaciado
Luego, abriremos la configuración de la columna 2 y agregaremos algunos valores de relleno personalizados.
- Acolchado superior: 2vh (tableta y teléfono)
- Acolchado izquierdo: 2vw
- Acolchado derecho: 2vw
Agregar módulo de imagen a la columna 1
Cargar imagen
Es hora de agregar módulos, agregue un módulo de imagen a la columna 1 y cargue una imagen de su elección.
Dimensionamiento
A continuación, forzaremos el ancho completo en el módulo.
- Forzar ancho completo: Sí
Agregue el Módulo de Texto #1 a la Columna 2
Agregar contenido H2
En la segunda columna, el primer módulo que necesitamos es un módulo de texto con algo de contenido H2.
Configuración de texto H2
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H2 de la siguiente manera:
- Encabezado 2 Fuente: Anton
- Título 2 Tamaño del texto: 5vw (Escritorio), 7vw (Tableta), 9vw (Teléfono)
Agregue el Módulo de Texto #2 a la Columna 2
Agregar contenido
Agregue otro módulo de texto justo debajo del anterior e inserte algún contenido de descripción de su elección.
Configuración de texto
Cambie la configuración de texto del módulo de la siguiente manera:
- Fuente de texto: Open Sans
- Tamaño del texto: 0.8vw (Escritorio), 2vw (Tablet), 2.5vw (Teléfono)
- Altura de la línea de texto: 1,8 em
Espaciado
Y agregue un margen superior e inferior personalizado a la configuración de espaciado.
- Margen superior: 2vw
- Margen inferior: 2vw
Agregar copia
El siguiente y último módulo que necesitamos en esta columna es un módulo de botón. Agregue alguna copia de su elección.
Configuración de botones
Dale estilo al botón en consecuencia:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Color del texto del botón: #333333
- Color del borde del botón: #333333
- Radio del borde del botón: 1px
- Fuente del botón: Anton
- Estilo de fuente del botón: Mayúsculas
Espaciado
Y complete la configuración del módulo agregando algunos valores de relleno personalizados en diferentes tamaños de pantalla.
- Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Relleno izquierdo: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
- Relleno derecho: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
2. Agregue efectos de desplazamiento a diferentes elementos
Módulo de texto en la fila #1
movimiento vertical
Una vez que todos los elementos están en su lugar, es hora de agregar los efectos de desplazamiento . Abra el Módulo de texto en su primera fila y use un poco de movimiento vertical.
- Habilitar movimiento vertical: Sí
- Compensación inicial: 4
- Desplazamiento medio: 0
- Compensación final: -4
- Disparador de efecto de movimiento: medio del elemento
Fila #2
columna 1
movimiento horizontal
Luego, abra la primera columna de su segunda fila y agregue un poco de movimiento horizontal.
- Habilitar movimiento horizontal: Sí
- Compensación inicial: -3
- Compensación media: 0 (del 40 % al 60 %)
- Compensación final: -3
- Disparador de efecto de movimiento: medio del elemento
Desvanecimiento de entrada y salida
También estamos aplicando un efecto de aparición y desaparición gradual a esa misma columna.
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 0%
- Opacidad media: 100%
- Opacidad final: 100%
- Disparador de efecto de movimiento: medio del elemento
columna 2
movimiento horizontal
Luego, abriremos la configuración de la segunda columna y aplicaremos la siguiente configuración de movimiento horizontal:
- Habilitar movimiento horizontal: Sí
- Compensación inicial: 3
- Compensación media: 0 (del 40 % al 60 %)
- Compensación final: 3
- Disparador de efecto de movimiento: medio del elemento
Desvanecimiento de entrada y salida
Junto con un efecto de entrada y salida gradual.
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 0%
- Opacidad media: 100%
- Opacidad final: 100%
- Disparador de efecto de movimiento: medio del elemento
4. Reutilizar la primera sección
Clonar sección cuatro veces
Una vez que hayas completado la primera sección y sus efectos de desplazamiento, puedes clonarlo tantas veces como quieras.
Cambiar los colores de fondo de cada otra sección
Cambiaremos el color de fondo de cada otra sección.
- Color de fondo: #111111
5. Agregue el código CSS para habilitar el ajuste de desplazamiento en el HTML de la página
Agregar módulo de código a la última sección de la página
Ahora, para habilitar el ajuste de desplazamiento en el HTML de nuestra página, agregaremos un módulo de código en cualquier lugar de la última sección de nuestra página.
Insertar código HTML CSS
Estas líneas de código CSS nos ayudarán a aplicar el ajuste de desplazamiento al HTML de nuestra página:
|
01
02
03
04
05
06
07
08
|
<style>html {overflow-x: hidden;scroll-snap-type: y proximity;}</style> |
Nos aseguraremos de que nuestro encabezado y pie de página también sean puntos de ajuste de desplazamiento (al igual que nuestras secciones) agregando las siguientes líneas de código CSS también:
|
01
02
03
|
header, footer {scroll-snap-align: start;} |
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo crear animaciones fluidas combinando el ajuste de desplazamiento con los efectos de movimiento integrados de Divi. Esta es una excelente manera de habilitar los efectos de desplazamiento con un solo desplazamiento. El ajuste de desplazamiento ayuda a los visitantes a desplazarse sin esfuerzo por diferentes partes de su sitio web. Hemos combinado esto con un diseño de sección de altura completa. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.