Cómo diseñar y colocar imágenes en lugares abstractos en Divi

Vistazo

Aquí hay un adelanto de los diseños que construiremos en este tutorial.

Descargue los ejemplos de diseño de este tutorial GRATIS

Para poner sus manos en estos diseños de ejemplo, primero deberá descargarlos 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.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.

Ahora vamos al tutorial, ¿de acuerdo?

Primeros pasos

Para comenzar, asegúrese de tener el tema Divi instalado y activo. Luego cree una nueva página e implemente Divi Builder en la parte delantera. Elija la opción «Construir desde cero».

¡Ahora estás listo para diseñar!

Colocación de imágenes parcialmente fuera de la ventana gráfica (a la derecha o a la izquierda)

En este primer ejemplo, le mostraré cómo colocar imágenes parcialmente fuera de la ventana gráfica. Esta es una buena manera de agregar más de una pantalla abstracta para sus imágenes que funcionará de manera muy similar a una imagen de fondo personalizada para su contenido. Luego puede diseñar la imagen para diseños aún más únicos.

Aquí está cómo hacerlo.

Crear y aplicar estilo al módulo de texto

Primero vamos a crear un módulo de texto que servirá como contenido principal de nuestra sección.

Si aún no lo ha hecho, cree una sección regular con una fila de una columna. Luego agregue el módulo de texto a la fila.

Actualice el contenido para incluir lo siguiente:

Luego actualice la configuración de diseño de la siguiente manera:

Fuente del texto:

Título 2 de Raleway Fuente: Título

2 de Raleway Peso de la fuente: Título

2 en negrita Tamaño del texto: 44 px (escritorio), 24 px (teléfono)

Ancho: 680 px (escritorio), 60 % (tableta), 80 % (teléfono)

Relleno personalizado: 10% arriba, 10% abajo, 10% izquierda, 5% derecha

Agregar imagen #1

Ahora estamos listos para agregar la primera imagen. Continúe y agregue un módulo de imagen directamente encima del módulo de texto.

Luego sube tu imagen al módulo de imagen. Asegúrese de que la imagen sea lo suficientemente grande para que no pierda calidad cuando la ampliemos usando la propiedad de transformación. Estoy usando una imagen de 400 por 580 píxeles.

A continuación, baje el ancho del módulo de imagen y alinéelo a la izquierda de la siguiente manera:

Ancho: 5%

Alineación del módulo: izquierda

Reducir el módulo de imagen de esta manera inicialmente nos permite reducir el espacio negativo del diseño. De esta manera no tenemos que ajustar el espaciado usando márgenes negativos.

Ahora podemos ampliar la imagen usando las opciones de transformación de la siguiente manera:

Eje X de escala de transformación: 416 %

Eje Y de escala de transformación: 416 %

Luego podemos posicionar la imagen usando la transformación traducir de la siguiente manera:

Transformar Trasladar eje X: -36 %

Transformar Trasladar eje Y: 41 %

Por último, puede rotar la imagen usando transformar rotar:

Transformar Rotar eje Z: 11 grados

Ahora estamos listos para agregar la segunda imagen. Continúe y agregue un módulo de imagen directamente debajo del módulo de texto.

Luego cargue una nueva imagen en el módulo de imágenes.

A continuación, baje el ancho del módulo de imagen y alinéelo a la izquierda de la siguiente manera:

Ancho: 10%

Alineación del módulo: izquierda

El Ancho no tiene que ser exactamente del 10%. Todo lo que desea hacer es encoger el módulo lo suficiente para que no ocupe demasiado espacio vertical en el diseño.

Luego actualice las opciones de transformación de la siguiente manera:

Eje X de escala de transformación: 464 %

Eje Y de escala de transformación: 464 %

Transformar Trasladar eje X: 7%

Transformar Trasladar eje Y: -80%

Transformar Rotar eje Z: -10 grados

Luego agregue una sombra de cuadro para un elemento de diseño adicional.

Sombra de cuadro: ver captura de pantalla

Posición horizontal de sombra de cuadro: -20 px

Posición vertical de sombra de cuadro: -7 px

Asegurarse de que el módulo de texto permanezca en la parte superior

