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 superponerlas 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 constructor Divi tiene un modo de mezcla incorporado y opciones de filtro para que la combinación de elementos sea fácil de hacer allí mismo en el constructor Divi. Por supuesto, puede combinar imágenes en Photoshop (o en 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 lo hace bastante fácil. Una vez que coloque las imágenes en el lugar correcto, puede combinarlas todas con unos pocos clics. Y, por supuesto, tiene un arsenal de opciones de Divi para hacer esos toques finales y llevar el diseño a nuevas alturas creativas.
Empecemos.
Aquí hay un vistazo rápido al diseño que vamos a construir juntos.
Descarga 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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 a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- 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).
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Cargue algunas imágenes simuladas en la biblioteca multimedia para utilizarlas en el tutorial. Estoy usando imágenes del Eye Doctor Layout Pack .
Después de eso, tendrás 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 normal.
Agregar las imágenes con el módulo de imagen
Imagen #1
Después de configurar la fila y la columna, agregue un módulo de imagen a la fila.
Cargue una imagen con las dimensiones alrededor de 500px por 700px. Estoy usando uno del Eye Doctor Layout Pack.
Una vez cargada la imagen, dale a la imagen un ancho máximo usando la unidad de longitud vw para que se escale bien con las otras imágenes que combinaremos, y alinéala 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 debemos hacer que esta imagen flote hacia la izquierda. Para hacer esto, agregue el siguiente CSS al elemento principal:
|
01
|
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 alrededor de 1000px por 667px.
Luego dale 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 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 sección de configuración.
Ajustes 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 1920px por 1280px]
- Degradado de fondo Color izquierdo: rgba(1,16,63,0.64)
- Gradiente de fondo Color derecho: rgba(12,113,195,0.82)
- Coloque el degradado sobre la imagen de fondo: SÍ
Luego ajusta un poco el acolchado.
- Relleno (escritorio): 0px arriba, 0px abajo
- Relleno (teléfono): 0px arriba, 10vw abajo
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
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 mezcla de las dos 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.
|
01
02
|
display: flex;align-items: center; |
Haga los toques finales a las dos imágenes superiores
En este momento, nuestras dos imágenes principales se combinan muy bien, pero pueden usar algunos ajustes de diseño para que se vean un poco más profesionales. 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:
- Sombra de caja: ver captura de pantalla
- Fuerza de desenfoque de sombra de cuadro: 6vw
- Fuerza de propagación de sombra de caja: 6vw
- Color de sombra: #ffffff
- Transformar traducir: 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:
- Sombra de caja: ver captura de pantalla
- Fuerza de desenfoque de sombra de cuadro: 3vw
- Fuerza de propagación de sombra de 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 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.
Luego agregue una fila de una columna a la sección regular.
Luego agregue un módulo de texto a la fila.
Contenido del cuerpo
Actualice el contenido del módulo de texto con el siguiente contenido del cuerpo:
|
01
02
|
<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 de diseño de la siguiente manera:
- Texto Color del texto: #ffffff
- Fuente del título: Poppins
- Color del texto del título: #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 convertirla en blanco y negro con saturación o reducir un poco la opacidad.
Pensamientos finales
El modo de mezcla y las opciones de filtro de Divi tienen todo lo que necesitas 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 de fondo responda también en dispositivos móviles. Pero una vez que las imágenes están en su lugar, podemos experimentar con todo tipo de modos de fusión y otras innumerables opciones de diseño para crear diseños increíblemente combinados.
Espero que esta publicación te haya brindado un poco de inspiración y espero saber de ti en los comentarios.
¡Salud!