Cómo desplegar imágenes en el desplazamiento para promover una galería de imágenes en Divi

Saber cómo distribuir 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 por la página desplegando imágenes como una mano de cartas.

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

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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

Haga 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 desde su computadora.

Luego haga clic en el botón Importar.

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

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
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 tiene un título y un botón en la columna de la izquierda. En la segunda parte, agregaremos las imágenes en abanico a la columna de la derecha.

Configuración de la sección

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

• Acolchado: 10vw superior, 10vw inferior
• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar la fila

A continuación, agregue una nueva fila con una estructura de columna de un tercio de dos tercios.

Configuración de filas

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

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

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.

Contenido del texto

Agregue el siguiente encabezado H1 al contenido del cuerpo:

<h1>Our Gallery</h1>

Configuración de texto

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

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

Agregar el botón

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

Botón de texto

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

Configuración 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: 14px
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 121212
• Ancho del borde del botón: 0px
• Espaciado de letras de botones: 3px
• Fuente del botón: Montserrat
• Estilo de fuente del botón: TT
• Margen: 7vw superior

Parte 2: Creación de imágenes con el efecto de desplazamiento en abanico

En esta segunda parte del tutorial, crearemos las imágenes con el efecto de desplazamiento en abanico. Empezaremos por la imagen del medio. Estoy usando las imágenes del diseño prediseñado de la página de la galería de moda. Todos deben tener el mismo tamaño para lograr un diseño uniforme. Los que estoy usando son 400 px por 600 px.

Creando la Imagen del Medio

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

Luego sube una imagen al módulo.

Configuraciones de imagen

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

• Ancho máximo (tableta y teléfono): 200px
• Margen (tableta y teléfono): 0px a la izquierda

Creando la imagen del medio a la derecha

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

Configuraciones de imagen

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

Posición

• Posición: Absoluto

Transformar el origen

• Transformar origen: centro inferior

Efectos de desplazamiento

En Movimiento horizontal, actualice lo siguiente:

• Habilitar movimiento horizontal: SÍ
• Desplazamiento inicial: 0 (al 20%)
• Desplazamiento medio: 0,5 (al 50%)
• Desplazamiento final: 0,5 (al 100%)

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%)

Creando la imagen correcta

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

Actualizar efectos de desplazamiento

En Movimiento horizontal, actualice lo siguiente:

• Desplazamiento medio: 1
• Desplazamiento final: 1

En Rotación, actualice lo siguiente:

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

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 están desplegando como una mano de naipes.

Etiquetar imágenes en el cuadro de capas

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

Creación de la imagen del medio a la izquierda

Para crear la imagen del medio a la izquierda, podemos duplicar la imagen del medio a la derecha.

Luego, arrástrelo sobre la imagen del medio hasta la parte superior de la columna.

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:

En movimiento horizontal ...

• Desplazamiento medio: -0,5
• Desplazamiento final: -0,5

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

En rotación…

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

Creando la imagen de la izquierda

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

También puede actualizar la etiqueta.

Actualizar efectos de desplazamiento

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

Bajo movimiento horizontal:

• Desplazamiento medio: -1
• Desplazamiento final: -1

En rotación…

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

Columna 1 Índice Z

En este momento, las imágenes de la columna a se superpondrán al 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

Agregar nuevas imágenes y filtros

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

Para un efecto único, agregue los siguientes filtros a todas las imágenes (usando selección múltiple) excepto la imagen de la derecha.

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

Resultado

Aquí está el resultado hasta ahora ...

Rotar la columna

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

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

• Transformar Girar Eje Z: 40 grados

Resultado final

Aquí esta el resultado final.

Escritorio

Tableta

Teléfono

Pensamientos finales

En este tutorial, aprendimos cómo desplegar imágenes usando los efectos de desplazamiento de Divi, ¡pero no tienes que detenerte allí! Puede usar fácilmente esta misma técnica para desplegar cualquier colección de módulos (estoy pensando en anuncios publicitarios). Limité la distancia de desplazamiento con los efectos de desplazamiento de cada imagen para que el diseño no sea realmente funcional (es decir, no se pueden ver todas las imágenes en su totalidad). Sin embargo, puede aumentar las compensaciones para que las imágenes sean más visibles si lo desea.

Espero tener noticias tuyas en los comentarios.

¡Salud!