Queremos asegurarnos de que el módulo de texto se mantenga al tanto de las imágenes cada vez que comiencen a superponerse en el dispositivo móvil. Esto asegura que las imágenes continúen sirviendo como imágenes de fondo en el diseño.

Para hacer esto, abra el módulo de texto y agregue el siguiente CSS personalizado al elemento principal:

Elemento principal CSS:

Luego establezca el índice Z en 1.

Ocultar el desbordamiento de la sección

Dado que tendremos imágenes que se extienden fuera de la sección de la página, el ancho de la ventana gráfica del navegador aumentará para acomodar el espacio adicional. Esto activará la barra de desplazamiento horizontal en la parte inferior del navegador. Para deshabilitar esto, deberá agregar un fragmento de CSS a la sección.

Abra la configuración de la sección y agregue el siguiente CSS personalizado al elemento principal:

Ahora mira el resultado final.

Crear un fondo de collage de imágenes abstractas para su encabezado

Para este próximo diseño, les mostraré cómo crear un collage abstracto de imágenes que servirán como fondo para un encabezado. Para hacer esto, usaremos la propiedad display flex para crear una fila de imágenes que podemos escalar y mover de manera creativa.

Aquí está cómo hacerlo.

Diseño del módulo de texto de encabezado

Primero, cree una nueva sección regular con una fila de una columna. Luego agregue un módulo de texto a la fila y actualice el siguiente contenido:

Luego actualice el diseño de la siguiente manera:

Color de fondo: rgba(0,0,0,0.07)

Texto Color del texto: #ffffff

Orientación del texto: Centro

Fuente del encabezado: Raleway

Peso de la fuente del encabezado: Negrita

Alineación del texto del encabezado: Derecha

Color del texto del encabezado: #ffffff

Tamaño del texto del encabezado: 44px (escritorio ), 34 px (tableta), 24 px (teléfono)

Ancho: 500 px (escritorio), 60 % (tableta), 80 % (teléfono)

Alineación del módulo: Centro

Acolchado personalizado: 5vw arriba, 5vw abajo, 1vw derecha

Ajustes de sección

Antes de agregar nuestras imágenes y construir el fondo del collage, personalicemos nuestra sección. Esto proporcionará nuestro lienzo para completar el resto del diseño.

Abra la configuración de la sección y actualice lo siguiente:

Color de fondo: #4c606d

Relleno personalizado (escritorio): 0 px arriba, 0 px abajo

Relleno personalizado (tableta): 20 px abajo

Relleno personalizado (teléfono): 40 px abajo

A continuación, agregue una sombra de cuadro interior en la parte inferior de la sección con un color que coincida con el fondo de la siguiente sección de la página (en este caso, será blanco). Esto nos permitirá crear el efecto de nuestras imágenes superpuestas en la parte inferior del encabezado en la siguiente sección (verás a lo que me refiero más adelante).

Sombra de cuadro: ver captura de pantalla

Posición horizontal de sombra de cuadro: 0px

Posición vertical de sombra de cuadro: -80px

Color de sombra: #ffffff

Y dado que moveremos imágenes fuera de la ventana de sección para nuestro collage, necesitaremos agregar el siguiente CSS al elemento principal.

Configuración de la fila 1

Ahora necesitamos agregar algo de relleno a la fila que contiene nuestro módulo de texto. También necesitamos agregar un índice z para mantener la sección encima de las imágenes que agregaremos a nuestra sección. De manera predeterminada, cada sección tiene un valor de índice z de 9. Entonces, todo lo que debemos hacer es agregar un índice z de 10 a la fila que queremos que permanezca en la parte superior.

Abra la configuración de la fila y actualice lo siguiente:

Acolchado personalizado: 10vw top

Índice Z: 10

Crear el collage de imágenes abstractas

En este punto la sección está lista para comenzar a agregar nuestras imágenes.

Para crear el collage de imágenes abstractas, agregaremos 5 imágenes a una fila de una columna y luego usaremos «display: flex» para alinear todas esas imágenes horizontalmente en la página. Esto es necesario para mantener las imágenes en su lugar (horizontalmente) en todos los tamaños de navegador. Si tuviéramos que usar un diseño tradicional de 5 columnas, las imágenes se dividen en diferentes diseños de columnas en diferentes dispositivos y rompen el diseño.

