Las imágenes son un aspecto clave del diseño web. Y el diseño web moderno parece pedir formas nuevas y abstractas de mostrar imágenes en su sitio web. Las opciones de transformación de la división facilitan la estilización y el posicionamiento de las imágenes en su página en cualquier lugar que desee. Esto abre la puerta para crear modelos únicos que llevarán su sitio al siguiente nivel. En este tutorial, le mostraré algunas formas en que puede estilizar y posicionar las imágenes en lugares abstractos en su sitio web. Esto le permitirá crear innumerables variantes de diseño para imágenes que probablemente solo creyera en un editor de fotos como Photoshop o Sketch.
¡Vamos a empezar! Él hace un vistazo a una breve mirada a los proyectos que construiremos en este tutorial.


Descargue gratis los ejemplos de diseño de este tutorial para poner su mano en estos ejemplos de diseño, primero debe descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Ahora pasemos al tutorial, ¿no? Comenzó a comenzar, asegúrese de tener el tema instalado y activo. Luego cree una nueva página e implemente Divi Builder en el frente. Elija la opción “Construir desde cero”. ¡Ahora estás listo para diseñar! Posicionando parcialmente el parcialmente fuera de la pantalla (derecha o izquierda)
En este primer ejemplo, le mostraré cómo colocar las imágenes parcialmente fuera de la pantalla. Esta es una buena manera de agregar una pantalla abstracta para sus imágenes, que funcionará como antecedentes personalizados para su contenido.

Aquí le mostramos cómo hacerlo. Cree y estilice el módulo de texto primero crearemos un módulo de texto que servirá como el contenido principal para nuestra sección. Si aún no lo ha hecho, cree una sección normal con una fila con una columna. Luego agregue el módulo de texto en una fila. Actualice el contenido para incluir lo siguiente:

Acerca de nosotros

Su contenido va aquí. Editar o eliminar este texto en línea o en la configuración del contenido del módulo. También puede diseñar todos los aspectos de este contenido en la configuración de diseño del módulo e incluso aplicar la costumbre a este texto en la configuración avanzada del módulo.
Luego actualice la configuración de diseño de la siguiente manera: Fuente Texto: Raleway Sección 2 Fuente: Raleway Sección 2 Peso de la fuente: Dare Título 2 Dimensión del texto: 44 PX (Escritorio), 24 PX (teléfono) Ancho: 680 PX (escritorio), 60% ( tableta), 80% (teléfono) forro personalizado: 10% más, 10% de baja, 10% izquierda, 5% derecho
Agregue la imagen # 1 Ahora estamos listos para agregar la primera imagen. Continúe y agregue un módulo de imagen directamente sobre el módulo de texto. Luego cargue la imagen en el módulo de imagen. Asegúrese de que la imagen sea lo suficientemente grande, para que no pierda su calidad cuando aumentemos la imagen utilizando la propiedad de transformación. Yo uso una imagen de 400 x 580 píxeles.

Luego, traiga el ancho del módulo de imagen y alineelo hacia la izquierda de la siguiente manera: Ancho: 5% de alineación del módulo: Izquierda

Reducir el módulo de imagen, por lo tanto, inicialmente nos permite reducir el espacio negativo. De esta manera, no debemos ajustar el espacio usando márgenes negativos. Ahora podemos ampliar la imagen utilizando las opciones de transformación de la siguiente manera: la escala de transformación del eje x: 416% eje y de la escala de transformación: 416%, entonces podemos colocar la imagen usando la transformación transformada de la siguiente manera: eje de transformación X traducido: -36 % Transformar el eje y traducido: 41%
Finalmente, puede rotar la imagen usando la transformación rotada:

Rotar el eje de transformación 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 suba una nueva imagen en el módulo de imagen. Luego, traiga el ancho del módulo de imagen hacia abajo y alinelo hacia la izquierda de la siguiente manera: Ancho: 10% de alineación del módulo: El ancho izquierdo no debe ser exactamente el 10%. Todo lo que desea hacer es reducir el módulo lo suficiente, para que no ocupe demasiado espacio vertical en el aspecto. Luego actualice las opciones de transformación de la siguiente manera: eje x de la escala de transformación: 464% eje de la escala de transformación: 464%

