Cómo crear un collage de imágenes interactivo usando las opciones de posición de Divi

Las nuevas opciones de posición de Divi abren la puerta para crear diseños de collage de imágenes únicos utilizando la propiedad de posición absoluta. Esto le permite realizar ubicaciones más precisas para cada elemento de su diseño. Y una vez que combine eso con las innumerables combinaciones de configuraciones de diseño dentro de Divi, puede diseñar algunos collages de imágenes bastante sorprendentes.

En este tutorial, le mostraré cómo usar las opciones de posición integradas de Divi para crear un hermoso collage de imágenes interactivo para su sitio web Divi en minutos.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño de collage de imágenes interactivo que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos en el diseño del collage de imágenes 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 a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON al 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.

Creación del collage de imágenes interactivo con las opciones de posición de Divi

Optimización de la fila y la columna

Para empezar, cree una fila de una columna.

Configuración de filas

A continuación, debemos actualizar la fila para que no tengamos ningún espacio adicional entre los módulos (a través del ancho de la canaleta), por lo que estableceremos el ancho de la canaleta en 1. También debemos asegurarnos de que la fila abarque todo el ancho de la ventana del navegador. para que podamos aprovechar las unidades de longitud de vw para posicionar nuestras imágenes (la unidad de longitud de vw (ancho de la ventana gráfica) está relacionada con el ancho de la ventana del navegador). Con el ancho establecido en 100%, podemos usar unidades de longitud de vw para colocar nuestras imágenes dentro de la fila / columna de modo que la posición permanezca intacta en todos los anchos de navegador para un diseño receptivo sin problemas. Y para ocultar cualquier desbordamiento de imagen fuera de la fila, debemos configurar el desbordamiento en oculto.

Para hacer esto, optimice la configuración de la fila de la siguiente manera:

Configuración de la altura de la columna

De forma predeterminada, la altura de la columna está determinada por la altura del contenido (o módulos Divi) que contiene. Los módulos Divi (como todos los divs en HTML) tendrán una posición estática de forma predeterminada, lo que significa que agregarán espacio / altura real a su columna principal porque está posicionado en el flujo normal de la página. Sin embargo, los módulos Divi que tienen una posición absoluta, se salen del flujo normal y no crearán espacio / altura real para la columna. Por esta razón, necesitamos agregar una altura específica para la columna para que luego podamos colocar las imágenes dentro de un espacio predeterminado.

Para hacer esto, abra la configuración de la fila y actualice la configuración de la columna agregando el siguiente CSS personalizado al elemento principal.

height: 40vw;

Debajo de la pestaña del teléfono, restaure la altura a su estado predeterminado, ya que también estamos cambiando las imágenes a una posición estática en el teléfono. Agregue el siguiente CSS personalizado a la pestaña del teléfono:

height: auto !important;

Agregar el texto del título

Con la altura de la columna establecida, podemos comenzar a agregar nuestros elementos de posición absoluta a la columna. Comencemos agregando un módulo de texto para el título de nuestro diseño de collage de imágenes.

Contenido del módulo de texto

Luego actualice el texto con el siguiente contenido:

<h2>Recent Work</h2>

Configuración del módulo de texto

Luego actualice la configuración del módulo de texto de la siguiente manera:

• Fuente del título 2: Limelight
• Alineación del texto del encabezado 2: centro
• Color del texto del encabezado 2: # 24005b
• Encabezado 2 Tamaño del texto: 5vw (escritorio y tableta), 50px (teléfono)
• Ancho: 100%
• Ancho máximo: 35vw (escritorio y tableta), 100% (teléfono)
• Posición: Absoluta (escritorio), Predeterminada (teléfono)
• Desplazamiento horizontal (escritorio): 35vw

Creación y posicionamiento de imágenes

Ahora que el título está en su lugar, creemos la primera imagen para nuestro collage de imágenes interactivo. La idea es crear el primero con todas las optimizaciones en su lugar para que podamos duplicarlo para que sea más fácil crear y posicionar el resto de imágenes para el collage.

Optimización de la primera imagen con efectos de desplazamiento, caja de luz y posicionamiento absoluto.

Primero, agregue un módulo de imagen debajo del módulo de texto.

Luego sube una imagen al módulo y elige la opción para abrir la imagen en una caja de luz. Ahora la imagen se mostrará en una caja de luz al hacer clic.

Escalar imagen al pasar el mouse

Además de la interacción de la caja de luz, agregue un efecto de desplazamiento que haga que la imagen se amplíe un poco. Para hacer esto, actualice la siguiente opción de transformación:

• Transformar escala (flotar): 115%

Posicionamiento absoluto con prioridad de índice Z al pasar el mouse

Para posicionar nuestra imagen, usaremos una posición absoluta con unidades de longitud vw. Actualice las opciones de posición de la siguiente manera:

En escritorio (y tableta)