Después de eso, podremos diseñar y colocar nuestras imágenes una por una con opciones de transformación.

Agregar la fila de imágenes

Continúe y cree una nueva fila de una columna directamente debajo de la fila que contiene el módulo de texto.

Luego abra la configuración de la fila y actualice lo siguiente:

Ancho personalizado: 50 %

Ancho del canalón: 1

Y para alinear todos los módulos en esta fila horizontalmente, agregue el siguiente CSS al elemento principal de la columna:

Ahora, cuando agregue módulos de imagen a la fila, se alinearán horizontalmente.

Mire lo que sucede cuando duplico un módulo de imagen en la fila con display:flex add to the column.

Continúe y agregue 5 imágenes a la fila asegurándose de que sean lo suficientemente grandes para adaptarse al aumento de tamaño al escalar la imagen para el collage. Estoy usando imágenes que aparecen en nuestro paquete de diseño de mejoras para el hogar , que tienen aproximadamente 800 px de ancho y varían en altura. Las imágenes con diferentes dimensiones tienden a hacer un collage abstracto de mejor apariencia.

Posicionamiento de las imágenes con Transform Translate

Es hora de empezar a posicionar nuestras imágenes para crear nuestro collage.

Imagen #1

Abra la configuración para el primer módulo de imagen (extremo izquierdo) y actualice las opciones de transformación de la siguiente manera:

Eje X de escala de transformación: 266 %

Eje Y de escala de transformación: 266 %

Traslación de transformación: eje X: -68 %

Traslación de transformación: eje Y: -54 %

Imagen #2

Abra la configuración para el segundo módulo de imagen y actualice las opciones de transformación de la siguiente manera:

Eje X de escala de transformación: 184 %

Eje Y de escala de transformación: 184 %

Traslación de transformación: eje X: -36 %

Traslación de transformación: eje Y: -66 %

Imagen #3

Abra la configuración para el tercer módulo de imagen y actualice las opciones de transformación de la siguiente manera:

Eje X de escala de transformación: 206 %

Eje Y de escala de transformación: 206 %

Traslación de transformación: eje X: -51 %

Traslación de transformación: eje Y: -27 %

Imagen #4

Abra la configuración para el cuarto módulo de imagen y actualice las opciones de transformación de la siguiente manera:

Eje X de escala de transformación: 180 %

Eje Y de escala de transformación: 180 %

Traslación de transformación: eje X: 20 %

Traslación de transformación: eje Y: 42 %

Imagen #5

Abra la configuración del quinto módulo de imagen y actualice las opciones de transformación de la siguiente manera:

Eje X de escala de transformación: 290 %

Eje Y de escala de transformación: 290 %

Traslación de transformación: eje X: -50 %

Traslación de transformación: eje Y: 72 %

Agregar una sombra de cuadro a las imágenes

Para crear un elemento de diseño adicional, podemos agregar una sombra de cuadro a nuestras imágenes. Para hacer esto, active el modo de cuadrícula y use la función de selección múltiple para seleccionar todos los módulos de imagen. Luego abra la configuración de uno de los módulos de imagen para implementar el modal de configuración del elemento.

Luego actualice lo siguiente:

Sombra de cuadro: ver captura de pantalla

Posición horizontal de sombra de cuadro: -40px

Posición vertical de sombra de cuadro: 40px

Color de sombra: rgba(255,255,255,0.13)

Resultado final

Aquí está el resultado final del diseño.

Escritorio

Tableta

Teléfono

Pensamientos finales

Estos diseños de ejemplo deberían brindarle algo de inspiración sobre cómo diseñar y colocar imágenes en su sitio web de maneras que nunca pensó que fuera posible fuera de un software de edición de fotos. Una vez que aprenda a personalizar correctamente su diseño, las opciones de transformación de Divi pueden colocar imágenes en lugares únicos y abstractos. Con suerte, esto será útil para su próximo proyecto.

Espero escuchar de usted en los comentarios.

¡Salud!