Cuando diseñe su página de servicios, querrá asegurarse de que su visitantes observe todos los diferentes servicios que proporciona. En muchos casos, solo será un servicio específico lo que buscan, pero si brinda una forma simplificada en su estructura de servicio, es más probable que su visitantes tratar con todos ellos. 

En este tutorial, le mostraremos cómo ser creativo con los efectos de desplazamiento de Divi y crear una transición de servicio fluida. ¡También podrá descargar el archivo JSON de forma gratuita!

Vamos.

Resultado posible

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.

Transición entre sección divi

1, recrear la estructura de los elementos

Agregar sección # 1

espaciamiento

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y cambie los valores de relleno en diferentes tamaños de pantalla.

  • Acolchado superior: 80 px (escritorio y tableta), 0 px (teléfono)
  • Relleno inferior: 80px
Sección de parámetros Divi

Añadir una nueva linea

Estructura de la columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

apresto

Sin agregar más módulos, abra los parámetros de línea y aplique los siguientes cambios a los parámetros de dimensionamiento:

  • Use un ancho de canal personalizado: Sí
  • Ancho de canal: 1
  • Ancho: 90%
  • Ancho máximo: 1580 px
Configuración de espaciado divi

espaciamiento

Luego agregue un margen superior e inferior personalizado.

  • Margen superior: 200px
  • Margen inferior: 200px
Configuración de espaciado de línea Divi

Agregue un módulo de texto a la columna 1

Añadir contenido H2

Es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Ingrese el contenido H2 de tu elección.

Nuestros servicios ofrecidos por los expertos del momento

Configuraciones de texto H2

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto H2 de la siguiente manera:

  • Título 2 Policía: trimestral
  • Encabezado 2 Tamaño del texto: 80 px (escritorio), 50 px (tableta), 40 px (teléfono)
  • Altura de la línea 2 de la cabeza: 1.2em
Jefe de policía divi

espaciamiento

Luego agregue un margen inferior en la tableta y el teléfono.

  • Margen inferior: 50 píxeles (solo tableta y teléfono)
Configuración de espaciado de texto Divi

Agregue un módulo de texto a la columna 2

Agregar contenido

Pasemos a la segunda columna. Allí, el primer módulo que necesitamos es un módulo de texto con un cierto contenido descripción.

Cuadro de texto contenido divi

Configuraciones de texto

Cambie a la pestaña de diseño del módulo y cambie la configuración de texto en consecuencia:

  • Fuente de texto: cabina
  • Estilo de fuente del texto: mayúscula
  • Color del texto: # 000000
  • Tamaño del texto: 18 px (escritorio), 15 px (tableta), 13 px (teléfono)
  • Espacio entre letras de texto: 3px (escritorio), 1px (tableta y teléfono)
  • Altura de la línea de texto: 3em
Parámetro de texto Divi

Agregar un módulo de separación a la columna 2

visibilidad

El siguiente y último módulo que necesitamos en esta columna es un módulo de separación. Asegúrese de que la opción "Mostrar separador" esté habilitada.

  • Mostrar separador: sí
Divisor visible

línea

Luego cambie el color de línea del módulo.

  • Color de línea: # 000000
Fondo de color divisor

apresto

Luego haga algunos cambios en los parámetros de tamaño.

  • Peso del divisor: 3px
  • Ancho: 28%
Dimensionamiento del separador Divi

espaciamiento

También agregamos un margen superior.

  • Margen superior: 10px
Espaciado del módulo separador Divi

Agregar sección # 2

espaciamiento

Pasemos a la siguiente sección regular. Elimina el acolchado superior predeterminado de la sección.

  • Relleno superior: 0px
Sección 2 espaciado divi

desbordamientos

También oculta los desbordamientos.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto
Ocultar desbordamientos del módulo divi

Añadir una nueva linea

Estructura de la columna

Continúe agregando una primera fila utilizando la siguiente estructura de columnas:

