¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo desplegar un abanico de imágenes en desplazamiento con Divi

Jun 2, 2020 | Tutoriales para Divi

Saber cómo desplegar imágenes con los efectos de desplazamiento de Divi puede ser un elemento de diseño sutil e impresionante para ayudar a promover una galería de imágenes en una página de destino. La idea es involucrar a los usuarios a medida que se desplazan hacia abajo en la página desplegando imágenes como una mano de naipes.

En este tutorial, vamos a crear un diseño de sección limpia para promover una galería de imágenes que incluya una colección de imágenes que se desplieguen en desplazamiento. Puede usar cualquier imagen que desee con este diseño y sería una buena adición a cualquier página de destino.

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.

Para importar el diseño de sección a su Biblioteca Divi, navegue a la Biblioteca Divi.

Haz clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga de su computadora.

Luego haga clic en el botón Importar.

cuadro de notificación divi

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

pestañas de esquina expandibles

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  3. Elija la opción «Construir desde cero».

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1: Crear el diseño y el contenido simulado

Para esta primera parte del tutorial, vamos a construir el diseño de la sección con una fila de dos columnas que tenga un título y un botón en la columna izquierda. En la segunda parte, agregaremos las imágenes desplegadas a la columna derecha.

Configuraciones de sección

Antes de agregar algo al diseño, actualice la configuración de la sección predeterminada de la siguiente manera:

  • Acolchado: 10vw arriba, 10vw abajo
  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

desplegar imágenes en desplazamiento

Agregar la fila

Luego, agregue una nueva fila con una estructura de columna de dos tercios y un tercio.

desplegar imágenes en desplazamiento

Configuración de fila

Luego actualice la configuración de la fila con una imagen de fondo personalizada. Estoy usando uno del diseño prefabricado de la página de destino de la papelería . Después de eso, actualice lo siguiente:

  • Tamaño de imagen de fondo: tamaño real
  • Posición de la imagen de fondo: arriba a la izquierda
  • Ancho Máx .: 900px

desplegar imágenes en desplazamiento

Agregar el módulo de texto para crear el título

Una vez que la fila esté lista, agregue un nuevo módulo de texto a la columna 1 para crear el título.

desplegar imágenes en desplazamiento

Contenido del texto

Agregue el siguiente título H1 al contenido del cuerpo:

01
<h1>Our Gallery</h1>

desplegar imágenes en desplazamiento

Configuraciones de texto

Luego actualice la configuración de texto de la siguiente manera:

  • Fuente del encabezado: Bellefair
  • Encabezado de alineación de texto (tableta y teléfono): derecha
  • Tamaño del texto del encabezado: 150 px (escritorio y tableta), 110 px (teléfono)

desplegar imágenes en desplazamiento

Agregar el botón

Debajo del módulo de texto, agregue un nuevo módulo de botones.

desplegar imágenes en desplazamiento

Botón de texto

Actualice el texto del botón con «Ver galería».

desplegar imágenes en desplazamiento

Configuraciones de botones

En la pestaña de diseño, actualice lo siguiente:

  • Alineación (tableta y teléfono): derecha
  • Tamaño del texto del botón: 14 px
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # 121212
  • Ancho del borde del botón: 0px
  • Espacio entre letras de botones: 3px
  • Fuente del botón: Montserrat
  • Estilo de fuente del botón: TT
  • Margen: 7vw arriba

desplegar imágenes en desplazamiento

Parte 2: crear las imágenes con el efecto de desplazamiento desplegado

En esta segunda parte del tutorial, crearemos las imágenes con el efecto de desplazamiento desplegado. Comenzaremos con la imagen del medio. Estoy usando las imágenes del diseño prefabricado de la página de la galería de moda . Deben ser todos del mismo tamaño para un diseño consistente. Los que estoy usando son 400px por 600px.

Crear la imagen del medio

Agregue un nuevo módulo de imagen a la columna derecha.

desplegar imágenes en desplazamiento

Luego cargue una imagen al módulo.

desplegar imágenes en desplazamiento

Configuraciones de imagen

Actualice el ancho y margen máximos para pantallas móviles de la siguiente manera:

  • Ancho máximo (tableta y teléfono): 200 px
  • Margen (tableta y teléfono): 0 píxeles restantes

desplegar imágenes en desplazamiento

Crear la imagen de la derecha media

Para crear la segunda imagen (o imagen central derecha), duplique el primer módulo de imagen.

desplegar imágenes en desplazamiento

Configuraciones de imagen

Luego abra la configuración para el módulo de imagen duplicada y actualice lo siguiente:

