Combinar varias imágenes puede resultar útil para crear fondos profesionales para sus Sitio web. La idea es tomar dos o tres imágenes separadas y superponerlas. A continuación, utilice un modo de fusión para fusionar las capas y crear un diseño uniforme y unificado.

Cada elemento de Divi Builder tiene un modo de combinación integrado y opciones de filtro que facilitan la combinación de elementos en el generador de Divi. Por supuesto, puede mezclar imágenes en Photoshop (u otro editor de fotos), pero para aquellos que buscan una solución práctica de Divi, este tutorial debería ayudarlo, porque con Divi es bastante fácil. Una vez que tenga las imágenes en el lugar correcto, puede mezclarlas con solo unos pocos clics. Y por supuesto, tienes un arsenal de opciones Divi para dar los toques finales y darle una nueva dimensión creativa al diseño.

Vamos a empezar.

vista

Aquí hay una descripción general del diseño que vamos a construir juntos.

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active el Tema divi instalado (o el complemento Divi Builder si no está utilizando el Tema divi).
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Sube algunas imágenes ficticias a la biblioteca de medios para usarlas en el tutorial. Estoy usando imágenes de Paquete de diseño del oculista .

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Cómo mezclar varias imágenes para crear un diseño de fondo personalizado en Divi

Comencemos con la sección y la línea.

Para hacer las cosas, agregue una fila de una columna a la sección regular.

Agregar imágenes con el módulo de imagen

Imagen n ° 1

Una vez que se definen la fila y la columna, agregue un módulo de imagen a la línea.

Sube una imagen de aproximadamente 500 x 700 píxeles. Estoy usando uno del Eye Doctor Layout Pack.

Una vez que se cargue la imagen, haga el ancho máximo de la imagen usando la unidad de longitud vw para que encaje bien con las otras imágenes que vamos a fusionar y luego alinee a la izquierda de la siguiente manera :

• Ancho máximo: 33vw
• Alineación del módulo: izquierda.

Queremos que la siguiente imagen que agreguemos se alinee a la derecha de esa imagen. Entonces necesitamos hacer flotar esta imagen a la izquierda. Para hacer esto, agregue el siguiente CSS al elemento principal:

float: left;

Imagen n ° 2

Luego agregue un nuevo módulo de imagen debajo de la imagen actual.

Después de eso, descargue una nueva imagen cuyas dimensiones sean cercanas a 1000 píxeles por 667 píxeles.

Luego dale a la imagen un nuevo ancho y una nueva alineación máxima.

• Ancho máximo: 40vw
• Alineación del módulo: derecha

Dado que la primera imagen está flotando hacia la izquierda, la segunda imagen ahora debe estar adyacente a la derecha.

Volveremos para dar algunos toques finales a estas imágenes, pero por ahora pasemos a la configuración en la sección.

Configuraciones de sección

Abra la configuración de la sección y agregue una imagen de fondo y un degradado de la siguiente manera:

• Imagen de fondo: [imagen de descarga de aproximadamente 1920 px por 1280 px]
  

• Gradiente de fondo izquierdo Color: rgba (1,16,63,0.64)
• Gradiente de fondo derecho Color: rgba (12,113,195,0.82)
• Coloque el degradado sobre la imagen de fondo: SÍ

Luego ajuste el relleno un poco.

• Tapicería (oficina): 0px en la parte superior, 0px en la parte inferior
• Relleno (teléfono): 0px en la parte superior, 10vw en la parte inferior

Configuraciones de línea

Cuando la sección esté completa, abra la configuración de línea y actualice los siguientes elementos:

• Ancho: 100%;
• Ancho máximo: 100%;
• Tapicería: 0px en la parte superior, 0px en la parte inferior

Agregue el modo de fusión a la línea

Ahora la línea debe cubrir toda la parte inferior de la sección. Esto nos permitirá agregar un modo de fusión a la línea para fusionar las dos imágenes con el fondo de la sección. Para hacer esto, agregue el siguiente modo de fusión.