Elija un diseño divi

apresto

Sin agregar más módulos, abra los parámetros de línea, acceda a los parámetros de dimensionamiento y realice las siguientes modificaciones:

  • Use un ancho de canal personalizado: Sí
  • Ancho de canal: 1
  • Ecualizar alturas de columna: Sí
  • Ancho: 90%
  • Ancho máximo: 1580 px
Sección divi de configuración de canalón

espaciamiento

Luego, elimine todo el relleno predeterminado superior e inferior.

  • Relleno superior: 0px
  • Relleno inferior: 0px
Configuración de espaciado del módulo de línea Divi 1

Configuración de columna 1

Color de fondo

Luego abra la configuración de la columna 1 y cambie el color de fondo.

  • Color de fondo: # f7f7f7
Configuración de fondo del módulo divi line

espaciamiento

Complete la configuración de la columna agregando valores de relleno personalizados en diferentes tamaños de pantalla.

  • Acolchado superior: 200 px (escritorio), 100 px (tableta y teléfono)
  • Acolchado inferior: 200 px (escritorio), 100 px (tableta y teléfono)
  • Relleno izquierdo: 8%
  • Relleno derecho: 8%
Configuración de la columna del módulo de fila

Configuración de columna 2

espaciamiento

Continúe abriendo la configuración en la columna 2. Vaya a la pestaña avanzada y agregue valores de relleno personalizados en diferentes tamaños de pantalla.

  • Relleno superior: 100 px (escritorio), 50 px (tableta y teléfono)
  • Relleno inferior: 200px
  • Relleno izquierdo: 150 px (escritorio), 0 px (tableta y teléfono)
Configuración de espaciado del módulo Divi

Agregar un módulo de separación a la columna 1

visibilidad

En la primera columna, el primer módulo que necesitamos es un módulo de separación. Asegúrese de que la opción "Mostrar separador" esté habilitada.

  • Mostrar separador: sí
Mostrar separador divi 1

línea

Luego cambie el color de línea del módulo.

  • Color de línea: # 000000
Configuración del separador Divi

apresto

También realice cambios en los parámetros de tamaño.

  • Peso del divisor: 3px
  • Ancho: 50%
Dimensionamiento del separador Divi

Agregue un módulo de texto a la columna 1

Añadir contenido H3

El siguiente módulo que necesitamos en la columna 1 es un módulo de texto con contenido H3.

Configuración de la sección de contenido Divi

Configuraciones de texto H3

Cambie a la pestaña de diseño del módulo y cambie la configuración del texto H3:

  • Título 3 Policía: trimestral
  • Color del texto del elemento 3: # 000000
  • Elemento 3 Tamaño del texto: 50 px (escritorio), 40 px (tableta), 35 px (teléfono)
  • Altura de la línea 3 de la cabeza: 1.1em
Fijación de uñas con diseño Divi

Agregue un módulo de texto a la columna 2

Agregar contenido

En la segunda columna, el primer módulo que necesitamos es un módulo de texto con algún contenido descriptivo.

Configuración del módulo de texto Divi

Configuraciones de texto

Cambie la configuración de texto del módulo de la siguiente manera:

  • Fuente de texto: cabina
  • Estilo de fuente del texto: mayúscula
  • Tamaño del texto: 18 px (escritorio), 15 px (tableta), 13 px (teléfono)
  • Espacio entre letras de texto: 3px (escritorio), 1px (tableta y teléfono)
  • Altura de la línea de texto: 3em
Ajuste de fuente de molde de texto Divi

Agregue un módulo de botones a la columna 2

Añadir una copia

El siguiente y último módulo que necesitamos es un módulo de botones. Ingrese una copia de su elección.

Configuración de contenido del módulo de texto

Configuraciones de botones

Luego peina el botón.

  • Use estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 20 píxeles
  • Color de texto del botón: #ffffff
  • Color de fondo del botón: # 000000
  • Ancho del borde del botón: 0px
