La creación de efectos de desplazamiento con el divisor de secciones es una técnica sencilla y divertida que puede añadir vida a su Sitio web utilizando el tema de WordPress Divi. Un divisor de sección sigue siendo un elemento de diseño versátil, útil para agregar un toque de creatividad a sus transiciones de contenido de 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 de divisor elegido. Luego, puedes agregar todo tipo de movimientos generados por desplazamiento a la sección para crear hermosos efectos de desplazamiento como fondo para la sección. contenido página.
¡Empecemos!
Posible resultado
Aquí hay una descripción general de los diseños que podremos lograr después de completar este tutorial.
Cómo crear divisores animados de secciones de desplazamiento con Divi
Creación de las dos secciones de contenido.
Agregar una fila
Para comenzar, cree una fila con una columna en 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 desplazarse. Abra la configuración de la sección y agregue lo siguiente:
- Margen superior: 80vh
Añadir un módulo de texto.
En la fila de una columna, agregue un nuevo módulo de texto.
Contenido del módulo de texto.
Dentro de contenido del cuerpo, agregue el siguiente encabezado H2:
<h2>Section Avec Séparateurs</h2>
Diseño del módulo de texto
En la configuración de diseño, actualice lo siguiente:
- Fuente de texto: Roboto
- Alineación del texto: centro.
- Elemento 2 Color del texto: # bae0d8
- Encabezado 2 Tamaño del texto: 80 px (escritorio), 50 px (tableta), 30 px (teléfono)
Agregar una segunda sección de contenido
En la sección anterior, agregue una nueva sección regular.
Agregar una fila
En la nueva sección, agregue una fila a una columna.
Añadir un módulo de texto.
Luego agregue un nuevo módulo de texto a la línea.
Diseño del módulo de texto
Podemos mantener el contenido de relleno predeterminado dentro del cuerpo por ahora. Pasemos a la pestaña de diseño y actualicemos lo siguiente:
- Fuente de texto: Roboto
- Color del texto del texto: #dddddd
- Tamaño del texto: 16px
- Altura de la línea de texto: 1,5 em
- Alineación de texto: izquierda
- Ancho máximo: 400 px
- Alineación del módulo: centro
Configuraciones de sección
Asegúrate de eliminar el color de fondo predeterminado de la sección, pero dale un fondo completamente transparente. Luego, podemos eliminar el relleno superior y agregar un margen inferior para fines de prueba de desplazamiento.
Para hacer esto, abra la configuración de la sección y actualice lo siguiente:
- Color de fondo: rgba (0,0,0,0)
- Margen inferior: 80vh
- Relleno: 0px
Creación del separador 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.
Añadir una nueva sección
Continúe y cree una nueva sección regular en el medio de las dos secciones de contenido.
Contexto de la sección.
Y nuevamente, elimine el color de fondo predeterminado 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, crearemos nuestro color de fondo con los divisores 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 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
- Volteo del divisor superior: horizontal
Diseño divisor inferior
- Estilo de divisor inferior: ver captura de pantalla
- Color del separador inferior: # 524fbf
- Altura del divisor inferior: 20vw
- Repetición horizontal del divisor inferior: 0,5x
- Inclinación del divisor inferior: horizontal y vertical.
Altura de sección y acolchado
Dado que esta sección es puramente para el diseño de divisores, podemos deshacernos de la altura y el relleno para que solo se muestre el estilo del divisor y no haya espacio innecesario entre las dos secciones de contenido. Actualice lo siguiente:
- Altura: 0px
- Relleno: 0px alto, 0px bajo
Efectos de desplazamiento del separador de sección
Luego dele a la sección los siguientes efectos de desplazamiento:
Bajo la pestaña Movimiento horizontal ...
- Activar movimiento horizontal: SÍ
Podemos mantener la configuración predeterminada para este en la vista del despacho .
Luego actualice los parámetros de movimiento horizontal en el tablet :
- Inicio de desplazamiento: 3 (al 0% de la ventana)
- Desplazamiento medio: 0 (al 50% de la ventana gráfica)
- Desplazamiento final: -3 (al 100% de la ventana gráfica)
En la pestaña Efecto de escala hacia arriba y hacia abajo , actualice lo siguiente en el despacho ...
- Escala inicial: 200% (al 0% de la ventana)
- Escala promedio: 150% (al 45% -65% de la ventana gráfica)
- Escala final: 150% (al 100% de la ventana gráfica)
Luego actualice el efecto Scaling Up and Down en el tablet como sigue:
- Escala inicial: 400% (al 0% de la ventana)
- Escala promedio: 300% (al 45% -65% de la 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 utilizan unidades de longitud de píxeles (es decir, 3 = 300 píxeles), que son absoluto y no se ajusta al ancho del navegador.
Ahora veamos el resultado final de nuestro divisor de sección animado de desplazamiento.
Consideraciones finales
Animar divisores de sección en el pergamino es una forma divertida y efectiva de darle vida a una página web. Espero que esto te sirva de inspiración para generar diseños aún más creativos.
