Cómo diseñar y colocar imágenes en lugares abstractos en Divi
Publicado: 2019-03-30Las imágenes son un aspecto clave del diseño web. Y el diseño web moderno parece requerir formas nuevas y abstractas de mostrar imágenes en su sitio web. Las opciones de transformación de Divi facilitan el estilo y la posición de las imágenes en su página en cualquier lugar que desee. Esto abre la puerta para crear diseños únicos que llevarán su sitio web al siguiente nivel.
En este tutorial, le mostraré un par de formas en las que puede diseñar y colocar imágenes en lugares abstractos de su sitio web. Esto te permitirá crear innumerables variaciones de diseño para imágenes que quizás hayas pensado que solo eran posibles en un editor de fotos como Photoshop o Sketch.
¡Empecemos!
Vistazo
Aquí hay un adelanto de los diseños que crearemos en este tutorial.
Descargue los ejemplos de diseño de este tutorial GRATIS
Para tener en sus manos estos diseños de ejemplo, primero deberá descargarlos 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.
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.
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.
Ahora vayamos al tutorial, ¿de acuerdo?
Comenzando
Para comenzar, asegúrese de tener el tema Divi instalado y activo. Luego, cree una nueva página e implemente Divi Builder en la interfaz. 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 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 una pantalla más 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 obtener diseños aún más exclusivos.
He aquí cómo hacerlo.
Crear y diseñar el módulo de texto
Primero vamos a crear un módulo de texto que servirá como contenido principal para nuestra sección.
Si aún no lo ha hecho, cree una sección normal con una fila de una columna. Luego agregue el módulo de texto a la fila.
Actualice el contenido para incluir lo siguiente:
<h2>About Us</h2> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
Luego actualice la configuración de diseño de la siguiente manera:
Fuente de texto: Raleway
Fuente del título 2: Raleway
encabezado 2 Peso de fuente: Negrita
Tamaño del texto del encabezado 2: 44 px (escritorio), 24 px (teléfono)
Ancho: 680px (escritorio), 60% (tableta), 80% (teléfono)
Relleno personalizado: 10% arriba, 10% abajo, 10% izquierda, 5% derecha
Agregar imagen n. ° 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 agrandemos usando la propiedad transform. 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 forma 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:
Transformar escala del eje X: 416%
Transformar escala del eje Y: 416%
Luego podemos posicionar la imagen usando la traducción de transformación de la siguiente manera:
Transformar trasladar eje X: -36%
Transformar traslación del eje Y: 41%
Por último, puedes rotar la imagen usando transform rotar:
Transformar Girar 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 imagen.
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 el 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:
Transformar escala del eje X: 464%
Transformar escala del eje Y: 464%
Transformar trasladar eje X: 7%
Transformar traslación del eje Y: -80%
Transformar Girar eje Z: -10 grados
Luego agregue una sombra de cuadro para un elemento de diseño adicional.
Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: -20px
Posición vertical de la sombra del cuadro: -7px
Asegurarse de que el módulo de texto se mantenga en la parte superior
Queremos asegurarnos de que el módulo de texto se mantenga en la parte superior de las imágenes siempre que comiencen a superponerse en el 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:
CSS del elemento principal:
position: relative;
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 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:
overflow: hidden;
Ahora mira el resultado final.
Creación de un fondo de collage de imagen abstracta para su encabezado
Para este próximo diseño, les mostraré cómo construir un collage abstracto de imágenes que servirá como fondo para un encabezado. Para hacer esto, usaremos la propiedad display flex para crear una fila de imágenes que podamos escalar y mover de manera creativa.
He aquí 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:
<h1>Interior Design</h1> <p>This is some content</p>
Luego actualice el diseño de la siguiente manera:
Color de fondo: rgba (0,0,0,0.07)
Color del texto del texto: #ffffff
Orientación del texto: centro
Fuente de 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: 44 px (escritorio), 34 px (tableta), 24 px (teléfono)
Ancho: 500px (escritorio), 60% (tableta), 80% (teléfono)
Alineación del módulo: centro
Acolchado personalizado: 5vw superior, 5vw inferior, 1vw derecho
Configuración de la 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): 0px arriba, 0px abajo
Relleno personalizado (tableta): 20 px en la parte inferior
Relleno personalizado (teléfono): 40 px en la parte inferior
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 superponiendo la parte inferior del encabezado en la siguiente sección (verás lo que quiero decir más adelante).
Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 0px
Posición vertical de la sombra del cuadro: -80px
Color de sombra: #ffffff
Y dado que moveremos imágenes fuera de la ventana gráfica de sección para nuestro collage, necesitaremos agregar el siguiente CSS al elemento principal.
overflow: hidden;
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 en la parte superior de las imágenes que agregaremos a nuestra sección. De forma predeterminada, cada sección tiene un valor de índice z de 9. Así que todo lo que tenemos que 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: top 10vw
Índice Z: 10
Creación del 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 usáramos un diseño tradicional de 5 columnas, las imágenes se dividirían en diferentes diseños de columnas en diferentes dispositivos y romperían el diseño.
Después de eso, podremos estilizar y posicionar nuestras imágenes una a 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 de la canaleta: 1
Y para alinear todos los módulos en esta fila horizontalmente, agregue el siguiente CSS al elemento principal de la columna:
display: flex;
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 píxeles de ancho y varían en altura. Las imágenes con diferentes dimensiones tienden a hacer un collage abstracto más atractivo.
Posicionando 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 del primer módulo de imagen (extremo izquierdo) y actualice las opciones de transformación de la siguiente manera:
Transformar escala del eje X: 266%
Transformar escala del eje Y: 266%
Transformación de traducción: eje X: -68%
Transformación de traslación: eje Y: -54%
Imagen # 2
Abra la configuración del segundo módulo de imagen y actualice las opciones de transformación de la siguiente manera:
Transformar escala del eje X: 184%
Transformar escala del eje Y: 184%
Transformación de traslación: eje X: -36%
Transformación de traslación: eje Y: -66%
Imagen # 3
Abra la configuración del tercer módulo de imagen y actualice las opciones de transformación de la siguiente manera:
Transformar escala del eje X: 206%
Transformar escala del eje Y: 206%
Transformación de traslación: eje X: -51%
Transformación de traslación: eje Y: -27%
Imagen # 4
Abra la configuración del cuarto módulo de imagen y actualice las opciones de transformación de la siguiente manera:
Transformar escala del eje X: 180%
Transformar el eje Y de la escala: 180%
Transformar traslación: eje X: 20%
Transformar traslació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:
Transformar escala del eje X: 290%
Transformar escala del eje Y: 290%
Transformación de traslación: eje X: -50%
Transformar traslació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:
Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: -40px
Posición vertical de la sombra del 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 proporcionarle algo de inspiración sobre cómo diseñar y colocar imágenes en su sitio web de formas que nunca hubiera pensado 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 tener noticias tuyas en los comentarios.
¡Salud!