Cómo activar las transiciones de imágenes con las opciones pegajosas de Divic

La versatilidad de las opciones adhesivas de la división va más allá del mero uso de la configuración para un encabezado pegajoso. Puede usarlo para activar los cambios en su diseño en este tutorial, por ejemplo, usaremos las opciones adhesivas de Divi para activar la transición de la imagen. Las transiciones de imágenes tienen lugar tan pronto como los visitantes se acercan a la imagen en el desplazamiento. Recrearemos dos ejemplos diferentes desde cero, pero una vez que obtenga el enfoque, podrá crear sus propias transiciones de imagen únicas utilizando solo las opciones integradas del DIV. ¡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 final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlos 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. Pasos generales Agregue la sección no. 1 espacio en la primera parte del tutorial, construiremos la base de nuestro diseño. Una vez que se haya desarrollado, podemos centrarnos en aplicar la configuración correcta para realizar los dos ejemplos de la vista previa de esta publicación. Agregue una nueva sección a la página a la que trabaja, muévase a la pestaña de diseño de la sección y elimine todos los valores predeterminados, hacia arriba y hacia abajo.
SUS Lingo: 0 PX
Finamiento inferior: 0 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 cambie la configuración de tamaño de la siguiente manera:

Ancho máximo: 1480 PX
Alineación de filas: centro
El espacio elimina todas las deflantes predeterminadas y sin fondo.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
IND ÍNDICE y establecer el índice AZ en la configuración de posición. Esto nos ayudará a asegurarnos de que la fila permanezca en la siguiente fila que agregamos más adelante en el tutorial.

IND ÍNDICE: 1
Columnas luego se desborda, abra la configuración de la columna y configure los derrames para esconderse. Horizontal: Oculto

Desbordamiento verticalmente: oculto
Agregue el módulo de imagen a la columna Deje el cuadro de imagen vacío El único módulo que necesitamos en esta fila es un módulo de imagen. Deja el cuadro de imagen vacío.
Imagen de fondo y use una imagen de fondo en su lugar.

Tamaño de la imagen de fondo: portada

Posición de la imagen de fondo: Centro
Espacio para permitir que se muestre la imagen, utilizaremos algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revestimiento superior:

Escritorio: 300 PX
Tableta y teléfono: 150 PX
Levante inferior:
Escritorio: 300 PX
Tableta y teléfono: 150 PX
Agregue el espacio de la Sección 2 Agregue otra sección justo debajo de la anterior. Abra la configuración de la sección y elimine el relleno superior predeterminado de la configuración de espaciado.
SUS Lingo: 0 PX

Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:
IND índice también agregue un índice AZ para esta fila.

IND ÍNDICE: 2

Agregue el módulo de llamada a la acción a la columna agrega contenido en esta fila, el único módulo que necesitamos es una llamada a la acción. Agregue el contenido a su elección.
Agregue el enlace del botón junto con un enlace de botón.

El color de fondo entonces, agregue un color de fondo blanco.

Color de fondo: #ffffff

Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto.
Alineación de texto: izquierda

Color de texto: oscuro
Configuración de texto de título Estilización y el texto del título.
Título de la fuente: Playfair Display

Estilo de fuente de título: cursiva
Título Tamaño de texto
Escritorio: 45 PX
Tableta: 40 PX
Teléfono: 35 PX
Cartas de título de espacio: 1 Cuerpo de texto PXSeari, así como el texto del cuerpo.
Font Corp: Karla
La altura de la línea del cuerpo: 2em

Establece el botón y luego estiliza el botón.
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 18 PX

El color del texto del botón: # 000000
Color degradado 1: #ffffff
Color de gradiente 2: # FFDC91
Tipo de gradiente: lineal
Posición inicial: 50%
Posición final: 50%
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: Karla


El estilo de la fuente del botón: mayúscula
Botón de visualización: Sí
Icono de botón de colocación: izquierda
Muestre el icono solo en el cursor para el botón: no
Revestimiento superior: 10 px

Finamiento inferior: 10 PX
ENLIZACIÓN IZQUIERDA: 15%
Junta derecha: 15%
Dimensión Cambiamos la configuración de tamaño para diferentes tamaños de pantalla.
Ancho:
Escritorio: 65%

Tableta: 80%
Teléfono: 100%
Alineación del módulo: centro
Espacio entonces, agregaremos algunos valores de margen personalizado y llenado a la configuración de espaciado.
Margen superior:
Escritorio: -150 PX

