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

Cómo desplazar su galería de imágenes con un efecto de rompecabezas deslizante en Divi

Feb 11, 2020 | Tutoriales para Divi

Las galerías de imágenes son un destino favorito en la mayoría de los sitios web. Y, en muchos casos, puede ser mejor mantener esas galerías de imágenes felices y estáticas, permitiendo que las imágenes hagan su magia. Pero, agregar un efecto de desplazamiento de rompecabezas deslizante a una galería de imágenes (como haremos en este tutorial), puede darle un giro refrescante a un clásico atemporal.

En este tutorial, le mostraremos cómo crear un diseño simple que revele una galería de imágenes con un efecto de desplazamiento de rompecabezas deslizante en Divi. La clave es entender cómo el tamaño de las imágenes se relaciona con los valores de desplazamiento vertical y horizontal de cada efecto de desplazamiento para mover la imagen exactamente un punto. Pero una vez completado, el efecto de movimiento resultante es nítido y preciso, ya que ensambla y revela progresivamente una galería de imágenes de una manera única.

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.

Vistazo

Aquí hay un vistazo rápido al diseño de la galería de imágenes con el efecto de desplazamiento del rompecabezas deslizante que crearemos en este tutorial.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

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».
  4. Busque o recorte al menos 4 imágenes cuadradas que tengan idéntico alto y ancho. Para este tutorial, utilizaremos imágenes recortadas del paquete de diseño de cerámica que son exactamente 500 px por 500 px.

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

Construyendo la sección de encabezado

Para comenzar, construyamos una sección de encabezado rápido que notificará al usuario que se desplace hacia abajo de la página para ver la galería y con los increíbles efectos de desplazamiento.

Añadir fila

Agregue una fila de una columna a la sección predeterminada.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Agregar módulo de texto

Dentro de la columna / fila, agregue un nuevo módulo de texto.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

En la configuración de texto, actualice el contenido del cuerpo con lo siguiente:

01
<h1>Image Gallery</h1>

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Configuración del módulo de texto

En la pestaña de diseño, actualice el diseño del texto de la siguiente manera:

  • Fuente del encabezado: Roboto
  • Peso de la fuente del encabezado: negrita
  • Estilo de fuente de encabezado: TT
  • Encabezado de texto: centro
  • Tamaño del texto del encabezado: 50 px (escritorio), 40 px (tableta y teléfono)
  • Espacio entre letras de encabezado: 4px

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Añadir icono de módulo de publicidad

Después de que el texto esté en su lugar, agregue un nuevo módulo de publicidad debajo del módulo de texto.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Luego, retire todo el contenido predeterminado del título y el cuerpo y seleccione usar el icono de flecha hacia abajo.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Configuración de publicidad

Luego actualice la configuración de publicidad con un nuevo color y una animación de diapositiva repetida.

  • Color del icono: # ffb500
  • Estilo de animación: diapositiva
  • Dirección de animación: abajo
  • Intensidad de animación: 20%
  • Repetición de animación: bucle

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Acolchado de sección

Para dar espacio a la sección para desplazarse, actualice el relleno de la siguiente manera:

  • Acolchado: 20vh arriba, 50vh abajo

Aquí usamos la unidad de longitud vh que es relativa a la altura de la ventana del navegador para que el espaciado se ajuste de manera consistente en todos los tamaños de navegador.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Crear la galería de imágenes con efectos de desplazamiento

Ahora que nuestra sección de encabezado está completa, estamos listos para construir la galería de imágenes real con los efectos de desplazamiento del rompecabezas deslizante. La galería completa constará de tres filas de 4 imágenes / columnas en cada fila para hacer un total de 12 imágenes. Sin embargo, puede agregar fácilmente más filas e imágenes al diseño una vez que esté completo.

Construyendo la sección y la fila

Agregar nueva sección

Comencemos agregando una nueva sección regular debajo de la sección de encabezado.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Añadir fila

A continuación, agregue una fila de cuatro columnas a la sección.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Configuración de fila

En la configuración de la fila, actualice lo siguiente:

  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho máximo: 1200 px (escritorio), 600 px (tableta), 300 px (teléfono)

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Cómo el ancho de fila determina el tamaño de la imagen

El ancho de la fila es muy importante para este diseño porque dictará el ancho de cada una de las cuatro columnas. Una vez que establezcamos el ancho de la canaleta en 1, no habrá margen entre las imágenes. Y cuando establecemos el ancho máximo en 1200px, el diseño de cuatro columnas hará que cada una de las columnas / imágenes tenga exactamente 300px de ancho (1200px / 4 = 300px). Además, dado que cada una de las imágenes es cuadrada, sabemos que la altura de cada imagen también será de 300 px. No tenemos que mantenerlo así si no queremos. Por ejemplo, también podríamos elegir tener un diseño de tres columnas con imágenes de 400 px por 400 px. Conocer el ancho de la imagen (300px) y la altura (también 300px) serán clave para crear el efecto de desplazamiento más adelante.

Agregar las imágenes

Añadir imagen 1

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Imagen 1 Efectos de desplazamiento

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Cómo se relaciona el tamaño de la imagen con los desplazamientos del efecto de desplazamiento

