Cómo crear una transición del servicio de soldadura con los efectos de la división

Mientras diseña su página de servicio, desea asegurarse de que sus visitantes noten todos los diferentes servicios que ofrece. En muchos casos, solo habrá un servicio específico que está buscando, pero si proporciona una forma simplificada en la estructura de su servicio, es más probable que sus visitantes los procesen a todos. En este tutorial, le mostraremos cómo ser creativos con los efectos de desplazamiento de la división y cómo crear una transición de servicio sin problemas. ¡Podrá descargar el archivo JSON de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue el aspecto de transición de los servicios de soldadura gratuitos para poner su mano en los problemas sin problemas, 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1, recrea la estructura del elemento Agregar sección no. 1 Espacio 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 llenado para diferentes tamaños de pantalla.
Revelaje superior: 80 PX (escritorio y tableta), 0 PX (teléfono)
Finamiento inferior: 80 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y aplique los siguientes cambios a la configuración de dimensionamiento:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 90%
Ancho máximo: 1580 PX
El espacio agregue algunos bordes superiores e inferiores personalizados.

Margen superior: 200 PX
Margen inferior: 200 PX
Agregue un módulo de texto en la columna 1 Agregar el contenido de H2 es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Ingrese un contenido H2 de su elección.

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

2 Sección de fuente: Questrialtitl 2 Tamaño de texto: 80 PX (escritorio), 50 PX (tableta), 40 PX (teléfono)
Título 2 Altura de la línea: 1.2em
Espacio Agregar un borde inferior en la tableta y más teléfono.
Margen inferior: 50 PX (solo tableta y teléfono)

Agregue un módulo de texto a la columna 2 Agregar contenido a la segunda columna. Allí, el primer módulo que necesitamos es un módulo de texto con un contenido de descripción.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:

Texto de fuente: cabina

Text -Text estilo: mayúscula
Color de texto: # 000000
Tamaño de texto: 18 PX (escritorio), 15 PX (tableta), 13 PX (teléfono)
Texto de la letra de espacio: 3 PX (escritorio), 1 PX (tableta y teléfono)
Altura de la línea de texto: 3em
Agregue el módulo divisor a la visibilidad de la columna 2 El siguiente módulo y último módulo que necesitamos en esta columna es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

La línea cambia el color de la línea del módulo a continuación.
Color de línea: # 000000

Dimensión Entonces, realice algunos cambios en la configuración del tamaño.
Peso del divisor: 3 PX

Ancho: 28%
Espacio agregamos algunos bordes superiores.
Margen superior: 10 PX

Agregue el interruptor de separación de la Sección 2 a la siguiente sección habitual. Elimine el relleno ascendente predeterminado.
SUS Lingo: 0 PX

Ocultar desbordamientos y desbordamientos.
Desbordamiento horizontal: oculto

Desbordamiento verticalmente: oculto
Agregue una nueva estructura de columna de fila Continuar agregando una primera fila utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abrir la configuración de la fila, acceder a la configuración del tamaño y realizar los siguientes cambios: use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Igualar las alturas de la columna: sí
Ancho: 90%
Ancho máximo: 1580 PX
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Configuración Columna 1 Color de fondo Luego abra la configuración de la columna 1 y cambie el color de fondo.
Color de fondo: # F7F7F7
Espacio Complete la configuración de la columna agregando algunos valores de llenado personalizados en diferentes tamaños de pantalla.

Revelaje superior: 200 PX (escritorio), 100 PX (tableta y teléfono)

Bajo forro: 200 PX (escritorio), 100 PX (tableta y teléfono)

ENLIZACIÓN IZQUIERDA: 8%
Revelaje derecho: 8%
Configuración de la columna 2 Espacio Continuar abriendo la configuración de la columna 2. Vaya a la pestaña avanzada y agregue algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revestimiento superior: 100 PX (escritorio), 50 px (tableta y teléfono)
Finamiento inferior: 200 PX

ENLIZACIÓN IZQUIERDA: 150 PX (escritorio), 0 PX (tableta y teléfono)
Agregue un módulo divisor en la visibilidad de la columna 1 En la primera columna, el primer módulo que necesitamos es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
La línea cambia el color de la línea del módulo.

Color de línea: # 000000
Dimensión Modifique la configuración de tamaño.

Peso del divisor: 3 PX
Ancho: 50%

