Cómo usar los modos de fusión de patrones en sus imágenes de fondo Divi

La configuración de patrón de fondo integrada de Divi le permite crear diseños llamativos y agregar un poco de estilo a las imágenes de fondo en su sitio web. Puede usar la configuración de los modos de fusión para ajustar la forma en que el patrón se fusiona con la imagen de fondo. Combine imágenes de fondo, patrones y modos de fusión para crear fondos únicos y elementos de diseño para su diseño. Con 24 patrones para elegir y 16 modos de fusión, sin mencionar todas las demás configuraciones que puede usar para ajustar el aspecto del patrón, ¡el cielo es el límite para su diseño de fondo!

En este tutorial, le mostraremos algunos ejemplos de cómo agregar un modo de combinación de patrones a las imágenes de fondo de su página. Síguenos para recrear estos looks por tu cuenta, o utilízalos como inspiración para crear tus propios diseños personalizados.

¡Empecemos!

Vistazo

Aquí hay una vista previa de lo que diseñaremos en este tutorial.

Primer diseño

Segundo diseño

Tercer diseño

Lo que necesitas para empezar

Antes de comenzar, instale y active el tema Divi y asegúrese de tener la última versión de Divi en su sitio web.

¡Ahora, comencemos!

Cómo usar los modos de fusión de patrones en sus imágenes de fondo Divi

Crear una nueva página con un diseño prefabricado

Comenzaremos usando un diseño prefabricado de la biblioteca Divi. Para este diseño, utilizaremos la página de destino de Marina del paquete de diseño de Marina.

Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción para usar Divi Builder.

Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione Examinar diseños.

Busque y seleccione el diseño de la página de aterrizaje de Marina.

Seleccione Usar este diseño para agregar el diseño a su página.

Ahora estamos listos para construir nuestro diseño.

Primer diseño

Para nuestro primer diseño, agregaremos un patrón de chevron a la primera imagen de encabezado. Esto agregará algo de interés visual al encabezado. Debido al modo de fusión que aplicaremos, el patrón será más sutil y aún permitirá que la imagen de fondo sea visible.

Primero, abra la configuración de la sección y navegue a la sección Fondo. Haga clic en la pestaña de patrón y seleccione Agregar patrón de fondo.

A continuación, seleccione el tipo de patrón. Como puede ver, hay muchos patrones diferentes para elegir, y todos se pueden personalizar aún más mediante la configuración de patrones a continuación.

• Tipo de patrón: Chevrons invertidos 2

Agregar el modo de fusión de patrones

Finalmente, establezca el modo de fusión de patrones. Usaremos el modo de mezcla Soft Light para este encabezado. Este modo de fusión hace que el patrón sea más sutil para que no distraiga la imagen de fondo.

• Modo de fusión de patrón: Luz suave

Diseño final

Aquí está el diseño final para nuestro primer diseño.

Aquí está la vista móvil para este diseño.

Segundo diseño

Para el segundo diseño, agregaremos un patrón a la sección Cómo funciona del diseño de la página de aterrizaje de Marina. Usaremos un patrón de onda superpuesto a la imagen de fondo y degradado, que va bien con el tema náutico de la página. Empecemos.

Primero, vaya a la sección Cómo funciona y abra la Configuración de la sección. Abra la configuración de Fondo, luego seleccione la pestaña Patrón y luego haga clic en Agregar patrón de fondo.

Para este diseño, usaremos el tipo de patrón Waves.

• Tipo de Patrón: Ondas

A continuación, cambie el color del patrón a blanco.

• Color del patrón: #FFFFFF

Agregar el modo de fusión de patrón

Ahora podemos agregar el modo de fusión a nuestro patrón. Establezca el modo de fusión de patrones en superposición. Este modo de fusión hace que los colores oscuros de la imagen de fondo sean más oscuros y los colores claros más claros. Cuando se agrega el modo de fusión a esta sección, el patrón de ondas blancas se torna en tonos de azul, creando un efecto de patrón interesante que se ve muy bien con el diseño de esta página.

• Modo de fusión de patrón: Superposición

Diseño final

Aquí está el diseño final de la sección Cómo funciona.

Y aquí está el diseño del móvil.

Tercer diseño

Comencemos con nuestro tercer diseño. Para este diseño, agregaremos algunas franjas diagonales opacas al fondo de la sección "Reparaciones y seguridad de primer nivel".

Comience abriendo la configuración de la sección y navegando a la sección de fondo. Haga clic en la pestaña de patrón y luego seleccione Agregar patrón de fondo.

Seleccione el patrón de rayas diagonales.

A continuación, establezca el color del patrón.

• Color del patrón: rgba(255,255,255,0.25)

Voltee el patrón horizontalmente usando la configuración de Transformación de patrón. Esta es otra configuración que puede ayudarlo a ajustar el patrón a su gusto.

• Transformación de patrón: horizontal

Agregar el modo de fusión de patrón

Finalmente, establezca el modo de fusión de patrón. Para este diseño, utilizaremos el modo de mezcla de luminosidad. Esto, combinado con el color de nuestro patrón, agrega una pantalla clara a la imagen, pero aún permite que la foto se vea. Con este diseño, la imagen del barco se destaca más del fondo ya que el patrón agrega un contraste distintivo.

• Modo de fusión de patrón: Luminosidad

Diseño final

Aquí está el diseño final para esta sección.

Y aquí está el diseño móvil para esta sección.

Resultado final

Ahora echemos un vistazo al diseño completo de la página con los modos de combinación de patrones.

Pensamientos finales

Agregar un patrón puede ser una excelente manera de agregar interés visual a su imagen de fondo, pero a veces el patrón puede abrumar a la imagen de fondo. O tal vez desee que el color de su patrón cambie según la imagen detrás de él. Afortunadamente, Divi viene con muchos modos de fusión para que puedas personalizar los patrones tanto como quieras. Puede jugar con diferentes combinaciones de patrones, modos de fusión, colores de patrones, tamaños de patrones y muchas más configuraciones de Divi para crear un diseño totalmente único para sus imágenes de fondo.

¡Con suerte, este tutorial lo ha inspirado a incorporar algunos patrones y usar modos de fusión en los diseños de su sitio web! Para ver otro tutorial de diseño que usa patrones, consulte este tutorial para aprender a crear máscaras de patrones de fondo sutiles. Y para obtener una descripción general de los diferentes filtros, efectos y modos de fusión que puede usar con Divi, eche un vistazo a estos artículos: Parte 1 y Parte 2. ¿Ha usado los patrones y modos de fusión de Divi en sus imágenes de fondo antes? ¡Cuéntanos en los comentarios!