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.
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
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
espaciamiento
Luego agregue un margen superior e inferior personalizado.
- Margen superior: 200px
- Margen inferior: 200px
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.
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
espaciamiento
Luego agregue un margen inferior en la tableta y el teléfono.
- Margen inferior: 50 píxeles (solo tableta y teléfono)
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.
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
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í
línea
Luego cambie el color de línea del módulo.
- Color de línea: # 000000
apresto
Luego haga algunos cambios en los parámetros de tamaño.
- Peso del divisor: 3px
- Ancho: 28%
espaciamiento
También agregamos un margen superior.
- Margen superior: 10px
Agregar sección # 2
espaciamiento
Pasemos a la siguiente sección regular. Elimina el acolchado superior predeterminado de la sección.
- Relleno superior: 0px
desbordamientos
También oculta los desbordamientos.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Añadir una nueva linea
Estructura de la columna
Continúe agregando una primera fila utilizando la siguiente estructura de columnas:
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
espaciamiento
Luego, elimine todo el relleno predeterminado superior e inferior.
- Relleno superior: 0px
- Relleno inferior: 0px
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
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 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)
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í
línea
Luego cambie el color de línea del módulo.
- Color de línea: # 000000
apresto
También realice cambios en los parámetros de tamaño.
- Peso del divisor: 3px
- Ancho: 50%
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.
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
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.
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
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.
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
- Fuente del botón: trimestral
- Peso de la fuente del botón: negrita
espaciamiento
También agregue relleno personalizado.
- Relleno superior: 50px
- Relleno inferior: 50px
- Relleno izquierdo: 100px
- Relleno derecho: 100px
Puesto de trabajo
Y vuelva a colocar el botón en consecuencia:
- Posición: absoluta
- Ubicación: abajo a la izquierda
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.
Cambiar todo el contenido
Asegúrese de editar todo el contenido en líneas duplicadas.
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
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
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
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
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
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
Resultado final
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
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.