Crear efectos de desplazamiento de divisor de sección es una técnica simple y divertida que puede agregar vida a su sitio web Divi . Un separador de secciones continúa siendo un elemento de diseño versátil, útil para agregar un toque de creatividad a las transiciones de contenido de su página. ¡Pero con los efectos de desplazamiento de Divi , los divisores de sección se vuelven aún más interesantes! El truco consiste en aislar una sección dedicada al estilo divisor de elección. Luego puede agregar todo tipo de movimiento generado por desplazamiento a la sección para crear hermosos efectos de desplazamiento como fondo para el contenido de la página.
¡Empecemos!
Aquí hay un vistazo a los diseños que construiremos hoy.
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 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.
Cómo crear divisores de sección animados en Scroll con Divi
Crear las dos secciones de contenido
Añadir fila
Para comenzar, cree una fila de una columna dentro de la sección predeterminada.
Margen de sección (para pruebas)
Para fines de prueba, agregue un margen superior a la sección para que podamos tener espacio para desplazarnos. Abra la configuración de la sección y agregue lo siguiente:
- Margen superior: 80vh
Agregar módulo de texto
Dentro de la fila de una columna, agregue un nuevo módulo de texto.
Contenido del módulo de texto
Dentro del contenido del cuerpo, agregue el siguiente encabezado H2:
|
01
|
<h2>Moving Section Dividers</h2> |
Diseño de módulos de texto
En la configuración de diseño, actualice lo siguiente:
- Fuente del texto: Roboto
- Alineación de texto: Centro
- Título 2 Color del texto: #bae0d8
- Título 2 Tamaño del texto: 80 px (escritorio), 50 px (tableta), 30 px (teléfono)
Añadir una segunda sección de contenido
En la sección anterior, agregue una nueva sección regular.
Añadir fila
Dentro de la nueva sección, agregue una fila de una columna.
Agregar módulo de texto
Luego agregue un nuevo módulo de texto a la fila.
Diseño de módulos de texto
Podemos mantener el contenido de relleno predeterminado dentro del cuerpo por ahora. Vayamos a la pestaña de diseño y actualicemos lo siguiente:
- Fuente del texto: Roboto
- Texto Color del texto: #dddddd
- Texto Tamaño del texto: 16px
- Altura de línea de texto: 1,5 em
- Alineación de texto: Izquierda
- Ancho máximo: 400px
- Alineación del módulo: Centro
Ajustes de sección
Asegúrate de quitar el color de fondo predeterminado de la sección pero dándole un fondo completamente transparente. Luego, podemos quitar el relleno superior y agregar un margen inferior para fines de prueba de desplazamiento.
Para hacer esto, abra la sección de configuración y actualice lo siguiente:
- Color de fondo: rgba(0,0,0,0)
- Margen inferior: 80vh
- Relleno: 0px
Crear el divisor de sección animado
Una vez que se completan dos secciones de contenido, estamos listos para agregar la sección para nuestros divisores de sección animados.
Agregar nueva sección
Continúe y cree una nueva sección regular en medio de las dos secciones de contenido.
Fondo de la sección
Y de nuevo, quita el color de fondo por defecto de la sección pero actualizando lo siguiente:
- Color de fondo: rgba(0,0,0,0)
Diseño de divisor de sección
No se preocupe, vamos a crear nuestro color de fondo con los separadores de sección. Para hacer esto, haga clic en la pestaña de diseño y agregue un divisor superior e inferior a la sección de la siguiente manera:
Diseño de divisor superior
- Estilo de divisor superior: ver captura de pantalla
- Color del divisor superior: #524fbf
- Altura del divisor superior: 20vw
- Repetición horizontal del divisor superior: 0.6x
- Tapa del divisor superior: horizontal
Diseño de divisor inferior
- Estilo de divisor inferior: ver captura de pantalla
- Color del divisor inferior: #524fbf
- Altura del divisor inferior: 20vw
- Repetición horizontal del divisor inferior: 0.5x
- Voltear el divisor inferior: horizontal y vertical
Altura de sección y relleno
Dado que esta sección es puramente para el diseño del divisor, podemos deshacernos de la altura y el relleno para que solo se muestre el estilo del divisor y no quede espacio innecesario entre las dos secciones de contenido. Actualice lo siguiente:
- Altura: 0px
- Relleno: 0px arriba, 0px abajo
Efectos de desplazamiento del divisor de sección
Luego dale a la sección los siguientes efectos de desplazamiento:
En la pestaña Movimiento horizontal …
- Habilitar movimiento horizontal: SÍ
Podemos mantener la configuración predeterminada para este en la vista de escritorio .
Luego actualice la configuración de movimiento horizontal en la tableta :
- Compensación inicial: 3 (a 0 % de ventana gráfica)
- Desplazamiento medio: 0 (al 50 % de la ventana gráfica)
- Compensación final: -3 (al 100 % de la ventana gráfica)
En la pestaña Efecto de aumento y reducción de escala , actualice lo siguiente en el escritorio …
- Escala inicial: 200 % (a 0 % de ventana gráfica)
- Escala media: 150 % (a 45 %-65 % de ventana gráfica)
- Escala final: 150 % (al 100 % de la ventana gráfica)
Luego actualice el efecto de aumento y reducción de escala en la tableta de la siguiente manera:
- Escala inicial: 400 % (a 0 % de ventana gráfica)
- Escala media: 300 % (a 45 %-65 % de ventana gráfica)
- Escala final: 400 % (al 100 % de la ventana gráfica)
La razón principal por la que necesitamos ajustar los efectos de movimiento en la tableta (y el teléfono) se debe a los valores de movimiento horizontal que usan unidades de longitud de píxeles (es decir, 3 = 300 px), que son absolutos y no se ajustan al ancho del navegador.
Ahora veamos el resultado final de nuestro divisor de sección animado en el desplazamiento.
Crear nuevos estilos de divisores con facilidad
Con esta sencilla plantilla, podemos explorar nuevos estilos de divisores de sección con facilidad. Para actualizar el estilo del divisor de secciones, implemente el cuadro de capas haciendo clic en el icono de capas en el menú Configuración de Divi Builder. Luego haga clic para abrir la configuración de la sección central que contiene los estilos divisores.
Luego dale al divisor un nuevo estilo de divisor superior:
Y luego dale al divisor un nuevo estilo de divisor inferior:
Y así, tienes un nuevo diseño de divisor de sección animado:
Creación de múltiples capas de divisores de sección animados
Dado que la sección utilizada para el diseño del divisor no tiene altura, se puede duplicar fácilmente para crear diseños de divisores de secciones animados superpuestos. Esto abre la puerta a diseños mucho más creativos.
Aquí está cómo hacerlo.
Actualizar el estilo del divisor para el divisor de sección 1
Primero, abra la configuración de la sección para la sección central nuevamente y actualice el estilo del divisor superior e inferior con lo siguiente (vea las capturas de pantalla):
Crear el divisor de sección 2 (la segunda capa)
Luego use el cuadro de capas para duplicar esa sección central para crear otro diseño de divisor de sección (idéntico). Debido a que ambas secciones tienen una altura de 0px, se colocarán una encima de la otra.
Color del divisor de sección
Luego abra la nueva sección duplicada y actualice lo siguiente:
- Color del divisor superior: #08e1c0
- Color del divisor inferior: #08e1c0
Efectos de desplazamiento del divisor de sección
Luego actualice el efecto de desplazamiento de movimiento horizontal de la siguiente manera:
Para escritorio…
- Compensación inicial: 6 (a 0 % de ventana gráfica)
- Desplazamiento medio: 0 (al 50 % de la ventana gráfica)
- Compensación final: -3 (al 100 % de la ventana gráfica)
Para tableta…
- Compensación inicial: 3 (a 0 % de ventana gráfica)
- Desplazamiento medio: 0 (al 50 % de la ventana gráfica)
- Compensación final: -3 (al 100 % de la ventana gráfica)
Crear el divisor de sección 3 (la tercera capa)
Para crear la tercera capa de nuestro diseño de divisor de sección animado, duplique la sección anterior.
Separador de secciones 3 colores
Abra la sección duplicada y actualice los siguientes estilos de divisores:
- Color del divisor superior: #9191ff
- Color del divisor inferior: #9191ff
Separador de sección 3 Efectos de desplazamiento
Luego actualice el efecto de desplazamiento de movimiento horizontal de la siguiente manera:
- Compensación inicial: 3 (a 0 % de ventana gráfica)
- Desplazamiento medio: 0 (al 50 % de la ventana gráfica)
- Compensación final: -2 (al 100 % de la ventana gráfica)
Básicamente, estamos haciendo pequeños ajustes en los desplazamientos del efecto de desplazamiento de cada capa para crear un movimiento más esporádico en el fondo del contenido.
Sección Divisor Z Índice
Ahora que tenemos nuestras tres capas completas, podemos elegir qué divisor queremos mostrar en la parte superior actualizando el índice z para esa sección. En este ejemplo, actualicemos el divisor de la primera sección con un gran índice z de la siguiente manera:
- Índice Z: 1
Ocultar desbordamiento
Como paso final, debemos asegurarnos de que nuestras secciones de escala no se desborden fuera del contenedor de la página. Para asegurarse de que esto no suceda, abra la configuración de la página y agregue el siguiente CSS personalizado:
|
01
|
.et_builder_inner_content {overflow: hidden;} |
Resultado final
Aquí está el diseño estático final.
Y aquí está el diseño a medida que el usuario se desplaza hacia abajo en la página. ¡Observe los hermosos colores en movimiento!
Pensamientos finales
Animar los separadores de sección en el desplazamiento es una forma divertida y efectiva de darle más vida a una página web. Con suerte, esto le dará un poco de inspiración para generar diseños aún más creativos por su cuenta.
Espero escuchar de usted en los comentarios.
¡Salud!