Posición
  • Posición: absoluta

desplegar imágenes en desplazamiento

Transformar Origen
  • Transformar Origen: centro inferior

desplegar imágenes en desplazamiento

Efectos de desplazamiento

En Movimiento horizontal, actualice lo siguiente:

  • Habilitar movimiento horizontal: SÍ
  • Compensación inicial: 0 (al 20%)
  • Desfase medio: 0.5 (al 50%)
  • Compensación de finalización: 0.5 (al 100%)

desplegar imágenes en desplazamiento

En Rotación, actualice lo siguiente:

  • Habilitar rotación: SÍ
  • Rotación inicial: 0 grados (al 20%)
  • Rotación media: 20 grados (al 50%)
  • Rotación final: 20 grados (al 100%)

desplegar imágenes en desplazamiento

Crear la imagen correcta

Para crear la tercera imagen que se desplegará en el extremo derecho, duplique la segunda imagen que creamos.

desplegar imágenes en desplazamiento

Actualizar efectos de desplazamiento

En Movimiento horizontal, actualice lo siguiente:

  • Desfase medio: 1
  • Compensación de finalización: 1

desplegar imágenes en desplazamiento

En Rotación, actualice lo siguiente:

  • Rotación media: 40 grados
  • Rotación final: 40 grados

desplegar imágenes en desplazamiento

Si no lo ha notado, esencialmente estamos aumentando el desplazamiento horizontal en incrementos de 0.5 y el desplazamiento giratorio en incrementos de 20 grados con cada imagen. Esto creará un espacio igual entre las imágenes. Y debido a que la animación del efecto de desplazamiento se basa en el origen de transformación del centro inferior, dará la impresión de que las imágenes se despliegan como una mano de naipes.

Etiquetar imágenes en el cuadro Capas

Antes de crear las dos últimas imágenes, actualice las etiquetas de las imágenes actuales para que no nos confundamos.

desplegar imágenes en desplazamiento

Crear la imagen del medio izquierdo

Para crear la imagen central izquierda, podemos duplicar la imagen central derecha.

desplegar imágenes en desplazamiento

Luego arrástrelo por encima de la imagen central hasta la parte superior de la columna.

desplegar imágenes en desplazamiento

También puede actualizar esa etiqueta de imagen.

Actualizar efectos de desplazamiento

Abra la configuración de la imagen central izquierda y actualice los siguientes efectos de desplazamiento:

Bajo movimiento horizontal …

  • Desfase medio: -0.5
  • Compensación de finalización: -0.5

NOTA: Todo lo que estamos haciendo es cambiar el valor de compensación a negativo.

desplegar imágenes en desplazamiento

Bajo rotación …

  • Media rotación: -20 grados
  • Rotación final: -20 grados

desplegar imágenes en desplazamiento

Crear la imagen izquierda

Finalmente, creemos la imagen final izquierda duplicando la imagen derecha y arrastrándola hasta la parte superior de la columna.

desplegar imágenes en desplazamiento

También puede actualizar la etiqueta también.

desplegar imágenes en desplazamiento

Actualizar efectos de desplazamiento

Abra la configuración de la imagen izquierda y actualice los efectos de desplazamiento:

Bajo movimiento horizontal:

  • Desfase medio: -1
  • Compensación de finalización: -1

desplegar imágenes en desplazamiento

Bajo rotación …

  • Rotación media: -40 grados
  • Rotación final: -40 grados

desplegar imágenes en desplazamiento

Columna 1 Índice Z

En este momento, las imágenes de la columna se superpondrán con el contenido de la columna 1. Para cambiar esto, abra la configuración de la columna 1 y actualice el índice z de la siguiente manera:

  • Índice Z: 10

desplegar imágenes en desplazamiento

Agregar nuevas imágenes y filtros

Ahora, todo lo que tenemos que hacer es actualizar cada una de las imágenes con nuevas / diferentes.

desplegar imágenes en desplazamiento

Para un efecto único, agregue los siguientes filtros a todas las imágenes (usando multiselección) excepto la imagen correcta.

  • Saturación: 20%
  • Opacidad: 85%

desplegar imágenes en desplazamiento

Resultado

Aquí está el resultado hasta ahora …

Rotando la columna

Para cambiar un poco el diseño, podemos rotar la colección de imágenes girando la columna principal.

Para hacer esto, abra la configuración de la columna 2 y agregue la siguiente opción de transformación:

  • Transformar Rotar Eje Z: 40 grados

desplegar imágenes en desplazamiento

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

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This