Cómo activar transiciones de imágenes con las opciones adhesivas de Divi

La versatilidad de las opciones adhesivas de Divi va más allá de usar la configuración para un encabezado adhesivo. También puede usarlo para activar 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 pergamino. Recrearemos dos ejemplos diferentes desde cero, pero una vez que obtenga el enfoque, podrá crear sus propias transiciones de imágenes únicas utilizando solo las opciones integradas de Divi. ¡También podrá descargar el archivo JSON de forma gratuita!

¡Hagámoslo!

Avance

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

Escritorio

Móvil

Descarga The Layout GRATIS

Para poner sus manos en el diseño gratuito, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Pasos generales

Agregar la sección n. ° 1

Espaciado

En la primera parte del tutorial, vamos a construir la base de nuestro diseño. Una vez que esté en su lugar, podemos enfocarnos en aplicar la configuración correcta para lograr los dos ejemplos en la vista previa de esta publicación. Agregue una nueva sección a la página en la que está trabajando, muévase a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:

• Ancho máximo: 1480px
• Alineación de filas: centro

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Índice Z

Y establezca el índice az en la configuración de posición. Esto nos ayudará a asegurarnos de que la fila permanezca debajo de la siguiente fila que agreguemos más adelante en el tutorial.

• Índice Z: 1

Desbordamientos de columnas

A continuación, abra la configuración de la columna y establezca los desbordamientos en ocultos.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar módulo de imagen a la columna

Dejar el cuadro de imagen vacío

El único módulo que necesitamos en esta fila es un módulo de imagen. Deje el cuadro de imagen vacío.

Imagen de fondo

Y use una imagen de fondo de su elección en su lugar.

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro

Espaciado

Para permitir que se muestre la imagen, usaremos algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior:
  • Escritorio: 300px
  • Tableta y teléfono: 150px
• Acolchado inferior:
  • Escritorio: 300px
  • Tableta y teléfono: 150px

Agregar sección n. ° 2

Espaciado

Agrega otra sección justo debajo de la anterior. Abra la configuración de la sección y elimine el relleno superior predeterminado en la configuración de espaciado.

• Relleno superior: 0px

Agregar nueva fila

Estructura de la columna

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

Índice Z

Agregue también un índice az para esta fila.

• Índice Z: 2

Agregar módulo de llamado a la acción a la columna

Agregar contenido

En esta fila, el único módulo que necesitamos es un módulo de llamada a la acción. Agregue el contenido de su elección.

Agregar enlace de botón

Junto con un enlace de botón.

Color de fondo

Luego, agregue un color de fondo blanco.

• Color de fondo: #ffffff

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto.

• Alineación de texto: izquierda
• Color del texto: oscuro

Configuración del texto del título

Diseñe también el texto del título.

• Fuente del título: Playfair Display
• Estilo de fuente del título: cursiva
• Tamaño del texto del título
  • Escritorio: 45px
  • Tableta: 40px
  • Teléfono: 35px
• Espaciado de letras de título: 1px

Configuración del texto del cuerpo

Además del cuerpo del texto.

• Fuente del cuerpo: Karla
• Altura de la línea del cuerpo: 2em

Configuración de botones

Luego, estiliza el botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 18px
• Color del texto del botón: # 000000
• Color de degradado 1: #ffffff
• Color de degradado 2: # ffdc91
• Tipo de degradado: lineal
• Posición inicial: 50%
• Posición final: 50%

• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Fuente del botón: Karla
• Estilo de fuente del botón: mayúsculas
• Mostrar botón: Sí

• Ubicación del icono del botón: Izquierda
• Mostrar solo el icono al pasar el mouse por el botón: No
• Acolchado superior: 10px
• Acolchado inferior: 10px
• Acolchado izquierdo: 15%
• Acolchado derecho: 15%

Dimensionamiento

También estamos modificando la configuración de tamaño en diferentes tamaños de pantalla.

• Ancho:
  • Escritorio: 65%
  • Tableta: 80%
  • Telefono: 100%
• Alineación del módulo: centro

Espaciado

A continuación, agregaremos algunos valores de margen y relleno personalizados a la configuración de espaciado.

• Margen superior:
  • Escritorio: -150px
  • Tableta: -50px
  • Teléfono: 0px
• Margen inferior: 50 px
• Relleno superior: 150 px
• Acolchado inferior: 150px

Sombra de la caja

Y completaremos la configuración del módulo agregando una sombra de cuadro sutil.

• Box Shadwo Blur Fuerza: 30px
• Color de sombra: rgba (0,0,0,0.11)

2. Aplicar efecto pegajoso a la fila

Fila abierta en la sección # 1

Ahora que hemos sentado las bases de nuestro diseño, es hora de aplicar el efecto adhesivo. Este efecto adhesivo nos ayudará a cambiar de estilo a medida que las personas se desplazan más allá del elemento. El elemento al que agregaremos nuestro efecto adhesivo es la fila de la primera sección que contiene la imagen.

Aplicar efecto pegajoso

Es importante asegurarse de que el límite de adherencia inferior esté establecido en la sección. Los puntos inicial y final de nuestra fila son los mismos que los de la sección, lo que garantiza que la fila no se vuelva pegajosa, sino que se apliquen estilos pegajosos. El desplazamiento de la parte superior adhesiva determina en qué punto comienza a tener lugar la transición. Si este valor fuera cero, por ejemplo, eso significaría que la parte superior del navegador tendría que tocar la parte superior de la fila para iniciar la transición. Al establecer el desplazamiento superior adhesivo en "300px", creamos esa transición antes.

• Posición adhesiva: adherirse a la parte superior
• Desplazamiento superior adhesivo: 300px
• Límite inferior pegajoso: sección
• Desplazamiento de elementos pegajosos circundantes: Sí
• Transición de estilos predeterminados y pegajosos: Sí

Asegúrese de que el desplazamiento superior sea igual por encima de la primera sección

Dado que hemos establecido el desplazamiento superior adhesivo en "300px", necesitamos el espacio en la parte superior de nuestra página para que eso suceda. Si está utilizando este diseño en algún lugar a la mitad de su página, no tiene que preocuparse por este paso. Sin embargo, si está utilizando este enfoque en la parte superior de su página, tendrá que modificar el desplazamiento superior adhesivo o agregar suficiente espacio en la parte superior. Agregaremos un margen superior a nuestra primera sección para generar ese espacio.

• Margen superior: 400 px

3. Aplicar el efecto Ken Burn al módulo de imagen

Ahora que nuestra fila se ha vuelto pegajosa, podemos comenzar a aplicar estilos pegajosos a la fila y a todos sus elementos secundarios. Aunque las posibilidades son infinitas, te mostramos dos ejemplos diferentes y cómo lograrlos. Para que sea más fácil jugar con los dos ejemplos diferentes, clonaremos ambas secciones una vez y las colocaremos debajo de las primeras.

Ejemplo 1

Configuración de fila adhesiva

Sombra de la caja

Para recrear el ejemplo n. ° 1, que pudo ver en la vista previa de esta publicación, abra la configuración de fila y aplique la siguiente configuración de sombra de cuadro:

• Posición vertical de la sombra del cuadro: 0px
• Fuerza de propagación de la sombra de caja: 0px
• Color de sombra: rgba (0,0,0,0)

• Posición vertical fija: 100 px
• Color de sombra pegajosa: # ffdc91

Transición

Incluya también una transición suave en la pestaña avanzada.

• Duración de la transición: 500 ms
• Curva de velocidad de transición: facilidad

Configuración del módulo de imagen fija

Transformar escala

A continuación, abra el Módulo de imagen y aplique un efecto de escala de transformación en un estado pegajoso.

• Ambos: 100%

• Pegajoso ambos: 130%

Transición

Asegure una transición suave modificando la configuración de transición del módulo en consecuencia:

• Duración de la transición: 1200ms
• Curva de velocidad de transición: facilidad

Ejemplo # 2

Configuración de fila adhesiva

Transformar Traducir

¡Pasemos al segundo ejemplo! Abra la configuración de la fila y aplique la siguiente configuración de traducción de transformación:

• Derecha: 20%

• Adhesivo a la derecha: 0%

Transición

Modifique también la configuración de transición de la fila.

• Duración de la transición: 500 ms
• Curva de velocidad de transición: facilidad

Configuración del módulo de imagen fija

Filtros

Luego, abra el Módulo de imagen y juegue con los filtros en estado predeterminado y fijo.

• Saturación: 0%
• Brillo: 50%

• Saturación pegajosa: 100%
• Brillo pegajoso: 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: facilidad

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con las opciones pegajosas de Divi. Más específicamente, le mostramos cómo activar transiciones de imágenes. Tan pronto como las personas se desplazan más allá de la imagen, los estilos de la imagen cambian, lo que da como resultado una hermosa transición. Hemos manejado dos ejemplos diferentes, pero las posibilidades son infinitas. ¡También pudo 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 aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.