homefinance blog
Crear los efectos de contaminación de los divisores de secciones es una técnica simple y divertida que puede dar vida a su sitio web Div. Un separador de sección continúa siendo un elemento de diseño versátil, útil para agregar una nota de creatividad a las transiciones de contenido de la página. ¡Pero con los efectos de desplazamiento de Divi, los divisores de las secciones se vuelven aún más interesantes! El truco es aislar una sección dedicada al estilo divisor de elección. Luego puede agregar todo tipo de movimientos generados por la sección para crear hermosos efectos de rendimiento para el contenido de la página.
¡Vamos a empezar! Eche un vistazo a los proyectos que construiremos hoy. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en Divi Builder.
Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Cómo crear secciones animadas en el desplazamiento con la creación de las dos secciones de contenido se suma al principio, cree una fila con una columna en la sección predeterminada.
El margen de la sección (para pruebas) para fines de prueba, agregue un borde superior a la sección para que podamos tener lugar para desplazarse. Abra la configuración de la sección y agregue lo siguiente:
Margen superior: 80VH
Agregue un módulo de texto dentro de la fila con una columna, agregue un nuevo módulo de texto.
El contenido del módulo de texto dentro del contenido del cuerpo, agregue el siguiente título H2:
MOVIMIENTO DIVIDERES DE SECCIÓN
Módulo de texto de diseño en la configuración de diseño, actualice lo siguiente:
Texto de fuente: Roboto
Alineación de texto: Centro
Rúbrica 2 Color de texto: # BAE0D8
Título 2 Dimensión de texto: 80 PX (escritorio), 50 px (tableta), 30 px (teléfono)
Agregue la segunda sección de contenido debajo de la sección anterior, agregue una nueva sección habitual.
Agregue la fila a la nueva sección, agregue una fila con una columna.
Agregue un módulo de texto y luego agregue un nuevo módulo de texto en una fila. Proyecte el módulo de texto por el momento, podemos mantener el contenido de llenado implícitamente dentro del cuerpo. Pasemos a la pestaña de diseño y actualicemos lo siguiente:
Texto de fuente: Roboto
Color de texto de texto: #dddddd
Tamaño de texto de texto: 16 PX
La altura de la línea de texto: 1.5em
Alineación de texto: izquierda
Ancho máximo: 400 PX
Alineación del módulo: centro
Configuración de la sección Asegúrese de eliminar la sección predeterminada de la sección, pero dándole un fondo completamente transparente. Luego podemos eliminar el revestimiento superior y agregar un margen más bajo con el propósito de las pruebas.
Para esto, abra la configuración de la sección y actualice lo siguiente:
Color de fondo: RGBA (0.0,0,0)
Margen hacia abajo: 80 VH
Forro: 0 px
Creando el divisor de la sección animada Una vez que se completan dos secciones de contenido, estamos listos para agregar la sección para nuestras secciones animadas. Agregue una nueva sección Continuar y crear una nueva sección habitual en el medio de las dos secciones de contenido.
La sección de la sección y nuevamente, elimine el color de fondo predeterminado de la sección, pero actualice lo siguiente:
Color de fondo: RGBA (0.0,0,0)
Diseño del divisor de sección No se preocupe, crearemos el color de fondo con los separadores de secciones. Para hacer esto, haga clic en la pestaña de diseño y agregue un separador superior e inferior a la sección, de la siguiente manera:
Diseño de divisor superior
El estilo del divisor superior: ver la captura de pantalla
Mayor color divisor: # 524FBF
Altura alta del separador: 20 VW
Reparación horizontal del separador superior: 0.6x
Flip Divisor superior: horizontaldesign del divisor inferior
Estilo del divisor inferior: ver captura de pantalla
Color del divisor inferior: # 524FBF
Altura del divisor inferior: 20 VW
Repetición horizontal del compartimento inferior: 0.5x
Flip divisor inferior: horizontal y vertical
La altura de la sección y el revestimiento porque esta sección está destinada exclusivamente al diseño del divisor, podemos deshacernos de la altura y el revestimiento para que solo se muestre el estilo del divisor y no hay espacio inútil entre las dos secciones de contenido. Actualizar lo siguiente:
Altura: 0px
Forro: 0 px arriba, 0 px abajo
Efectos del despliegue de la sección Divisor y luego dan a la sección los siguientes efectos: En la pestaña Movimiento Horizontal …
Active el movimiento horizontal: sí
Podemos mantener la configuración predeterminada para esto en la pantalla de escritorio.
Luego actualice la configuración de movimiento horizontal en la tableta:
Comenzando el desplazamiento: 3 (al 0% de vista)
GAP promedio: 0 (a 50% de visualización
Compensación final: -3 (100% de visualización)
Bajo el efecto de escalada hacia arriba y hacia abajo, actualice lo siguiente en el escritorio …
Escala inicial: 200% (al 0% de vista)
Escala promedio: 150% (a 45% -65% de vista
Escala de conclusión: 150% (con una vista al 100%)
Luego actualice el efecto de escala hacia arriba y hacia abajo en la tableta de la siguiente manera:
Escala inicial: 400% (al 0% de vista)
Escala promedio: 300% (a 45% -65% Vista
Escala de conclusión: 400% (con una vista al 100%)
La razón principal por la que debemos ajustar los efectos de movimiento en la tableta (y el teléfono) se debe a los valores de movimiento horizontal utilizando unidades de longitud de píxeles (es decir, 3 = 300px), que son absolutas y no se adaptarán al ancho del navegador. Ahora, verifiquemos el resultado final de nuestro divisor de secciones animadas en el pergamino. Creando nuevos estilos de división fácilmente con esta plantilla simple, podemos explorar fácilmente nuevos estilos de división de secciones. Para actualizar el estilo del divisor de sección, implementa el cuadro de capa 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 de separación. Luego le dé al divisor un nuevo estilo del divisor superior:
Y luego dale al divisor un nuevo estilo del divisor inferior:
Y así, tienes un nuevo diseño de divisor de sección animada:
Creación de varias capas de secciones animadas porque la sección utilizada para diseñar el separador no tiene altura, se puede duplicar fácilmente para crear modelos de secciones animadas superpuestas. Esto abre la puerta para modelos mucho más creativos. Aquí le mostramos cómo hacerlo. Actualice el estilo del divisor para el divisor de la Sección 1 Primero, abra la configuración de la sección para la sección central y actualice el estilo de divisor superior e inferior con lo siguiente (consulte las capturas de pantalla):
Cree la sección División 2 (segunda capa) y luego use el cuadro de capa para duplicar esa sección central para crear otro divisor de sección (idéntico). Debido a que ambas secciones tienen una altura de 0 PX, se pararán una encima de la otra.
Sección de color divisor luego abra la nueva sección duplicada y actualice lo siguiente: Color de separador más alto: # 08E1C0
Color del divisor inferior: # 08E1C0
Efectos de la sección Divisor luego actualice el efecto del movimiento horizontal de la siguiente manera: para escritorio …
Comenzando el desplazamiento: 6 (al 0% de vista)
GAP promedio: 0 (a 50% de visualización
Compensación final: -3 (100% de visualización)
Para la tableta …
Comenzando el desplazamiento: 3 (al 0% de vista)
GAP promedio: 0 (a 50% de visualización
Compensación final: -3 (100% de visualización)
Cree la sección División 3 (tercera capa) para crear la tercera capa de nuestro diseño de divisor de secciones animadas, copie la sección anterior.
Sección División 3 Color Abra la sección duplicada y actualice los siguientes estilos de separación:
Mayor color del separador: # 9191ff
Color del divisor inferior: # 9191ff
Divisor 3 Efectos de la Sección 3 y luego actualice el efecto del movimiento horizontal de la siguiente manera:
Comenzando el desplazamiento: 3 (al 0% de vista)
GAPACIÓN PROMEDIA: 0 (Vista al 50%)
Compensación final: -2 (a 100% de vista)
Básicamente, hacemos pequeños cambios en las compensaciones del efecto de desarrollo de cada capa para crear movimientos más esporádicos en el fondo del contenido. El índice de división de sección z ahora que tenemos las tres capas completas, podemos elegir qué divisor queremos mostrar anteriormente actualizando el índice Z para esa sección. En este ejemplo, actualicemos el divisor de la primera sección con un excelente índice, como sigue:
IND ÍNDICE: 1
Ocultar el desbordamiento como el último paso, 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: .et_builder_inner_content {Overflow: Hidden;} El resultado final aquí está el diseño estático final.
Y aquí está el diseño mientras el usuario ejecuta la página hacia abajo.¡Observe los hermosos colores en movimiento!Pensamientos finales animar a Divas en Scroll es una forma divertida y efectiva de aportar más vida a una página web.Esperamos que esto le dé un poco de inspiración para causar diseños aún más creativos.Espero tener noticias suyas en los comentarios.¡Suerte!
