Cómo crear un collage interactivo de fotografías con Divi

Las nuevas opciones de posición de Divi abren la puerta para crear diseños únicos de collage de imágenes 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 combina 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 interactivas para su sitio web Divi en minutos.

Vistazo

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

Lo que necesitas para empezar

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.

Crear el collage interactivo de imágenes con las opciones de posición de Divi

Optimizando la fila y la columna

Para comenzar, cree una fila de una columna.

Configuración de fila

A continuación, debemos actualizar la fila para que no tengamos espacio adicional entre los módulos (a través del ancho de la canaleta), así 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 vw para posicionar nuestras imágenes (la unidad de longitud 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 vw para colocar nuestras imágenes dentro de la fila / columna de modo que la posición permanezca intacta en todos los anchos del navegador para un diseño receptivo sin interrupciones. Y para ocultar cualquier desbordamiento de imagen fuera de la fila, necesitamos establecer el desbordamiento en oculto.

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

Establecer altura de columna

Por defecto, 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 por defecto, lo que significa que agregarán espacio / altura real a su columna principal porque está posicionada en el flujo normal de la página. Sin embargo, los módulos Divi que tienen una posición absoluta, rompen el flujo normal y no crean 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.

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:

Agregar el texto del título

Con la altura de columna establecida, podemos comenzar a agregar nuestros elementos posicionados absolutos 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:

Configuración del módulo de texto

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

• Título 2 Fuente: Limelight
• Encabezado 2 Alineación de texto: centro
• Título 2 Color del texto: # 24005b
• Título 2 Tamaño del texto: 5vw (computadora de escritorio y tableta), 50 px (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

Crear y posicionar imágenes

Ahora que el título está en su lugar, creemos la primera imagen para nuestro collage interactivo de imágenes. La idea es crear la primera con todas las optimizaciones en su lugar para que podamos duplicarla para que sea más fácil crear y colocar el resto de las 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 cargue una imagen en el módulo y elija 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 desplazar

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 más. Para hacer esto, actualice la siguiente opción de transformación:

• Escala de transformación (desplazamiento): 115%

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

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

En el 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): fondo 30px
• Box Shadow: ver captura de pantalla
• Saturación: 0% (escritorio), 100% (pasar el mouse)

Uso de la primera imagen como plantilla para crear y posicionar 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 interactivo de imágenes. También es una poderosa herramienta de diseño porque podrá arrastrar las imágenes en su lugar y ajustar el tamaño mientras visualiza el diseño en tiempo real.

Aquí está el proceso …

1. Duplique la imagen haciendo clic en el icono duplicado. 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 usando las opciones de tamaño incorporadas.

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

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

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

Imagen # 2 Actualizaciones

• Desplazamiento vertical: 10.06 vw
• Desplazamiento horizontal: 16.51 vw
• Ancho máximo: 18 vw

Imagen # 3 Actualizaciones

• Desplazamiento vertical: 24.25vw
• Desplazamiento horizontal: 7.13vw
• Ancho Máx .: 20vw

Imagen # 4 Actualizaciones

• Desplazamiento vertical: 17.69vw
• Desplazamiento horizontal: 31.91vw
• Ancho máximo: 18vw

Imagen # 5 Actualizaciones

• Desplazamiento vertical: 12vw
• Desplazamiento horizontal: 46.82vw
• Ancho Máx .: 15vw

Imagen # 6 Actualizaciones

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

Imagen # 7 Actualizaciones

• Desplazamiento vertical: 28.24vw
• Desplazamiento horizontal: 54.2vw
• Ancho máximo: 10vw

Imagen # 8 Actualizaciones

• Desplazamiento vertical: 32.5vw
• Desplazamiento horizontal: 74.04vw
• Ancho máximo: 8vw

Imagen # 9 Actualizaciones

• Desplazamiento vertical: 1.01vw
• Desplazamiento horizontal: 75.5vw
• 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í se verá la galería de imágenes interactivas en computadoras de escritorio y tabletas. Observe los efectos de desplazamiento que llevan la imagen al frente, muestran la versión a todo color de la imagen y la escala a mayor tamaño. 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 los desplazamientos para cada una de las imágenes son relativos al punto de ubicación, podemos cambiar el punto de ubicación original para que las imágenes vean 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 a 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

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas