Cómo activar transiciones de imagen con las opciones adhesivas de Divi

Avance

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

Escritorio

Móvil

Descarga el diseño 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

1. Pasos generales

Añadir Sección #1

Espaciado

En la primera parte del tutorial, construiremos la base de nuestro diseño. Una vez que esté en su lugar, podemos concentrarnos 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
• Relleno 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

Elimine todo el relleno superior e inferior predeterminado a continuación.

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

Índice Z

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

• Índice Z: 1

Desbordamientos de columna

A continuación, abra la configuración de la columna y configure los desbordamientos como ocultos.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar módulo de imagen a la columna

Dejar 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: 150 px
• Acolchado inferior:
  
  • Escritorio: 300px
  • Tableta y teléfono: 150 px

Añadir Sección #2

Espaciado

Agregue 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 el índice z para esta fila también.

• Índice Z: 2

Agregar módulo de llamada 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. Añade el contenido de tu elección.

Añadir enlace de botón

Junto con un botón de enlace.

Color de fondo

Luego, agregue un color de fondo blanco.

• Color de fondo: #ffffff

Configuración de texto

Pase 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

Dale estilo al texto del título también.

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

Configuración del texto del cuerpo

Así como el cuerpo del texto.

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

Configuración de botones

Luego, diseñe 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 degradado 1: #ffffff
• Color degradado 2: #ffdc91
• Tipo de gradiente: 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
• Botón Mostrar: Sí

• Ubicación del icono del botón: Izquierda
• Solo mostrar icono al pasar el mouse sobre el botón: No
• Relleno superior: 10px
• Relleno inferior: 10px
• Relleno izquierdo: 15%
• Relleno Derecho: 15%

Dimensionamiento

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

• Ancho:
  
  • Escritorio: 65%
  • Tableta: 80%
  • Teléfono: 100%
• Alineación del módulo: Centro

Espaciado

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

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

Sombra de la caja

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

• Caja Shadwo Fuerza de desenfoque: 30px
• Color de sombra: rgba(0,0,0,0.11)

2. Aplicar efecto pegajoso a la fila

Abrir Fila en la Sección #1

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

Aplicar efecto pegajoso

Es importante asegurarse de que el límite fijo 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, pero se aplican estilos pegajosos. El desplazamiento superior pegajoso determina en qué punto comienza a tener lugar la transición. Si este valor fuera cero, por ejemplo, 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 de la parte superior adhesiva en «300 px», creamos esa transición antes.

• Posición pegajosa: Stick to Top
• Desplazamiento superior fijo: 300 px
• Límite pegajoso inferior: Sección
• Desplazamiento de los elementos pegajosos circundantes: Sí
• Estilos predeterminados y fijos de transición: Sí

Asegúrese de que haya un desplazamiento superior igual a la primera sección

Como hemos establecido el desplazamiento de la parte superior adhesiva en «300 px», 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 de la parte superior adhesiva o agregar suficiente espacio en la parte superior. Agregaremos un margen superior a nuestra primera sección para generar ese espacio.

• Margen superior: 400px

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

Ahora que nuestra fila se ha convertido en fija, podemos comenzar a aplicar estilos fijos 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

Ajustes de fila fija

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 del cuadro: 0px
• Color de sombra: rgba(0,0,0,0)

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

Transición

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

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

Configuración del módulo de imagen adhesiva

Escala de transformación

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

• 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

Ajustes de fila fija

Transformar Traducir

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

• Derecha: 20%

• Pegajoso a la derecha: 0%

Transición

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

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

Configuración del módulo de imagen adhesiva

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: 500ms
• 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 adhesivas de Divi. Más específicamente, le mostramos cómo desencadenar transiciones de imagen. 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 de forma gratuita! 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 regalos de Divi, 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 los beneficios de este contenido gratuito.