Tableta: -50px
Teléfono: 0px
Margen inferior: 50 PX
Revestimiento superior: 150 PX
Revestimiento inferior: 150 px
Box Shadow y completaremos la configuración del módulo agregando un tono de caja sutil.
Box shadwo blur stregth: 30 px
Color de la sombra: RGBA (0.0,0,0.11)

2. Aplique el efecto pegajoso en una fila Abra el giro en la sección # 1 ahora que hemos establecido nuestras bases de diseño, es hora de aplicar el efecto pegajoso. Este efecto pegajoso nos ayudará a cambiar los estilos a medida que la gente ejecute el artículo. El elemento al que agregaremos nuestro efecto pegajoso es la fila de la primera sección que contiene la imagen.
Aplicar el efecto pegajoso es importante para asegurarse de que el límite inferior inferior esté configurado en sección. El comienzo y los puntos finales de nuestra fila son los mismos que los de la sección, lo que asegura que la fila no se vuelva pegajosa, pero se aplican estilos pegajosos. La brecha superior adhesiva determina a qué hora comienza la transición. Si este valor fuera cero, por ejemplo, significaría que la parte superior del navegador debería alcanzar la parte superior de la fila para comenzar la transición. Configuración del espacio superior adhesivo en “300px”, creamos la transición antes. Posición de aterrizaje: Pega desde arriba
GAPUPTO LIPY UPPER: 300 PX

Pequeño límite inferior: sección

Brecha de los elementos circundantes adhesivos: sí
Transición predeterminada y estilos adhesivos: sí
Asegúrese de que haya una compensación de igualdad por encima de la primera sección porque establecemos el espacio de grabación en “300 PX”, necesitamos el espacio en la parte superior de nuestra página para hacerlo. Si usa este diseño en algún lugar en el medio de la página, no tiene que preocuparse por este paso. Sin embargo, si utiliza este enfoque en la parte superior de la página, deberá cambiar el espacio de grabación o agregar suficiente espacio a la parte superior. Agregaremos algunos bordes superiores a nuestra primera sección para generar ese espacio.
Margen superior: 400 PX
3. Aplique el efecto Ken Burn al módulo de imagen ahora, después de que nuestro turno se haya vuelto pegajoso, podemos comenzar a aplicar estilos pegajosos en una fila y en todos los elementos de su hijo. Aunque las posibilidades son ilimitadas, presentamos dos ejemplos diferentes y cómo hacerlas. Para aliviar el juego con los dos ejemplos diferentes, clonaremos ambas secciones una vez y las colocaremos bajo el primero. Ejemplo no. 1 Configuración del boxeo de sombra de cuadro pegajoso para recrear el ejemplo # 1, que podría ver en la vista previa de esta publicación, abra la configuración ordinaria y aplique la siguiente configuración de sombra del cuadro:
Box Shadow Posición vertical: 0px

Poder de extender la sombra de la caja: 0 px
Color de la sombra: RGBA (0.0,0,0)

Palo posición vertical: 100 px

Color Sticky Shadow: # FFDC91
La transición incluye una transición suave en la pestaña avanzada.
Duración de la transición: 500 ms
Curva de velocidad de transición: fácil

Configuración para el módulo de imagen adhesiva y luego transforma, abra el módulo de imagen y aplique una escalera de transformación en un estado pegajoso.
Ambos: 100%

Ambos pegajosos: 130%
Transición Haga una transición suave cambiando la configuración de transición del módulo en consecuencia:
Duración de la transición: 1200 ms

Curva de velocidad de transición: fácil
Ejemplo no. 2 Configuración de línea pegajosa Translación Translación ¡Seguimos con el segundo ejemplo! Abra la configuración de la fila y aplique la siguiente configuración de traducción de transformación:

Derecha: 20%

Sticky derecho: 0%
Transición modificada y la configuración de transición de la fila.
Duración de la transición: 500 ms

Curva de velocidad de transición: fácil
Configuración para el módulo de imagen adhesiva y luego, abra el módulo de imagen y reproduce con los filtros en predeterminado y pegajoso.

Brillo: 50%

Saturación pegajosa: 100%
Brillo de aterrizaje: 100%
Transición Complete la configuración del módulo y este tutorial, cambiando la configuración de transición de la siguiente manera:

Duración de la transición: 500 ms
Curva de velocidad de transición: fácil
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, te mostré cómo ser creativo con las opciones pegajosas de Div. Específicamente, le mostré cómo activar las transiciones de imágenes. Tan pronto como la gente ejecuta la imagen, los estilos de la imagen cambian, lo que conduce a una hermosa transición. Traté dos ejemplos diferentes, pero las posibilidades son ilimitadas. ¡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.