• Modo de fusión: multiplicar

¿Por qué multiplicar?

Multiplicar el modo de fusión multiplica la capa / fila actual (incluidas las imágenes que contiene) por la capa debajo de ella (el fondo de la sección). Una forma fácil de pensar en el efecto es imaginar dos diapositivas en un proyector de diapositivas apiladas una detrás de la otra. Si proyecta las dos imágenes en una pantalla, obtendrá una mezcla ligeramente más oscura de las dos.

Centrar imágenes verticalmente

No es necesario, pero si desea asegurarse de que ambas imágenes de la fila permanezcan centradas verticalmente, puede agregar un fragmento de CSS a la columna. Para hacer esto, abra la configuración de la fila y luego haga clic en la configuración de la columna. Luego agregue el siguiente código CSS al elemento principal.

pantalla: flex; alinear elementos: centro;

Toque final a las dos mejores fotos

En este momento, nuestras dos imágenes principales se combinan bien, pero pueden usar algunos cambios de diseño para que se vea un poco más profesional. Podemos usar una sombra de cuadro blanco para suavizar los bordes de las imágenes y usar el comando Transformar para colocarlas exactamente donde queremos que permanezcan.

Imagen # 1 Llaves finales

Abra la configuración del módulo de imagen a la izquierda y actualice lo siguiente:

• Box Shadow: ver captura de pantalla
• Box Shadow Blur Force: 6vw
• Espesor de la pantalla de la caja: 6vw
• Color de sombra: #ffffff
  

• Transformador Traducir: 5vw (eje X), 11vw (eje Y)

Imagen # 2 Llaves finales

Una vez que haya terminado de manipular la imagen n. ° 1 a la izquierda, abra la configuración de la imagen n. ° 2 a la derecha y realice los siguientes cambios:

• Box Shadow: ver captura de pantalla
• Box Shadow Blur Force: 3vw
• Box Shadow Spread Force: 3vw
• Color de sombra: #ffffff

Incluso podemos agregar algunos filtros para que la imagen sea más nítida.

• Saturación: 30%
• Opacidad: 60%

Agregar contenido de texto

Ahora que nuestra sección está completa con tres imágenes muy bien combinadas, podemos agregar nuestra contenido en la parte superior de la sección. Para hacer esto, agregue una nueva sección debajo de la sección actual.

Luego agregue una fila de una columna a la sección regular.

Luego agregue un módulo de texto a la línea.

Contenido del cuerpo

Actualizar el contenido del módulo de texto con el contenido del siguiente organismo:

Reserve un examen de la vista Tu contenido va aquí. Edite o elimine este texto en línea o en el módulo Configuración de contenido. También puede aplicar estilo a cada aspecto de este contenido en la configuración de diseño del módulo e incluso aplicar CSS personalizado a este texto en la configuración avanzada del módulo.

Dar formato al texto

Una vez que el contenido del cuerpo esté en su lugar, actualice los parámetros de diseño de la siguiente manera:

• Color del texto del texto: #ffffff
• Fuente: Poppins
• Color del texto del título: #ffffff
• Tamaño del título del texto: 5vw
• Ancho: 60vw (escritorio), 100% (teléfono)
• Margen (escritorio): -35% arriba, 35% abajo
• Margen (teléfono): -70% arriba, 70% abajo

Diseño final

Aquí está el diseño final.

Consideraciones finales

El modo de fusión y las opciones de filtro de Divi proporcionan todo lo que necesita para fusionar imágenes para crear fondos profesionales. El truco consiste en colocar las imágenes utilizando unidades de longitud de vw para que el diseño de fondo también responda en el móvil. Pero una vez que las imágenes están en posición, podemos experimentar con todo tipo de modos de fusión e innumerables otras opciones de diseño para crear diseños extremadamente armoniosos.

Espero que este artículo te haya proporcionado algo de inspiración y espero tener noticias tuyas en los comentarios.

¡A vuestra salud!