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


Combinar varias imágenes puede ser útil para crear diseños de fondo profesionales para su sitio web. La idea es tomar dos o tres imágenes separadas y colocarlas una encima de la otra. Luego use un modo de fusión para mezclar las capas para crear un diseño armonioso unificado.

Cada elemento del generador de Divi tiene un modo de fusión incorporado y opciones de filtro para hacer que los elementos de fusión sean fáciles de hacer allí mismo en el generador de Divi. Por supuesto que podrías mezclar imágenes en photoshop (o algún otro editor de fotos), pero para aquellos que desean una solución Divi conveniente, esta publicación debería ayudar. Divi en realidad hace esto bastante fácil. Una vez que obtenga las imágenes en el lugar correcto, puede combinarlas todas con unos pocos clics. Y, por supuesto, tiene un arsenal de opciones Divi para hacer esos toques finales y llevar el diseño a nuevas alturas creativas.

Empecemos.

Vistazo

Aquí hay un vistazo rápido al diseño que vamos a construir juntos.

mezclar imágenes en divi

Descargar el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=48XwKTLDiGg (/ incrustar)

Suscríbase a nuestro canal de Youtube

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

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme instalado (o el complemento Divi Builder si no usa el tema Divi).
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  3. Cargue algunas imágenes simuladas en la biblioteca de medios para utilizarlas en el tutorial. Estoy usando imágenes del Paquete de diseño del oculista.

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

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

Crear la sección y la fila

Para que todo funcione, agregue una fila de una columna a la sección regular.

mezclar imágenes en divi

Agregar las imágenes con el módulo de imagen

Imagen n. ° 1

Después de configurar la fila y la columna, agregue un módulo de imagen a la fila.

mezclar imágenes en divi

Cargue una imagen con las dimensiones alrededor de 500 px por 700 px. Estoy usando uno del paquete de diseño del oculista.

mezclar imágenes en divi

Una vez que se carga la imagen, dele un ancho máximo a la imagen usando la unidad de longitud vw para que se adapte bien a las otras imágenes que combinaremos y alinéela a la izquierda de la siguiente manera:

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

mezclar imágenes en divi

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

float: left;

mezclar imágenes en divi

Imagen # 2

A continuación, agregue un nuevo módulo de imagen debajo de la imagen actual.

mezclar imágenes en divi

Después de eso, suba una nueva imagen con las dimensiones alrededor de 1000 px por 667 px.

mezclar imágenes en divi

Luego dele a la imagen un nuevo ancho máximo y alineación.

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

Dado que la primera imagen flota a la izquierda, la segunda imagen ahora debe estar adyacente a la derecha.

mezclar imágenes en divi

Volveremos para hacer algunos toques finales a estas imágenes, pero por ahora pasemos a la configuración de 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: (subir imagen alrededor de 1920 px por 1280 px)

mezclar imágenes en divi

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

mezclar imágenes en divi

Luego ajuste el relleno un poco.

  • Relleno (escritorio): 0px arriba, 0px abajo
  • Acolchado (teléfono): 0px arriba, 10vw abajo

mezclar imágenes en divi

Configuración de fila

Una vez completada la sección, abra la configuración de la fila y actualice lo siguiente:

  • Ancho: 100%;
  • Ancho máximo: 100%;
  • Relleno: 0px arriba, 0px abajo

mezclar imágenes en divi

Agregar modo de fusión a la fila

Ahora la fila debería cubrir todo el fondo de la sección. Esto nos permitirá agregar un modo de fusión a la fila para combinar 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

mezclar imágenes en divi

¿Por qué multiplicar?

El modo de mezcla múltiple básicamente multiplica la capa / fila actual (incluye las imágenes que contiene) con la capa debajo (el fondo de la sección). Una manera fácil de pensar sobre 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 de las dos que es ligeramente más oscura.

Centrar verticalmente las imágenes

No es necesario, pero si desea asegurarse de que las dos 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 CSS al elemento principal.

display: flex;
align-items: center;

mezclar imágenes en divi

Haga toques finales a las dos imágenes principales

En este momento, nuestras dos imágenes principales se combinan bien, pero pueden usar algunos ajustes de diseño para que tenga un aspecto un poco más profesional. Podemos usar una sombra de recuadro blanco para suavizar los bordes de las imágenes, y usar la traducción de transformación para colocarlas exactamente donde queremos que se queden.

Imagen # 1 Toques finales

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

  • Box Shadow: ver captura de pantalla
  • Caja Shadow Blur Fuerza: 6vw
  • Caja Sombra Fuerza extendida: 6vw
  • Color de sombra: #ffffff

mezclar imágenes en divi

  • Transformar Traducir: 5vw (Eje ​​X), 11vw (Eje ​​Y)

mezclar imágenes en divi

Imagen # 2 Toques finales

Una vez que haya terminado de retocar 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
  • Caja Shadow Blur Fuerza: 3vw
  • Fuerza de propagación de la sombra de la caja: 3vw
  • Color de sombra: #ffffff

mezclar imágenes en divi

Incluso podemos agregar algunos efectos de filtro para que la imagen se mezcle aún mejor.

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

mezclar imágenes en divi

Agregar el contenido del texto

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

mezclar imágenes en divi

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

mezclar imágenes en divi

Luego agregue un módulo de texto a la fila.

mezclar imágenes en divi

Contenido del cuerpo

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

Book a Free Eye Exam

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.

mezclar imágenes en divi

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 del texto del texto: #ffffff
  • Fuente del encabezado: Poppins
  • Color del texto del encabezado: #ffffff
  • Tamaño del texto del encabezado: 5vw
  • Ancho: 60vw (escritorio), 100% (teléfono)
  • Margen (escritorio): -35% superior, 35% inferior
  • Margen (teléfono): -70% superior, 70% inferior

mezclar imágenes en divi

Diseño final

Aquí está el diseño final.

mezclar imágenes en divi

Así es como se escala para diferentes anchos de navegador.

mezclar imágenes en divi

Explorando más opciones de diseño

Una vez que haya terminado el diseño, es fácil experimentar con más modos de fusión, filtros, colores y muchas más opciones de diseño. Por ejemplo, si desea hacer coincidir el diseño con un nuevo esquema de color, todo lo que necesita hacer es cambiar los dos colores de degradado de fondo utilizados por la sección.

mezclar imágenes en divi

O puede agregar un filtro a una de las imágenes para que quede en blanco y negro con saturación o reducir un poco la opacidad.

mezclar imágenes en divi

Pensamientos finales

El modo de fusión y las opciones de filtro de Divi tienen todo lo que necesita para combinar imágenes para diseños de fondo profesionales. El truco consiste en posicionar las imágenes usando unidades de longitud vw para que todo el diseño del fondo responda también en dispositivos móviles. Pero una vez que las imágenes están en posición, podemos experimentar con todo tipo de modos de mezcla e innumerables opciones de diseño para hacer diseños increíblemente mezclados.

Espero que esta publicación te haya proporcionado un poco de inspiración y espero saber de ti en los comentarios.

¡Salud!