Transformar el eje x traducido: 7% Transformar el eje traducido: -80% Rotado Transformación Z: -10 grados
Luego agregue un tono de caja para un elemento de diseño adicional. Box Shadow: ver Captura de pantalla Box horizontal de la caja Sombra: -20px Box Sombra Posición vertical: -7px

Asegurando que el módulo de texto permanezca arriba, queremos asegurarnos de que el módulo de texto permanezca por encima de las imágenes cada vez 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 los siguientes CSS personalizados al elemento principal: CSS principal: Posición: relativo;
Luego establezca el índice Z en 1.

Ocultar el derrame de la sección porque tendremos imágenes que se extienden fuera de la sección de la página, el ancho de la visualización del navegador aumentará para alojar el espacio adicional. Esto activará la barra de desplazamiento horizontal en la parte inferior del navegador. Para deshabilitar esto, deberá agregar un fragmento CSS a la sección. Abra la configuración de la sección y agregue los siguientes CSS personalizados al elemento principal: Overflow: Hidden;

Ahora verifique el resultado final.
Creando un fondo de imágenes abstractas para su encabezado.
Para el próximo diseño, le mostraré cómo construir un collage abstracto de imágenes que servirán como fondo. Para hacer esto, utilizaremos la propiedad Flex Display para crear una fila de imágenes que podamos escalar y moverse de manera creativa. Aquí le mostramos cómo hacerlo. Diseñe primero el módulo de texto del encabezado, cree una nueva sección habitual con una fila con una columna. Luego agregue un módulo de texto en fila y actualice el siguiente contenido:

Diseño de interiores

Este es un contenido

Luego actualice el diseño de la siguiente manera: Color de fondo: RGBA (0.0,0,07) Texto Color de texto: #FFFFFF Orientación de texto: Title Font Center: Raleway Title Font Peso: Alineación en negrita del texto: Texto correcto Prem: Entrada: #FFFFFFF Tamaño de texto Disparo: 44 px (escritorio), 34 px (tableta), 24 px (teléfono) Ancho: 500 PX (escritorio), 60% (tableta), 80% (teléfono) Mezcla: Centro de forro personalizado: 5VW, 5VW Abajo, sección derecha de 1 VW antes de agregar nuestras imágenes y construir el fondo del collage, para personalizar 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: Fondo de pantalla: # 4C606D Braida personalizada (escritorio): 0 PX arriba, 0 px Down Lining personalizado (tableta): 20 PX Down Lining personalizado (teléfono): 40 PX abajo




Luego agregue una sombra del cuadro interior a la parte inferior de la sección con un color que coincida con el fondo de la siguiente sección en la página (en este caso será blanco). Esto nos permitirá crear el efecto de nuestras imágenes que se superponen en la parte inferior del encabezado en la siguiente sección (verá lo que quiero decir más adelante). Box Shadow: Ver captura de pantalla Posición horizontal de la caja: 0 PX Box Sombra Posición vertical: -80px Color de sombra: #ffffff

Y a medida que moveremos imágenes fuera de la ventana de sección para nuestro collage, tendremos que agregar el siguiente CSS al elemento principal. Desbordamiento: oculto;
La configuración de la fila 1 ahora tiene que agregar un poco de relleno en la fila que contenga nuestro módulo de texto. También debemos agregar un índice Z para mantener la sección sobre las imágenes que agregaremos a nuestra sección. Por defecto, cada sección tiene un valor del índice Z de 9. Por lo tanto, todo lo que tenemos que hacer es agregar un índice 10 de 10 en el turno que queremos permanecer en la parte superior. Abra la configuración de la fila y actualice lo siguiente: Reinicio personalizado: Top 10VW Ind Índice: 10 Listado de imágenes abstractas En este momento, la sección está lista para comenzar a agregar nuestras imágenes. Para crear el collage de imágenes abstractas, agregaremos 5 imágenes en una fila de una columna y luego usaremos “Flex” para alinear todas las imágenes en la página. Esto es necesario para mantener las imágenes en su lugar (horizontal) en todos los tamaños del navegador. Si tuviéramos que usar una apariencia tradicional con 5 columnas, las imágenes se dividen en diferentes columnas en diferentes dispositivos y rompe el diseño. Después de eso, podremos estilizar y colocar nuestras imágenes una por una con opciones de transformación. Agregar la fila de imágenes continúa y cree una nueva fila con una columna directamente debajo del módulo de texto de giro. Luego abra la configuración de la fila y actualice lo siguiente: Ancho personalizado: 50% de ancho de canaletas: 1 y para alinear todos los módulos en esta fila, agregue los siguientes CSS al elemento principal de la columna: Display: Flex;