Agregue un módulo de texto a la columna 1 Agregar contenido H3 La siguiente forma que necesitamos en la columna 1 es un texto con contenido H3.
Configuración de texto H3 Cambiar a la pestaña Diseño del módulo y cambiar la configuración del texto H3: 3 Fuentes: Questrial
Rúbrica 3 Color de texto: # 000000

Texto 3 Sección: 50 PX (escritorio), 40 Px (tableta), 35 PX (teléfono)

Rúbrica 3 altura de línea: 1.1em
Agregue un módulo de texto a la columna 2 Agregar contenido a la segunda columna, el primer módulo que necesitamos es un módulo de texto con un contenido de descripción.
Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera:
Texto de fuente: cabina
Text -Text estilo: mayúscula

Tamaño de texto: 18 PX (escritorio), 15 PX (tableta), 13 PX (teléfono)

Texto de la letra de espacio: 3 PX (escritorio), 1 PX (tableta y teléfono)
Altura de la línea de texto: 3em
Agregue un módulo de botón a la columna 2 Agregue una copia Siguiente y el último módulo que necesitamos es un módulo de botón. Ingrese una copia de su elección.
Configuración del botón Stilet el botón a continuación.
Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 20 PX

El color del texto del botón: #ffffff

El color de fondo del botón: # 000000
El ancho del nudo del botón: 0 PX
Botón de fuente: Questrial
Botón de peso de fuente de fuente: en negrita
Espacio Agregar un relleno personalizado.
Revestimiento superior: 50 px

Revestimiento inferior: 50 PX
ENLIZACIÓN IZQUIERDA: 100 PX

Revestimiento derecho: 100 PX
Posicione y reposicione el botón de acuerdo con:
Posición: Absoluto
Ubicación: en el lado inferior izquierdo
Clone el giro tantas veces como necesite después de haber completado toda la fila y todos sus módulos, puede clonar toda la fila tres veces.

Cambie todo el contenido Asegúrese de cambiar todo el contenido en filas duplicadas.
2. Aplicar efectos de efectos en el movimiento horizontal de la primera fila Después de haber completado todas las filas de su sección, es hora de agregar los efectos de desplazamiento. Abra la primera fila desde la sección y agregue un movimiento horizontal. Active el movimiento horizontal: sí
Comenzando el desplazamiento: -5

GAPACIÓN PROMEDIA: 0 (al 26%)

Grado final: 0

El desencadenante del efecto de movimiento: el medio del elemento
Desvanecer dentro y fuera Utilice un efecto de decoloración en y salida.
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 100%
Opacidad promedio: 100% (al 50%)
Opacidad final: 0% (al 53%)

El desencadenante del efecto de movimiento: el medio del elemento
Efectos para las filas promedio de movimiento vertical, entonces agregaremos algunos efectos del desplazamiento a todas las filas entre la primera y última fila de la sección. Use un movimiento vertical primero:
Habilitar el movimiento vertical: sí
Comenzando el desplazamiento: -4
GAPACIÓN PROMEDIA: 0 (al 26%)
Grado final: 0

Efecto desencadenante de movimiento: la mitad del artículo
El desvanecimiento dentro y fuera activan un efecto de decoloración y salida.
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 0%
Opacidad promedio: 100% (de 27% a 50%)
Compensación final: 0 (al 53%)

El desencadenante del efecto de movimiento: el medio del elemento
Efectos el movimiento vertical de la última fila Entonces, abra la última fila desde la sección y agregue el siguiente movimiento vertical:
Habilitar el movimiento vertical: sí
Comenzando el desplazamiento: -4
GAPACIÓN PROMEDIA: 0 (al 26%)
Grado final: 0

El desencadenante del efecto de movimiento: el medio del elemento
¡Diviendo y saliendo junto con un efecto de decoloración y salida y ya está terminado!
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 0%
Opacidad promedio: 100% (de 27% a 50%)
Opacidad final: desencadenante del efecto de movimiento del 100% (al 53%): elemento central

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, le mostré cómo crear una hermosa transición de servicio con los efectos de desplazamiento de Div. Justo antes de que un servicio desaparezca, el otro comienza a aparecer, dando una hermosa transición para ser agradable a la vista. Este enfoque lo ayudará a resaltar cada servicio a nivel individual. ¡Podrías descargar el archivo JSON gratis! 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.