Mezclar más imágenes puede ser útil para crear modelos de fondo profesionales para su sitio web. La idea es tomar dos o tres imágenes separadas y estratificarlas una encima de la otra. Luego use un modo de mezcla para mezclar las capas para crear un diseño armonioso unificado. Cada elemento Divi Builder ha incorporado el modo de mezcla y las opciones de filtración para que los elementos de mezcla sean fáciles de hacer allí en el Builder Div. Por supuesto, puede mezclar imágenes en Photoshop (u otro editor de fotos), pero para aquellos que desean una solución conveniente, esta publicación debería ayudarlo. Div hace esto bastante fácil. Una vez que obtenga las imágenes en el lugar correcto, puede mezclarlas todas en unos pocos clics. Y, por supuesto, tiene un arsenal de opciones de división para hacer esos toques finales y llevar el diseño a nuevos picos creativos.
Vamos a empezar. Tire del ojo aquí hay un vistazo rápido al diseño que estamos a punto de construir juntos.

Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando 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!
Suscríbase a nuestro canal de YouTube para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en el constructor. Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de la Divica Instalado (o el creador de Divi Plugin si no usa el tema Div).
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Cargue algunas imágenes simuladas en la biblioteca de medios que se utilizarán para el tutorial. Utilizo imágenes del paquete de modelos del ojo médico.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Cómo mezclar más imágenes para crear un diseño de fondo personalizado en la división Cree la sección y gire para que las cosas se ejecute, agregue una fila con una columna a la sección habitual.
Agregar imágenes con el módulo de imagen Imagen # 1 Después de que se configuran la fila y la columna, agregue un módulo de imagen en una fila.

Sube una imagen con dimensiones alrededor de 500 x 700 px. Utilizo uno del paquete de colocación de ojos. Una vez que se cargue la imagen, le dé a la imagen un ancho máximo usando la unidad de longitud VW, de modo que se escala maravillosamente con las otras imágenes que se mezclaremos y la alinearemos a la izquierda de la siguiente manera. .:

Ancho máximo: 33VW

Alineación del módulo: izquierda
Queremos la próxima imagen que agregamos para alinearse a la derecha de esta imagen, por lo que tenemos que flotar esta imagen. Para hacer esto, agregue los siguientes CSS al elemento principal: Float: Izquierda;
Imagen # 2 Luego agregue un nuevo módulo de imagen en la imagen actual.

Después de eso, cargue una nueva imagen con las dimensiones de aproximadamente 1000px en 667px.

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

Ancho máximo: 40 VW

Alineación del módulo: correcto
Debido a que la primera imagen flota hacia la izquierda, la segunda imagen ahora debe estar adyacente a la derecha.
Volveremos para hacer algunos toques finales de estas imágenes, pero por el momento vamos a la configuración de la sección. Secciones de sección Abra la configuración de la sección y agregue una imagen de fondo y un gradiente de la siguiente manera:
Imagen de fondo: [Cargar imágenes alrededor de 1920px con 1280px]
Color de gradiente de fondo izquierdo: RGBA (1,16,63,0,64)
Color derecho del gradiente de fondo: RGBA (12,113.195.0.82)

Coloque el gradiente sobre la imagen de fondo: sí
Luego ajuste un poco el forro.
Relleno (escritorio): 0 px en la parte superior, 0 px en la parte inferior


Junta (teléfono): 0px hacia arriba, 10 VW abajo
Configuración de fila Después de completar la sección, abra la configuración de la fila y actualice lo siguiente:
Ancho: 100%;

Ancho máximo: 100%;
Revestimiento: 0 PX hacia arriba, 0 PX Josadure Mode en una fila ahora debería cubrir todo el fondo de la sección. Esto nos permitirá agregar una forma de mezclar en una fila para combinar las dos imágenes con el fondo de la sección. Para hacer esto, agregue el siguiente modo de mezcla.
Modo de mezcla: multiplicar
¿Por qué multiplicar? El modo de mezcla de multiplicación prácticamente multiplica la capa / fila actual (incluya las imágenes que contiene) con la capa debajo (fondo de sección). Una manera fácil de pensar en el efecto es imaginar dos diapositivas en un proyector deslizante apilados entre sí. Si diseña las dos imágenes en una pantalla, obtendrá una mezcla de las dos que es un poco más oscura.