Ahora, cuando agrega módulos de imagen en una fila, se alinearán horizontalmente. Mire lo que sucede al copiar un módulo de imagen en una pantalla: Flex Agregue en la columna.

Vaya más allá y agregue 5 imágenes seguidas, asegurándose de que tengan un tamaño lo suficientemente grande como para que coincidan con el tamaño para cambiar el tamaño de la imagen para el collage. Utilizo imágenes presentadas en nuestro paquete de tareas, que tienen aproximadamente 800 PX de ancho y varían en altura. Las imágenes con diferentes dimensiones tienden a hacer un collage abstracto con una mejor apariencia. Posicionar las imágenes transformadas es el momento de comenzar a colocar nuestras imágenes para crear nuestro collage. Imagen n. ° 1 Abra la configuración para el primer módulo de imagen (en la izquierda) y actualice las opciones de transformación de la siguiente manera: x eje de la escala de transformación: 266% eje de la escala de transformación: 266% transformación: – eje x: – 68 % Transformación por transformación: Eje y: -54%

Imagen n. ° 2 Abra la configuración para el segundo módulo de imagen y actualice las opciones de transformación de la siguiente manera: x eje de la escala de transformación: 184% eje y de la escala de transformación: 184% Traducción de transformación: Eje x: -36% Translación de transformación: Eje: Eje Y: -66%

Imagen n. ° 3 Abra la configuración para el tercer módulo de imagen y actualice las opciones de transformación de la siguiente manera: x eje de la escala de transformación: 206% eje y de la escala de transformación: 206% transformación: -51% Translación de transformación: eje y: -27 De %

Imagen n. ° 4 Abra la configuración para el cuarto modo de imagen y actualice las opciones de transformación de la siguiente manera: x eje de la escala de transformación: 180% eje y de la escala de transformación: 180% Translación de transformación: eje x: 20% Traducción de transformación: eje y y : 42%

Imagen n. ° 5 Abra la configuración para el quinto módulo de imagen y actualice las opciones de transformación de la siguiente manera: x eje de la escala de transformación: 290% eje y de la escala de transformación: 290% transformación: -50% Translación de transformación: eje y: 72% Agregando una sombra de caja a las imágenes para crear un elemento de diseño adicional, podemos agregar una sombra de la caja a nuestras imágenes. Para hacer esto, active el modo de cuadrícula y use la función de selección multise para seleccionar todos los módulos de imagen. Luego abra la configuración de uno de los módulos de imagen para implementar la configuración modal del elemento.

Luego actualice lo siguiente: Box Sombra: Vea la captura de pantalla de la sombra de la caja: -40px Box Sombra Posición vertical: 40 PX Color de sombra: RGBA (255,255,255,13)

El resultado final aquí es el resultado final del diseño. Escritorio

Tableta

Teléfono

Pensamientos finales Estos ejemplos de diseño deberían proporcionarle una inspiración para la estilización y el posicionamiento de las imágenes en su sitio web de una manera que nunca ha creído fuera del software de edición de fotos. Una vez que descubra cómo personalizar su apariencia correctamente, las opciones de transformación de la división pueden colocar las imágenes en lugares únicos y abstractos. Esperamos que esto sea útil para su próximo proyecto. Espero tener noticias suyas en los comentarios. ¡Suerte!