Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel. Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo agregar movimiento a sus divisores de sección utilizando el paquete de diseño de servicios de transporte de Divi .
Ya conocemos Divi y sus animaciones integradas, forman parte de cada uno de los elementos de diseño que se incluyen en el Visual Builder. Pero si desea agregar una animación a una sección, la animación se aplicará a todos los elementos de diseño que se incluyen en esa sección. ¿Quieres evitar eso? Puedes abordarlo de otra manera. Le mostraremos cómo agregar movimiento solo a los divisores de sección . Al darle a su sitio web un poco más de movimiento, especialmente en los elementos de diseño creativo, como los separadores de sección, puede darle a sus páginas una nueva apariencia.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido a un GIF que demostrará el resultado final:
Acercarse
- En lugar de utilizar divisores de sección dentro de la propia sección, un divisor de sección tendrá su propia sección
- La sección que agregamos para el divisor de sección estará completamente vacía
- Esto nos permite agregar la animación a toda la sección, pero solo se aplicará al divisor de la sección porque no hay otros elementos de diseño allí.
- Nos aseguramos de que la transición sea fluida mediante el uso de un color divisor que coincida con la sección siguiente o anterior.
- La animación que elijamos dependerá del separador de sección en cuestión, no todas las animaciones coinciden con un estilo de separador en particular
- Estamos eligiendo animaciones que hacen que la transición parezca fluida y no revelarán que los divisores de sección no son en realidad parte de la sección anterior o siguiente.
- También puede usar otros divisores de sección de su elección, pero tendrá que jugar con la configuración de animación hasta que obtenga el resultado suave deseado que tenía en mente.
Comencemos a Crear
Habilitar Visual Builder en la página de destino de los servicios de transporte
Abra la página de destino del sitio web que ha creado (utilizando el paquete de diseño de servicios de transporte de Divi ) con Visual Builder. Vamos a demostrarlo en esta página, pero puede aplicar este enfoque a cualquier otra página en la que esté trabajando.
Cambiar el color de fondo de la sección
Localizar Sección
Lo primero que vamos a hacer es cambiar el color de fondo de una sección de nuestra página. Vamos a hacerlo un poco más oscuro para que los divisores de sección se noten más. Encuentra la siguiente sección en tu página:
Cambiar color de fondo
Abra la configuración de esta sección, vaya a las opciones de Fondo y cambie el color de fondo a ‘#e8eaef’.
Retire el divisor inferior
Localizar Sección
Lo siguiente que debemos hacer es eliminar el divisor inferior de una de las secciones de nuestra página. Como se mencionó en el enfoque de esta publicación de blog, vamos a crear una sección separada para nuestro divisor de sección. Continúe y localice la siguiente sección en su página:
Retire el divisor inferior
Abra la configuración de esta sección y elimine el divisor inferior seleccionando ‘Ninguno’ en la lista Estilo de divisor.
Retire el divisor superior
Localizar Sección
El segundo divisor del que nos vamos a deshacer es el siguiente:
Retire el divisor superior
Abra la configuración de esta sección y retire el divisor superior.
Agregar divisor de sección de movimiento n.º 1
Agregar nueva sección
Posición
¡Ahora podemos comenzar a agregar nuestros divisores de sección de movimiento! Empezaremos con el primero. Continúe y agregue una nueva sección regular justo entre las siguientes dos secciones:
Divisor inferior
No agregue ninguna fila o módulo a su sección. En su lugar, abra la configuración de la sección y agregue un divisor inferior.
- Estilo de divisor: Buscar en la lista
- Color del divisor: #e8eaef
- Altura del divisor: 1500px
Animación
Continúe agregando el estilo de animación de su elección. Los siguientes ajustes de animación combinan muy bien con el estilo de división que hemos elegido:
- Estilo de animación: Diapositiva
- Repetición de animación: una vez
- Dirección de animación: Derecha
- Duración de la animación: 2000ms
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: Facilidad de entrada y salida
Agregar divisor de sección de movimiento n.º 2
Agregar nueva sección
Posición
Agreguemos también el divisor de la segunda sección. Desplácese hacia abajo en su página y agregue una nueva sección estándar aquí:
Divisor superior
Abra la configuración de su sección y agregue el siguiente divisor superior:
- Estilo de divisor: Buscar en la lista
- Altura del divisor: 260px
- Repetición horizontal del divisor: 2x
- Voltear el divisor: Vertical
- Disposición de los divisores: Debajo del contenido de la sección
Espaciado
Para asegurarnos de que el divisor no sea interrumpido por la siguiente sección, agregaremos un relleno adicional en la parte superior e inferior:
- Relleno superior: 60px
- Relleno inferior: 160px
Animación
El siguiente efecto hace que parezca que el divisor gotea por la página:
- Estilo de animación: doblar
- Repetición de animación: una vez
- Dirección de animación: Abajo
- Duración de la animación: 3000ms
- Intensidad de animación: 100%
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: Facilidad de entrada y salida
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado que hemos logrado obtener:
Pensamientos finales
En esta publicación de blog de caso de uso, le mostramos cómo agregar movimiento a sus divisores de sección utilizando el paquete de diseño de servicios de transporte de Divi . Probablemente esté acostumbrado a agregar animaciones a los elementos de diseño en general, pero también puede agregar animaciones a los divisores de sección en particular. Esto da como resultado un diseño interactivo. Una vez que obtenga el concepto, puede agregar movimiento a cualquier tipo de divisor de sección que esté usando en su página. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!
Imagen destacada de Trend Creatives / shutterstock.com