• Posición: absoluta
• Ubicación: arriba a la izquierda
• Desplazamiento vertical: 5vw
• Desplazamiento horizontal: -2vw

En el teléfono

• Posición: Predeterminado

En vuelo estacionario

• Índice Z: 2

Diseño de imagen y configuración receptiva

Luego actualice lo siguiente:

• Alineación de imagen: izquierda (escritorio), centro (teléfono)
• Ancho: 75% (teléfono)
• Ancho máximo: 20vw (escritorio y tableta), 100% (teléfono)
• Margen (teléfono): 30px inferior
• Box Shadow: ver captura de pantalla
• Saturación: 0% (escritorio), 100% (desplazamiento)

Uso de la primera imagen como plantilla para crear y colocar rápidamente las otras imágenes

Una vez que se completa la primera imagen, es realmente fácil crear nuevas imágenes para construir el collage de imágenes interactivo. También es una poderosa herramienta de diseño porque podrá arrastrar las imágenes en su lugar y ajustar el tamaño mientras ve el diseño en tiempo real.

Aquí está el proceso ...

1. Duplique la imagen haciendo clic en el icono de duplicar. La imagen duplicada se colocará absolutamente en el mismo lugar directamente encima de la imagen que está duplicando.
2. Arrastre la imagen en su lugar. Dado que la imagen duplicada hereda la unidad de longitud vw de la imagen anterior, puede usar el icono de arrastre para colocar la imagen exactamente donde desea dentro de la fila.
3. Actualice la imagen con una nueva.
4. Ajuste el tamaño de la imagen con las opciones de tamaño integradas.

Aquí hay una ilustración de cómo se vería al crear la segunda imagen.

Lo bueno de este proceso es que la posición (compensaciones verticales y horizontales) se determinará cada vez que arrastre la imagen a su lugar. No es necesario actualizar las posiciones de compensación manualmente en la configuración.

Pero, para que pueda ver las compensaciones que usé para este ejemplo, las incluiré para cada imagen a continuación junto con los ajustes de tamaño.

Actualizaciones de la imagen n. ° 2

• Desplazamiento vertical: 10.06 vw
• Desplazamiento horizontal: 16,51 vw
• Ancho máximo: 18 vw

Actualizaciones de la imagen n. ° 3

• Desplazamiento vertical: 24,25 vw
• Desplazamiento horizontal: 7.13vw
• Ancho máximo: 20vw

Actualizaciones de la imagen 4

• Desplazamiento vertical: 17.69vw
• Desplazamiento horizontal: 31,91 vw
• Ancho máximo: 18vw

Actualizaciones de la imagen # 5

• Desplazamiento vertical: 12vw
• Desplazamiento horizontal: 46.82vw
• Ancho máximo: 15vw

Actualizaciones de la imagen # 6

• Desplazamiento vertical: 19.13vw
• Desplazamiento horizontal: 58.84vw
• Ancho máximo: 12vw

Imagen # 7 Actualizaciones

• Desplazamiento vertical: 28.24vw
• Desplazamiento horizontal: 54,2 vw
• Ancho máximo: 10vw

Imagen # 8 Actualizaciones

• Desplazamiento vertical: 32,5 vw
• Desplazamiento horizontal: 74.04vw
• Ancho máximo: 8vw

Actualizaciones de la imagen # 9

• Desplazamiento vertical: 1.01vw
• Desplazamiento horizontal: 75,5 vw
• Ancho: 27vw
• Ancho máximo: 27vw

Agregar imagen de fondo

Para un toque final, agregue una imagen de fondo a la sección y ¡listo!

Resultado final

Así es como se verá la galería de imágenes interactiva en el escritorio y la tableta. Observe los efectos de desplazamiento que llevan la imagen al frente, muestran la versión a todo color de la imagen y amplían la imagen. Luego puede hacer clic en la imagen para mostrar el efecto de caja de luz.

Aquí está el diseño en la pantalla del teléfono.

Cambio del punto de ubicación de las imágenes para diferentes diseños de diseño

Dado que las compensaciones para cada una de las imágenes son relativas al punto de ubicación, podemos cambiar el punto de ubicación original de las imágenes para ver nuestro diseño proveniente de diferentes direcciones en segundos.

Para hacer esto, use la función de selección múltiple de Divi para seleccionar todos los módulos de imagen. Luego abra una de las configuraciones del módulo de imagen para que aparezca el modal de configuración del elemento.

Luego, puede cambiar la ubicación de cada una de las cuatro esquinas para diferentes estructuras del diseño.

Ubicación de la esquina superior derecha

Ubicación de la esquina inferior izquierda

Ubicación de la esquina inferior derecha

Pensamientos finales

Las nuevas opciones de posición de Divi son poderosas y convenientes. Y como hemos experimentado en este tutorial, nos brindan algunas herramientas de diseño maravillosas para diseñar diseños únicos para nuestras imágenes. Con suerte, este collage de imágenes interactivo le servirá de inspiración para su próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!