Hay muchas maneras en que puede hacer que su visitante se dé cuenta del hecho de que se está moviendo a otra sección de su página. Dentro de Divi , hay una amplia gama de divisores de sección que puede usar desde el principio. Pero si está buscando una forma más animada de dejarlo claro, le encantará este tutorial. Le mostraremos cómo marcar una nueva sección Divi usando formas de movimiento sutiles. Crearemos estas formas con las opciones integradas de Divi y les agregaremos movimiento con los efectos de desplazamiento de Divi . Las posibilidades son infinitas, pero compartiremos tres ejemplos de diseño que puede usar de inmediato. ¡También podrá descargar los archivos JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Ejemplo 1
Escritorio
Móvil
Ejemplo #2
Escritorio
Móvil
Ejemplo #3
Escritorio
Móvil
Descargue los diseños de formas de movimiento sutil GRATIS
Para poner sus manos en los diseños de formas de movimiento sutiles gratuitos, primero deberá descargarlos 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!
Pasos generales
Cargar el diseño de la página de destino de la galería de arte
Para este tutorial, usaremos el paquete de diseño de la galería de arte, pero puede aplicar la técnica a cualquier tipo de sitio web que esté creando. Agregue una nueva página y cargue la página de destino del paquete de diseño.
Agregar nueva fila al final de la sección n.º 1
Estructura de la columna
Ahora, veremos algunos pasos básicos que se aplican a los tres ejemplos que se mostraron al comienzo de este tutorial. Primero, agregue una nueva fila en la parte inferior de la primera sección de su página usando la siguiente estructura de columnas:
Dimensionamiento
Abra la configuración de fila y cambie la configuración de 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
Modifique también los valores de margen y relleno.
- Margen superior: 10vw
- Relleno superior: 0px
- Relleno inferior: 0px
Retire el acolchado inferior de la sección n.º 1
Para asegurarnos de que la fila y las formas de movimiento aparezcan en la parte inferior de la sección, debemos eliminar el relleno inferior de la sección.
- Acolchado inferior: 0vw
Recrear el ejemplo n.º 1
Agregar módulo divisor n.º 1
Visibilidad
Una vez que haya completado los pasos generales, es hora de comenzar a recrear los diferentes ejemplos, comenzando con el primero. Agregue un primer módulo divisor y asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.
- Mostrar divisor: Sí
Línea
Pase a la pestaña de diseño del módulo y cambie el color de la línea.
- Color de línea: #ffa100
Dimensionamiento
Modifique también la configuración de tamaño del módulo.
- Peso del divisor: 50px
- Altura: 50px
Espaciado
Luego, vaya a la configuración de espaciado y agregue algunos márgenes personalizados y valores de relleno.
- Margen izquierdo: -200 px (solo tableta y teléfono)
- Margen derecho: -200 px (solo tableta y teléfono)
- Acolchado izquierdo: 15vw
- Acolchado Derecho: 15vw
Transformar sesgo
También transformaremos ligeramente el módulo agregando un valor de desviación inferior en la configuración de transformación.
- Parte inferior: 60 grados
Efecto de desplazamiento de movimiento horizontal
¡Es hora de agregar los diferentes efectos de desplazamiento a nuestro módulo! Primero, agregaremos algo de movimiento horizontal.
- Habilitar movimiento horizontal: Sí
- Compensación inicial: 0
- Compensación media: 0 (al 80 %)
- Compensación final:
- Escritorio: 20 (al 85%)
- Tableta y teléfono: 5 (al 85 %)
Efecto de desplazamiento de aparición y desaparición gradual
También agregaremos un efecto de aparición y desaparición gradual.
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 0%
- Opacidad media: 0% (al 36%)
- Opacidad final: 100% (al 40%)
Efecto de desplazamiento de escala hacia arriba y hacia abajo
Y completaremos la configuración del módulo agregando un efecto de escalado hacia arriba y hacia abajo.
- Habilitar escalado hacia arriba y hacia abajo: Sí
- Escala inicial: 20%
- Escala media: 50% (al 69%)
- Escala final: 100% (al 73%)
Módulo divisor de clones n.º 1
Una vez que haya completado el módulo divisor, puede clonarlo.
Modificar color de línea
Abra la configuración del módulo duplicado y cambie el color de la línea.
- Color de línea: #24252d
Modificar espaciado
Modifique también los valores de espaciado del módulo.
- Margen izquierdo: -200 px (solo tableta y teléfono)
- Margen derecho: -200 px (solo tableta y teléfono)
- Acolchado izquierdo: 25vw
- Acolchado Derecho: 25vw
Modificar efecto de desplazamiento de movimiento horizontal
Luego, vaya a los efectos de desplazamiento en la pestaña avanzada y modifique el desplazamiento final del efecto de desplazamiento de movimiento horizontal.
- Compensación final:
- Escritorio: -20
- Tableta y teléfono: -5
Recrear el Ejemplo #2
Agregar módulo divisor n.º 1
Visibilidad
Si prefiere recrear el segundo ejemplo, continúe y agregue un primer módulo divisor a la última fila de su sección. Asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.
- Mostrar divisor: Sí
Línea
Modifique el color de la línea del módulo a continuación.
- Color de línea: #ffa100
Dimensionamiento
Cambie la configuración de tamaño también.
- Peso del divisor: 200px
- Ancho: 200px
- Alineación del módulo: Centro
- Altura: 200px
Borde
A continuación, convertiremos el módulo en un círculo agregando un radio de borde.
- Todas las esquinas: 200px
Efecto de desplazamiento de movimiento horizontal
¡Es hora de agregar los efectos de desplazamiento! El primer efecto que estamos usando es el movimiento horizontal.
- Habilitar movimiento horizontal: Sí
- Compensación inicial: -2
- Desplazamiento medio: 0
- Compensación final:
- Escritorio: 20
- Tableta y teléfono: 5
Efecto de desplazamiento de escala hacia arriba y hacia abajo
A continuación, también habilitaremos un efecto de escalado hacia arriba y hacia abajo.
- Habilitar escalado hacia arriba y hacia abajo: Sí
- Escala inicial: 20%
- Escala media: 100%
- Escala final: 100%
Módulo divisor de clones
Continúe y clone todo el módulo divisor.
Cambiar color de línea
Abra el duplicado y cambie el color de la línea.
- Color de línea: #24252d
Modificar espaciado
Agregue un poco de margen superior también.
- Margen superior: -200px
Cambiar el efecto de desplazamiento de movimiento horizontal
Luego, vaya a la configuración del efecto de desplazamiento de movimiento horizontal y cambie el desplazamiento final.
- Compensación final:
- Escritorio: -20
- Tableta y teléfono: -5
Recrear el Ejemplo #3
Agregar relleno de fila
¡Vamos al siguiente y último ejemplo! Comience abriendo la fila que ha creado en los pasos generales de este tutorial y cambie los valores de relleno en la configuración de espaciado.
- Relleno superior: 50px
- Relleno inferior: 50px
Agregar módulo divisor n.º 1
Visibilidad
Agregue un nuevo módulo divisor a la última fila de su sección y oculte el divisor.
- Mostrar divisor: No
Fondo degradado
Agregue un fondo degradado a continuación.
- Color 1: #ffa100
- Color 2: #f77f00
- Tipo de gradiente: lineal
- Dirección del gradiente: 121 grados
Dimensionamiento
Pase a la pestaña de diseño del módulo y cambie la configuración de tamaño de la siguiente manera:
- Ancho: 200px
- Alineación del módulo: Centro
- Altura: 0px
Espaciado
A continuación, agregaremos un relleno superior e inferior personalizado.
- Relleno superior: 100px
- Relleno inferior: 100px
Efecto de desplazamiento de movimiento horizontal
Ahora es el momento de agregar los efectos de desplazamiento, comenzando con un poco de movimiento horizontal en diferentes tamaños de pantalla.
- Habilitar movimiento horizontal: Sí
- Compensación inicial: -1 (al 30 %)
- Desplazamiento medio: 0
- Compensación final:
- Escritorio: 20
- Tableta y teléfono: 5
Efecto de desplazamiento giratorio
Completaremos la configuración del módulo agregando un efecto de desplazamiento giratorio.
- Habilitar rotación: Sí
- Rotación inicial: 0° (al 46%)
- Rotación media: 50° (al 75%)
- Rotación final: 90 °
Módulo divisor de clones
Continúe y clone todo el módulo.
Cambiar fondo degradado
Abra la configuración del duplicado y cambie los colores de fondo degradados.
- Color 1: #24252d
- Color 2: #16161c
Cambiar espaciado
Agregue un margen superior negativo.
- Margen superior: -100px
Cambiar efecto de desplazamiento horizontal
Y modifique el desplazamiento final del movimiento horizontal en la configuración de efectos de desplazamiento.
- Compensación final:
- Escritorio: -20
- Tableta y teléfono: -5
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Ejemplo 1
Escritorio
Móvil
Ejemplo #2
Escritorio
Móvil
Ejemplo #3
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo crear formas de movimiento y usarlas para marcar una nueva sección en su página Divi. El uso de esta técnica ayudará a los visitantes a ser aún más conscientes del hecho de que están cambiando a otra parte de su página. Los efectos de movimiento que hemos recreado son sutiles y agregan interacción a su sitio web sin esfuerzo. ¡También pudo descargar los archivos 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.