Crear un diseño interactivo tiene muchas ventajas. Uno de ellos es el hecho de que puede incluir 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 en el desplazamiento utilizando los nuevos efectos de desplazamiento de Divi. Veremos un cambio entre cuatro imágenes diferentes. ¡También podrás descargar el archivo JSON gratis!
Descargar el tutorial GRATIS
Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
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 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áx .: 100%
Configuración de 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: 50px (escritorio), 0px (tableta y teléfono)
- Acolchado inferior: 50 px (escritorio), 120% (tableta), 140% (teléfono)
Configuración de columna 2
Espaciado
Agregue algo de relleno a la segunda columna también.
- Relleno superior: 12vw
- Acolchado inferior: 12vw
- Acolchado izquierdo: 5vw
- Relleno 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 relación 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 siguiente configuración de tamaño.
- 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 imagen Módulo 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 que elija.
- Color de fondo 1: # ffda60
- Color de fondo 2: # e6674d
- Color de fondo 3: # b4ff99
Agregue el módulo de texto n. ° 1 a la columna 2
Añadir contenido H2
A la segunda columna. Allí, el primer módulo que necesitamos es un Módulo de texto que contenga contenido H2.
Configuraciones de texto H2
Pase a la pestaña de diseño del módulo y cambie la configuración del texto H2 de la siguiente manera:
- Título 2 Fuente: Anton
- Título 2 Color del texto: # 000000
- Encabezado 2 Tamaño del texto: 4vw (escritorio), 8vw (tableta), 10vw (teléfono)
- Título 2 Altura de línea: 1.4em
Agregue el módulo de texto n. ° 2 a la columna 2
Agregar contenido
Agregue otro módulo de texto justo debajo del anterior e ingrese el contenido de la descripción que elija.
Configuraciones 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 la línea de texto: 2.6em
Agregar módulo de botón a la columna 2
Agregar copia
El siguiente y último módulo que necesitamos en la columna 2 es un Módulo de botones. Ingrese una copia de su elección.
Configuraciones de botones
Luego, peina el botón como corresponda:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 20 px
- 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: 100 px
- Fuente del botón: Anton
Espaciado
Agregue algunos valores de relleno personalizados a la configuración de espaciado también.
- 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 desvaneciéndose hacia adentro y hacia afuera
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 hacer que una imagen aparezca después de la otra. Abra el primer módulo de imagen y use el siguiente efecto de desplazamiento de desvanecimiento para él:
- Habilitar el desvanecimiento de entrada y salida: Sí
- Opacidad inicial: 100%
- Media opacidad: 100% (de 0% a 39%)
- Opacidad final: 0% (al 40%)
- Activador de efecto de movimiento: medio del elemento
Módulo de imagen # 2 desvaneciéndose hacia adentro y hacia afuera
Luego, abra la segunda imagen y use la configuración de desvanecimiento de entrada y salida:
- Habilitar el desvanecimiento de entrada y salida: Sí
- Opacidad inicial: 0% (al 40%)
- Media opacidad: 100% (del 40% al 49%)
- Opacidad final: 0% (al 50%)
- Activador de efecto de movimiento: medio del elemento
Módulo de imagen # 3 desvaneciéndose hacia adentro y hacia afuera
Agregue también un efecto de desplazamiento de desvanecimiento hacia adentro y hacia el tercer Módulo de imagen.
- Habilitar el desvanecimiento de entrada y salida: Sí
- Opacidad inicial: 0% (al 50%)
- Media opacidad: 100% (de 50% a 59%)
- Opacidad final: 0% (al 60%)
- Activador de efecto de movimiento: medio del elemento
Módulo de imagen # 4 desvaneciéndose hacia adentro y hacia afuera
Y complete los efectos de desplazamiento agregando el siguiente efecto de desplazamiento de entrada y salida al último Módulo de imagen en su columna:
- Habilitar el desvanecimiento de entrada y salida: Sí
- Opacidad inicial: 0% (al 60%)
- Media opacidad: 100% (del 60% al 100%)
- Opacidad final: 100%
3. Agregue configuraciones de posición a la primera imagen y expanda a todas las imágenes en la columna
Agregar posición absoluta al módulo de imagen n. ° 1
Ahora, para asegurarnos de que las imágenes aparecen una tras otra durante el desplazamiento, necesitaremos colocar los Módulos de imagen uno encima del otro utilizando 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
- En todo momento: esta columna