Al usar el efecto de desplazamiento vertical y horizontal, es importante comprender qué representa el valor numérico ingresado. En este ejemplo, tenemos un desplazamiento de inicio de movimiento vertical de -3. Este -3 es en realidad -300px (o 300px hacia la parte inferior), que es el ancho de la imagen. Luego, el desplazamiento alcanza 0 (la posición original) a medida que el usuario se desplaza. Esto es lo que crea el efecto de desplazamiento que mueve la imagen sobre exactamente un bloque / imagen. El movimiento horizontal comienza en 3 (300 px desde la derecha) y se detiene en su posición predeterminada. Estos dos efectos se combinan para crear un efecto de desplazamiento único de dos partes.

Añadir imagen 2

Una vez que los efectos de desplazamiento se han agregado a la imagen 1. Agregue una nueva imagen a la columna 2.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Vamos a dejar esta imagen estática sin ningún efecto de desplazamiento.

Añadir imagen 3

Luego, agregue otro módulo de imagen a la columna 3 y actualice el módulo con una nueva imagen.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Imagen 3 Efectos de desplazamiento

En la configuración de imagen, actualice los siguientes efectos de desplazamiento:

Debajo de la pestaña Movimiento horizontal …

  • Habilitar movimiento horizontal: SÍ
  • Compensación de inicio: -3 (con 0% de ventana gráfica)
  • Desplazamiento medio: 0 (con una ventana gráfica del 15%)
  • Compensación final: 0 (al 100% de la ventana gráfica)

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Añadir imagen 4

Para crear la última imagen, copie la imagen 1 y péguela en la columna 4.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Cargue una nueva imagen dentro de la configuración de imagen.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Imagen 4 Efectos de desplazamiento

Luego actualice los siguientes efectos de desplazamiento:

Debajo de la pestaña Movimiento vertical …

  • Habilitar movimiento vertical: SÍ
  • Compensación de inicio: 3 (con 0% de ventana gráfica)
  • Desfase medio: 0 (con una ventana gráfica del 15% -28%)
  • Compensación de finalización: 0 (con una ventana gráfica del 40%)

Debajo de la pestaña Movimiento horizontal …

  • Habilitar movimiento horizontal: SÍ
  • Compensación de inicio: 3 (con 0% de ventana gráfica)
  • Desfase medio: 3 (con una ventana gráfica del 28%)
  • Compensación de finalización: 0 (con una ventana gráfica del 40%)

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Fila duplicada

Ahora que los efectos de desplazamiento de la imagen están completos para la primera fila, todo lo que tenemos que hacer es duplicar la fila para crear más imágenes y sus efectos de desplazamiento correspondientes. Para este ejemplo, dupliquemos la fila dos veces para crear un total de tres filas.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Reemplazar y reorganizar imágenes según sea necesario

Luego podemos mover las imágenes usando la función de arrastrar y soltar donde queramos. Aquí es donde puede ser creativo y ver cómo se desplazarán las imágenes. Y una vez que las imágenes están en su lugar, puede reemplazar el contenido del módulo de imagen con nuevas imágenes que se ajusten a las necesidades del sitio web.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Retoques finales

Visibilidad de sección

Dado que nuestras imágenes probablemente se extenderán fuera de la sección / ventana gráfica, ocultemos el desbordamiento para limpiarlo un poco. Abra la configuración de la sección y actualice lo siguiente:

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Acolchado de sección

Queremos que el efecto de desplazamiento vertical de la imagen superior (que se extiende sobre la sección) sea visible a pesar del desbordamiento oculto. Entonces, agreguemos el relleno superior e inferior igual a la altura de la imagen (300px).

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Resultado hasta ahora

En este momento podemos parar aquí si desea mantener el diseño de la galería sin ningún espacio entre las imágenes. Así es como se ve el resultado hasta ahora. Observe cuán bien se desplazan las imágenes vertical y horizontalmente exactamente un bloque / imagen.

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Agregar espacio entre imágenes

Debido a que hemos establecido el ancho de la canaleta en 1, ya no tenemos ningún margen entre nuestras columnas o imágenes. Para recrear un espacio similar, podemos agregar relleno a cada imagen. Esto nos permitirá crear el espacio que necesitamos sin comprometer la funcionalidad de los efectos de desplazamiento. Esto es posible porque al agregar relleno, la imagen no se agregará al ancho o la altura del contenedor de la imagen (para obtener más información sobre esto, lea sobre el tamaño del cuadro en Divi ). También puede tener un efecto similar usando bordes también.

Imagen 1 Relleno

Abra la configuración de la imagen 1 y actualice lo siguiente:

  • Relleno: 10 píxeles superior, 10 píxeles inferior, 10 píxeles izquierda, 10 píxeles derecha

galería de imágenes rompecabezas deslizante efecto de desplazamiento

Extienda el relleno a todas las imágenes

Antes de guardar, haga clic derecho en la opción de relleno y seleccione «Ampliar relleno». En la ventana emergente extender estilos, haga clic en el botón extender para extender ese relleno a todas las imágenes de la página.

galería de imágenes rompecabezas deslizante efecto de 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