Configuración de estilo del botón Divi
  • Fuente del botón: trimestral
  • Peso de la fuente del botón: negrita
Configuración de color del botón Divi

espaciamiento

También agregue relleno personalizado.

  • Relleno superior: 50px
  • Relleno inferior: 50px
  • Relleno izquierdo: 100px
  • Relleno derecho: 100px
Configuración de espaciado de botones del módulo Divi

Puesto de trabajo

Y vuelva a colocar el botón en consecuencia:

  • Posición: absoluta
  • Ubicación: abajo a la izquierda
Ajuste de la posición del módulo del botón Divi

Clone la línea tantas veces como sea necesario

Una vez que haya completado la línea completa y todos sus módulos, puede clonar la línea completa tres veces.

Módulo de clonación divi

Cambiar todo el contenido

Asegúrese de editar todo el contenido en líneas duplicadas.

Editar el contenido de la sección divi

2. Aplicar efectos de desplazamiento

Efectos de desplazamiento de la primera fila

Movimiento horizontal

Una vez que haya completado todas las líneas en su sección, es hora de agregar los efectos de desplazamiento. Abra la primera fila de la sección y agregue movimiento horizontal.

  • Activar movimiento horizontal: sí
  • Inicio de desplazamiento: -5
  • Compensación media: 0 (al 26%)
  • Desplazamiento final: 0
  • Efecto de movimiento de disparo: medio del elemento
Aplicar efectos de desplazamiento divi

Fundido de entrada y salida

Utilice también un efecto de desvanecimiento entrante y saliente.

  • Activar fundido de entrada y salida: Sí
  • Opacidad inicial: 100%
  • Opacidad promedio: 100% (al 50%)
  • Opacidad final: 0% (a 53%)
  • Efecto de movimiento de disparo: medio del elemento
Configurar la sección de animación de fundido divi

Efectos de desplazamiento de la fila central

Movimiento vertical

A continuación, agregaremos efectos de desplazamiento a todas las líneas entre la primera y la última línea de la sección. Primero use un movimiento vertical:

  • Activar movimiento vertical: sí
  • Inicio de desplazamiento: -4
  • Compensación media: 0 (al 26%)
  • Desplazamiento final: 0
  • Efecto de disparo de movimiento: medio del elemento
Configuración de aniación de desplazamiento Divi

Fundido de entrada y salida

También active un efecto de desvanecimiento de entrada y salida.

  • Activar fundido de entrada y salida: Sí
  • Opacidad inicial: 0%
  • Opacidad promedio: 100% (del 27% al 50%)
  • Compensación final: 0 (al 53%)
  • Efecto de movimiento de disparo: medio del elemento
Animación de desvanecimiento de línea divi

Efectos de desplazamiento de última línea

Movimiento vertical

Luego abra la última línea de la sección y agregue el siguiente movimiento vertical:

  • Activar movimiento vertical: sí
  • Inicio de desplazamiento: -4
  • Compensación media: 0 (al 26%)
  • Desplazamiento final: 0
  • Efecto de movimiento de disparo: medio del elemento
Animación de desplazamiento del módulo de línea divi

Fundido de entrada y salida

¡Con un efecto de desvanecimiento entrante y saliente y listo!

  • Activar fundido de entrada y salida: Sí
  • Opacidad inicial: 0%
  • Opacidad promedio: 100% (del 27% al 50%)
  • Opacidad final: 100% (a 53%)
  • Efecto de movimiento de disparo: medio del elemento
Configuración de animación de apariencia del módulo de línea divi

Resultado final

Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.

Demo final

Consideraciones finales

En este artículo, le mostramos cómo crear una hermosa transición de servicio con los efectos de desplazamiento de Divi. Incluso antes de que desaparezca un servicio, el otro comienza a aparecer, dando una buena transición que es agradable a la vista. Este enfoque lo ayudará a resaltar cada servicio a nivel individual. ¡También pudo descargar el archivo 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.