Crear un diseño interactivo tiene muchas ventajas. Uno de ellos es el hecho de que puede colocar más contenido visual dentro de una sola sección y determinar cómo se muestra el contenido visual mientras los visitantes se desplazan. Eleva la experiencia general del usuario que los visitantes tienen en su sitio web y lleva sus esfuerzos de diseño web al siguiente nivel. En el tutorial de hoy, le mostraremos cómo crear un intercambio de imágenes al desplazarse utilizando Divi y sus nuevos efectos de desplazamiento. Veremos un cambio entre cuatro imágenes diferentes. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el diseño de efecto de intercambio de imagen en desplazamiento GRATIS
Para poner sus manos en el intercambio de imágenes en el diseño del efecto de desplazamiento, primero deberá descargarlo 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.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Crear estructura de elementos
Agregar nueva sección regular
Comience agregando una nueva sección regular a la página en la que está trabajando.
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique el tamaño de la fila de la siguiente manera:
- Ancho: 100%
- Ancho máximo: 100%
Configuración de la columna 1
Espaciado
Luego, abra la configuración de la columna 1 y modifique los valores de espaciado en diferentes tamaños de pantalla.
- Relleno superior: 50 px (escritorio), 0 px (tableta y teléfono)
- Relleno inferior: 50 px (escritorio), 120 % (tableta), 140 % (teléfono)
Configuración de la columna 2
Espaciado
Agregue algo de relleno a la segunda columna también.
- Acolchado superior: 12vw
- Acolchado inferior: 12vw
- Acolchado izquierdo: 5vw
- Acolchado derecho: 5vw
Agregar módulo de imagen a la columna 1
Subir imagen con fondo transparente
Es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Cargue una imagen de producto con una proporción de 1:1 y un fondo transparente.
Color de fondo
Luego, vaya a la configuración de fondo y cambie el color de fondo.
- Color de fondo: #b3485e
Dimensionamiento
Habilite la opción ‘Forzar ancho completo’ en la configuración de tamaño a continuación.
- Forzar ancho completo: Sí
Espaciado
Y complete la configuración del módulo agregando un poco de relleno superior e inferior.
- Relleno superior: 100px
- Relleno inferior: 100px
Clonar módulo de imagen 3x
Una vez que haya completado el primer módulo de imagen en la columna 1, puede clonar el módulo completo tres veces.
Cambiar imágenes
Cambie la imagen en cada módulo de imagen duplicado.
Cambiar colores de fondo
Y combine las nuevas imágenes con los colores de fondo de su elección.
- Color de fondo 1: #ffda60
- Color de fondo 2: #e6674d
- Color de fondo 3: #b4ff99
Agregue el Módulo de Texto #1 a la Columna 2
Agregar contenido H2
Vamos a la segunda columna. Allí, el primer módulo que necesitamos es un módulo de texto que contenga algo de contenido H2.
Configuración de texto H2
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H2 de la siguiente manera:
- Encabezado 2 Fuente: Anton
- Título 2 Color del texto: #000000
- Título 2 Tamaño del texto: 4vw (Escritorio), 8vw (Tableta), 10vw (Teléfono)
- Encabezado 2 Altura de línea: 1,4 em
Agregue el Módulo de Texto #2 a la Columna 2
Agregar contenido
Agregue otro módulo de texto justo debajo del anterior e ingrese algún contenido de descripción de su elección.
Configuración de texto
Pase a la pestaña de diseño y realice algunos cambios en la configuración del texto.
- Fuente de texto: Open Sans
- Tamaño del texto: 0.9vw (Escritorio), 2vw (Tableta), 2.5vw (Teléfono)
- Altura de línea de texto: 2,6 em
Agregar copia
El siguiente y último módulo que necesitamos en la columna 2 es un módulo de botones. Introduzca alguna copia de su elección.
Configuración de botones
Luego, diseñe el botón en consecuencia:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 20px
- Color del texto del botón: #ffffff
- Color de fondo del botón: #000000
- Ancho del borde del botón: 0px
- Radio del borde del botón: 100px
- Fuente del botón: Anton
Espaciado
Agregue también algunos valores de relleno personalizados a la configuración de espaciado.
- Relleno superior: 50px
- Relleno inferior: 50px
- Relleno izquierdo: 33px
- Relleno derecho: 33px
2. Aplicar efectos de desplazamiento a las imágenes
Módulo de imagen #1 Aparición y desaparición gradual
Una vez que haya completado los módulos en ambas columnas, es hora de aplicar los efectos de desplazamiento . Los efectos de desplazamiento que agregamos son diferentes para cada uno de los cuatro módulos de imagen en la columna 1. Hemos ajustado la configuración para que una imagen aparezca después de la otra. Abra el primer módulo de imagen y use el siguiente efecto de desplazamiento de entrada y salida:
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 100%
- Opacidad media: 100% (de 0% a 39%)
- Opacidad final: 0% (al 40%)
- Disparador de efecto de movimiento: medio del elemento
Módulo de imagen #2 Aparición y desaparición gradual
Luego, abra la segunda imagen y use la configuración de aparición y desaparición gradual:
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 0% (al 40%)
- Opacidad media: 100% (del 40% al 49%)
- Opacidad final: 0% (al 50%)
- Disparador de efecto de movimiento: medio del elemento
Módulo de imagen n.º 3 Aparición y desaparición gradual
Agregue un efecto de desplazamiento de entrada y salida gradual al tercer módulo de imagen también.
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 0% (al 50%)
- Opacidad media: 100% (del 50% al 59%)
- Opacidad final: 0% (al 60%)
- Disparador de efecto de movimiento: medio del elemento
Módulo de imagen #4 Aparición y desaparición gradual
Y complete los efectos de desplazamiento agregando el siguiente efecto de desplazamiento de aparición y desaparición gradual al último módulo de imagen en su columna:
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 0% (al 60%)
- Opacidad media: 100% (del 60% al 100%)
- Opacidad final: 100%
3. Agregue la configuración de posición a la primera imagen y expanda a todas las imágenes en la columna
Añadir Posición Absoluta al Módulo de Imagen #1
Ahora, para asegurarnos de que las imágenes aparezcan una detrás de la otra mientras se desplaza, necesitaremos colocar los módulos de imagen uno encima del otro usando las opciones de posición de Divi . Abra el primer módulo de imagen, vaya a la pestaña avanzada y use una posición absoluta.
- Posición: Absoluta
- Ubicación: Arriba a la izquierda
Extender la configuración de posición a todas las imágenes en la columna
Continúe extendiendo los estilos de posición a cada módulo de imagen en la columna y ¡listo!
- Para: Todas las imágenes
- A lo largo de: esta columna
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 crear un intercambio de imágenes en el desplazamiento. Esta técnica le permite cambiar entre múltiples imágenes en su sección mientras los visitantes se desplazan hacia abajo en la página. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta, 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.