Cómo crear un intercambio de imágenes en desplazamiento con Divi

Abr 7, 2020 | Tutoriales para Divi

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

intercambio de imágenes

Móvil

intercambio de imágenes

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.

intercambio de imágenes

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

intercambio de imágenes

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%

intercambio de imágenes

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)

intercambio de imágenes

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

intercambio de imágenes

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.

intercambio de imágenes

Color de fondo

Luego, vaya a la configuración de fondo y cambie el color de fondo.

  • Color de fondo: # b3485e

intercambio de imágenes

Dimensionamiento

Habilite la opción ‘Forzar ancho completo’ en la siguiente configuración de tamaño.

  • Forzar ancho completo: sí

intercambio de imágenes

Espaciado

Y complete la configuración del módulo agregando un poco de relleno superior e inferior.

  • Relleno superior: 100px
  • Relleno inferior: 100px

intercambio de imágenes

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.

intercambio de imágenes

Cambiar imágenes

Cambie la imagen en cada módulo de imagen duplicado.

intercambio de imágenes

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

intercambio de imágenes

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.

intercambio de imágenes

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

intercambio de imágenes

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.

intercambio de imágenes

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

intercambio de imágenes

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.

intercambio de imágenes

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

intercambio de imágenes

  • Fuente del botón: Anton

intercambio de imágenes

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

intercambio de imágenes

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

intercambio de imágenes

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

intercambio de imágenes

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

intercambio de imágenes

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%

intercambio de imágenes

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

intercambio de imágenes

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!

intercambio de imágenes

  • Para: todas las imágenes
  • En todo momento: esta columna

intercambio de imágenes

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Pin It on Pinterest

Share This