Centre las imágenes no necesarias verticalmente, pero si desea asegurarse de que las dos imágenes permanezcan enfocadas verticalmente, puede agregar un fragmento 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 CSS al elemento principal. Pantalla: Flex;
Alinine-Ritams: Centro;

Haga los últimos toques a las dos imágenes principales en la actualidad, nuestras dos imágenes superiores se mezclan maravillosamente, pero pueden usar algunos cambios de diseño para hacer un aspecto más profesional. Podemos usar un tono de caja blanca para suavizar los bordes de las imágenes y podemos usar la transformación transformada para colocarlas exactamente donde queremos quedarse.
Imagen # 1 Toque Finalmente abra la configuración del módulo de imagen a la izquierda y actualice lo siguiente:
Box Shadow: Ver captura de pantalla

Poder de poco claro de la sombra de la caja: 6VW
Poder de extender la sombra de la caja: 6VW
Color de la sombra: #ffffff
Transformación por transformación: 5VW (eje x), 11VW (eje y)
Imagen # 2 Toque el final Después de que termine de alcanzar la imagen # 1 a la izquierda, abra la configuración de la imagen # 2 a la derecha y realice los siguientes cambios:
Box Shadow: Ver captura de pantalla

Poder de poco claro de la sombra de la caja: 3VW

Poder de extender la sombra de la caja: 3VW
Color de la sombra: #ffffff
Podemos agregar incluso algunos efectos de filtro para mejorar la imagen.
Saturación: 30%
Opacidad: 60%

Agregando el contenido de texto ahora que nuestra sección está completa con tres imágenes bellamente mixtas, podemos agregar nuestro contenido a la parte superior de la sección. Para hacer esto, agregue una nueva sección debajo de la actual.
Luego agregue una fila con una columna a la sección habitual.
Luego agregue un módulo de texto en una fila.

El contenido del cuerpo actualiza el contenido del módulo de texto con el siguiente contenido del cuerpo:

Reserve un examen de ojo gratis

Tu 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.

Diseño de texto Una vez que el contenido del cuerpo está en su lugar, actualice la configuración de diseño de la siguiente manera:

Color de texto de texto: #ffffff
Fuente del título: Poppins

Encabezado de texto en color: #ffffff
Encabezado de texto de tamaño: 5VW
Ancho: 60VW (escritorio), 100% (teléfono)
Marja (escritorio): -35% más, 35% inactiva
Marja (teléfono): -70% más, 70% inactivado
El diseño final aquí es el diseño final.
Así es como cambia para diferentes anchos del navegador.
Explorando varias opciones de diseño Después de haber terminado el diseño, es fácil experimentar varios modos de mezcla, filtros, colores y muchas otras opciones de diseño. Por ejemplo, si desea que coincida con el diseño con un nuevo esquema de color, todo lo que tiene que hacer es cambiar los dos gradientes de fondo utilizados por la sección. O puede agregar un filtro a una de las imágenes para hacerlo blanco y negro con saturación o para eliminar un poco de opacidad.

El modo de mezcla de pensamientos finales y las opciones de filtro de división tienen todo lo que necesita para mezclar imágenes para diseños de fondo profesionales. El truco es colocar las imágenes con unidades de longitud VW, de modo que todo el diseño de fondo sea receptivo y en el móvil. Pero, una vez que las imágenes están en posición, podemos experimentar con todo tipo de modos de mezcla e innumerables otras opciones de diseño para hacer excelentes modelos de mezcla. Espero que esta publicación te haya dado un poco de inspiración y espero descubrirte en los comentarios. ¡Suerte!