Saber cómo desplegar imágenes con Divi y sus efectos de desplazamiento puede ser un elemento de diseño sutil e impresionante para ayudar a promocionar una galería de imágenes en una página de destino. La idea es involucrar a los usuarios mientras se desplazan hacia abajo en la página mostrando imágenes como una mano de naipes.
En este tutorial, vamos a crear un diseño de sección limpio para promocionar una galería de imágenes que incluye una colección de imágenes que se abren en abanico en el desplazamiento. Puede usar cualquier imagen que desee con este diseño y sería una buena adición a cualquier página de destino.
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
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:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás 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 crear 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 de abanico a la columna de la derecha.
Ajustes 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
Agregar la fila
A continuación, agregue una nueva fila con una estructura de columna de dos tercios y un tercio.
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 aterrizaje de Stationery Shop . 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:
|
01
|
<h1>Our Gallery</h1> |
Configuración de texto
Luego actualice la configuración de texto de la siguiente manera:
- Fuente del encabezado: Bellefair
- Alineación del texto del encabezado (tableta y teléfono): derecha
- Tamaño del texto del encabezado: 150 px (computadora de escritorio y tableta), 110 px (teléfono)
Debajo del módulo de texto, agregue un nuevo módulo de botón.
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 entre letras de botones: 3px
- Fuente del botón: Montserrat
- Estilo de fuente del botón: TT
- Margen: 7vw superior
Parte 2: Crear las imágenes con el efecto de desplazamiento de abanico
En esta segunda parte del tutorial, crearemos las imágenes con el efecto de desplazamiento de abanico. 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 de 400px por 600px.
Crear la imagen intermedia
Agregue un nuevo módulo de imagen a la columna de la derecha.
Luego cargue una imagen en el módulo.
Configuración de imagen
Actualice el ancho máximo y el margen para pantallas móviles de la siguiente manera:
- Ancho máximo (tableta y teléfono): 200 px
- Margen (tableta y teléfono): 0px restante
Creación de la imagen del medio derecho
Para crear la segunda imagen (o la imagen del medio a la derecha), duplique el primer módulo de imagen.
Configuración de imagen
Luego abra la configuración para el módulo de imagen duplicada y actualice lo siguiente:
Posición
- Posición: Absoluta
Transformar origen
- Transformar origen: centro inferior
Efectos de desplazamiento
En Movimiento horizontal, actualice lo siguiente:
- Habilitar movimiento horizontal: SÍ
- Compensación inicial: 0 (al 20 %)
- Compensación media: 0,5 (al 50 %)
- Compensación 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%)
Crear la imagen correcta
Para crear la tercera imagen que se desplegará hacia el extremo derecho, duplique la segunda imagen que creamos.
Actualizar efectos de desplazamiento
En Movimiento horizontal, actualice lo siguiente:
- Desplazamiento medio: 1
- Compensación 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á el mismo espacio entre las imágenes. Y debido a que la animación del efecto de desplazamiento se basa en el origen de transformación de la parte inferior central, dará la impresión de que las imágenes se abren en abanico como una mano de naipes.
Etiquetar imágenes en el cuadro de capas
Antes de crear las dos últimas imágenes, actualicemos las etiquetas de las imágenes actuales para que no nos confundamos.
Creación de la imagen central 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 :
Bajo movimiento horizontal…
- Desplazamiento medio: -0.5
- Compensación final: -0.5
NOTA: Todo lo que estamos haciendo es cambiar el valor de compensación a negativo.
En Girando…
- Rotación media: -20 grados
- Rotación final: -20 grados
Crear la imagen de la izquierda
Finalmente, creemos la imagen final de la izquierda duplicando la imagen de la derecha y arrastrándola a 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
- Compensación final: -1
En Girando…
- Rotación media: -40 grados
- Rotación final: -40 grados
Índice Z de la columna 1
En este momento, las imágenes en la columna 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
Adición de 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 a la imagen de la derecha.
- Saturación: 20%
- Opacidad: 85%
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 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 Rotar 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 ahí! 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 compensación 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). Pero puede aumentar las compensaciones para que las imágenes sean más visibles si lo desea.
Espero escuchar de usted en los comentarios.
¡Salud!