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

Combinar varias imágenes puede resultar ú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 y crear un diseño armonioso unificado.

Cada elemento del constructor de Divi tiene un modo de mezcla integrado y opciones de filtro para hacer que los elementos de combinación sean fáciles de hacer allí mismo en el constructor de Divi. Por supuesto, puede mezclar imágenes en Photoshop (o algún otro editor de fotos), pero para aquellos que quieran una solución Divi conveniente, esta publicación debería ayudar. Divi realmente hace que esto sea bastante fácil. Una vez que obtenga las imágenes en el lugar correcto, puede combinarlas todas con unos pocos clics. Y, por supuesto, tienes un arsenal de opciones Divi para dar 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.

Descarga el diseño GRATIS

Para poner sus manos sobre 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 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.

Descarga los archivos

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.

DESCARGAR

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!

Suscríbete 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 tema Divi 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 (constructor visual).
3. Sube algunas imágenes simuladas a la biblioteca de medios para usarlas en el tutorial. Estoy usando imágenes del Eye Doctor Layout Pack.

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 poner las cosas en marcha, agregue una fila de una columna a la sección normal.

Adición de imágenes con el módulo de imagen

Imagen # 1

Una vez configuradas la fila y la columna, agregue un módulo de imagen a la fila.

Sube una imagen con unas dimensiones de alrededor de 500 px por 700 px. Estoy usando uno del Eye Doctor Layout Pack.

Una vez que se cargue la imagen, dele a la imagen un ancho máximo usando la unidad de longitud vw para que se adapte bien a las otras imágenes que fusionaremos, y alinéela 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 esta imagen, por lo que necesitamos hacer flotar esta imagen a la izquierda. Para hacer esto, agregue el siguiente CSS al elemento principal:

float: left;

Imagen # 2

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

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

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

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

Dado que la primera imagen flota hacia la izquierda, la segunda imagen debería estar ahora adyacente a la derecha.

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

Configuración de la 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 de aproximadamente 1920 px por 1280 px]

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

Luego ajusta un poco el acolchado.

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

Configuración de filas

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

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 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?

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 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 combinación de las dos que es un poco 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;

Dar los toques finales a las dos imágenes principales

En este momento, nuestras dos imágenes principales se combinan muy bien, pero pueden usar algunos ajustes de diseño para que tengan un aspecto un poco más profesional. Podemos usar una sombra de caja blanca para suavizar los bordes de las imágenes, y usar transform translate para colocarlas exactamente donde queremos que permanezcan.

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
• Fuerza de desenfoque de sombra de caja: 6vw
• Fuerza de propagación de la sombra de la caja: 6vw
• Color de sombra: #ffffff

• Transformación de traducción: 5vw (eje X), 11vw (eje Y)

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
• Fuerza de desenfoque de sombra de caja: 3vw
• Fuerza de propagación de la sombra de la caja: 3vw
• Color de sombra: #ffffff

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

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

Agregar el contenido de texto

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

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

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

Contenido corporal

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

<h1>Book a Free Eye Exam</h1>
<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>

Diseño de texto

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

• Color del texto del texto: #ffffff
• Fuente de 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

Diseño final

Aquí está el diseño final.

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

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.

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

Pensamientos finales

El modo de fusión y las opciones de filtro de Divi tienen todo lo que necesita para fusionar imágenes para diseños de fondo profesionales. El truco consiste en colocar las imágenes utilizando unidades de longitud de vw para que todo 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 asombrosamente combinados.

Espero que esta publicación te haya proporcionado un poco de inspiración y espero tener noticias tuyas en los comentarios.

¡Salud!