Cómo usar la configuración de transformación de patrón y máscara de fondo de Divi

Los patrones de fondo son una excelente manera de darle a su sitio web un toque visual y destacar entre la multitud. La nueva máscara de fondo de Divi y la configuración de transformación de patrones se pueden combinar de muchas maneras para crear esos patrones de fondo. En esta publicación, veremos cómo usar la máscara de fondo de Divi y la configuración de transformación de patrones para crear algunos fondos interesantes para sus diseños de Divi.

Empecemos.

Avance

Primero, aquí hay un vistazo a cada ejemplo con el escritorio, el teléfono y las opciones alternativas para cada uno.

Resultados del ejemplo uno

Versión regular de escritorio

Teléfono versión regular

Versión alternativa de escritorio

Teléfono de versión alternativa

Ejemplo dos resultados

Versión regular de escritorio

Teléfono versión regular

Versión alternativa de escritorio

Teléfono de versión alternativa

Ejemplo tres resultados

Versión regular de escritorio

Teléfono versión regular

Versión alternativa de escritorio

Teléfono de versión alternativa

Máscara de fondo Divi y opciones de transformación de patrón

Las nuevas funciones de patrón y máscara de fondo de Divi incluyen varias opciones para ajustarlas. Los ajustes incluyen volteo horizontal y vertical, rotación e inversión. Para ver las opciones, vaya a la configuración de Fondo de una sección o fila y seleccione las pestañas Patrón de fondo o Máscara de fondo.

Una vez que agregue un patrón o una máscara, aparecerán los ajustes de transformación. Simplemente haga clic en las opciones que desea utilizar. Podemos usarlos juntos y en la combinación que queramos.

Cómo funcionan los ajustes de transformación de patrón y máscara de Divi

El patrón a continuación es Zig Zag con la configuración predeterminada.

He agregado una máscara de blog de capa en la imagen a continuación. Usémoslos para demostrar cómo funcionan las configuraciones de transformación de patrón y máscara de fondo.

Volteo horizontal

Esto es volteo horizontal. He aplicado la configuración de transformación tanto al patrón como a la máscara.

Volteo vertical

Este es Vertical Flipping para el patrón y la máscara.

Giratorio

Este muestra Rotación para el patrón y la máscara.

Invirtiendo

Este ejemplo muestra la inversión para el patrón y la máscara.

Combinaciones de máscara de fondo y transformación de patrón

Por supuesto, también podemos usar la configuración de transformación en varias combinaciones. Aquí están algunos ejemplos.

Éste gira el patrón e invierte la máscara.

En este ejemplo, se utiliza el volteo vertical, la rotación y la inversión para el patrón de fondo. La máscara de fondo utiliza Giro horizontal, Giro vertical y Rotación.

Para este ejemplo, he usado Voltear y rotar horizontalmente para el patrón de fondo, y Voltear y rotar verticalmente para la máscara de fondo.

Ejemplos de configuración de transformación de patrón y máscara de fondo

A continuación, veamos cómo se pueden usar estos ajustes con los diseños de Divi. Usaremos una sección como punto de partida y crearemos tres ejemplos. Lo diseñaremos y luego usaremos la configuración de transformación para cambiarlo para cada ejemplo.

Para mis ejemplos, estoy usando una versión modificada de la sección principal de la página de destino de Planificación patrimonial que está disponible en Divi. Aquí hay un vistazo a mi sección. La modificación simplifica la sección del héroe para nuestras necesidades. Utiliza el Color de fondo Fondo: #92a5ab.

• Fondo: #92a5ab

Configuración de transformación de patrón y máscara de fondo Ejemplo uno

Nuestro primer ejemplo nos da un arco que se encuentra verticalmente en el centro de la pantalla. Un lado de la pantalla tiene un patrón empenachado. Luego, crearemos una versión alternativa con el arco mirando en la otra dirección.

Patrón de fondo

Abra la configuración de la sección, desplácese hacia abajo hasta Fondo y seleccione la pestaña Patrón de fondo . Elija Tufted para el Patrón de fondo e Invertir para Transformación de patrón.

• Patrón de fondo: copetudo
• Transformación de patrón: inversión

Máscara de fondo

Seleccione la pestaña Máscara de fondo y elija Arco para la Máscara de fondo. Cambie el Color de la máscara a #616d72 y establezca la Transformación de la máscara en Invertir. Así termina nuestra primera versión del arco con mechones.

• Máscara de fondo: Arco
• Color: #616d72
• Transformación de máscara: inversión

Ejemplo Uno Variación

A continuación, creemos una variación de nuestro diseño. Simplemente cambie la transformación de máscara para el patrón de fondo a volteo horizontal y volteo vertical. Esto cambia el arco para mirar en la otra dirección y cambia el patrón, por lo que no se ve como una imagen especular.

• Transformación de máscara: volteo horizontal, volteo vertical

Configuración de transformación de patrón y máscara de fondo Ejemplo dos

Para nuestro segundo ejemplo, crearemos un óvalo en el centro de la pantalla con un patrón dentro del óvalo. Luego, cambiaremos la ubicación del patrón. También modificaremos este para diferentes tamaños de pantalla.

Patrón de fondo

En la configuración de Fondo, seleccione la pestaña Patrón de fondo y elija Shippo para el patrón. Establezca la Transformación de patrón en Invertir.

• Patrón de fondo: Shippo
• Transformación de patrón: inversión

Máscara de fondo

A continuación, seleccione la pestaña Máscara de fondo . Elija Eclipse para la máscara de fondo y desplace el cursor sobre las opciones de fondo. Seleccione el icono de la tableta que aparece. Esto abre la configuración del dispositivo. Para la configuración del escritorio, establezca Color en #758489. Para Transformación de máscara, elija Giro y giro horizontal. Esto finaliza la versión de escritorio. Vamos a cambiarlo por la versión móvil.

• Máscara de fondo: Eclipse
• Color: #758489
• Transformación de máscara: volteo horizontal, rotación

Tableta y teléfono

La tableta y el teléfono usarán la misma configuración, por lo que solo necesitaremos cambiar la configuración de la tableta. Seleccione la pestaña Tableta y cambie Transformación de máscara a Giro horizontal.

• Transformación de máscara: volteo horizontal, inversión

Ejemplo Dos Variación

A continuación, crearemos la variación para nuestro segundo ejemplo. Primero, seleccione la pestaña Patrón de fondo y configure el Color del patrón en rgba (0,0,0,0.06).

• Color del patrón: rgba(0,0,0,0.06)

A continuación, seleccione la pestaña Máscara de fondo y elija Giro horizontal, Rotación e Inversión para Transformación de máscara.

• Transformación de máscara: volteo horizontal, rotación, inversión

Tableta y teléfono

Para las opciones de tableta y teléfono, seleccione el icono de la tableta . Cambie la Transformación de máscara a Voltear e invertir horizontalmente. La versión alternativa del ejemplo dos ahora está completa.

• Transformación de máscara: volteo horizontal, inversión

Configuración de transformación de patrón y máscara de fondo Ejemplo tres

Para nuestro tercer ejemplo de configuración de transformación de patrón y máscara, usaremos un patrón de panal con una máscara de pintura. También crearemos una versión móvil para este.

Patrón de fondo

Primero, elija la pestaña de configuración del dispositivo y seleccione el icono del escritorio . Seleccione la pestaña Patrón de fondo y elija Panal para el Patrón de fondo. Cambia el Color a rgba(0,0,0,0.42). Para este, dejaremos las opciones de Transformación de patrón deshabilitadas. Los agregaremos para la versión alternativa.

• Patrón de fondo: Panal
• Color del patrón: rgba(0,0,0,0.42)
• Transformación de patrón: ninguno

Máscara de fondo

A continuación, seleccione la pestaña Máscara de fondo . Elija Paint para la máscara de fondo. Cambie el Color a #697b82. Elija Volteo vertical para Transformación de máscara.

• Máscara de fondo: Pintura
• Color: #697b82
• Transformación de máscara: volteo vertical

A continuación, seleccione Cubierta para el Tamaño. Esto abre algunas opciones más. Elija la parte inferior derecha para la posición. Eso es todo para la versión de escritorio. A continuación, crearemos la versión móvil.

• Tamaño: Cubierta
• Posición: abajo a la derecha

Tableta y teléfono

A continuación, seleccione la pestaña de la tableta y cambie la Transformación de máscara de fondo a Giro y rotación vertical. Esto completa el estilo de nuestro tercer ejemplo. A continuación, crearemos la versión alternativa.

• Transformación de máscara de fondo: volteo vertical, rotación

Ejemplo Tres Variación

Para la versión alternativa de este ejemplo, ajustaremos tanto el Patrón de fondo como la Máscara de fondo.

Patrón de fondo

Para el Patrón de fondo , cambie el Color del patrón a rgba(0,0,0,0.11). Cambie la Transformación de patrón a Giro horizontal, Giro vertical y Rotación.

• Color del patrón: rgba(0,0,0,0.11)
• Transformación de patrón: volteo horizontal, volteo vertical, rotación

Máscara de fondo

A continuación, seleccione la pestaña Máscara de fondo . Cambie el Color a blanco y la Transformación de máscara a Giro horizontal, Giro vertical e Inversión.

• Color: #ffffff
• Transformación de máscara: volteo horizontal, volteo vertical, inversión

A continuación, cambie el Tamaño de la máscara a Cubrir y luego elija Centro para la Posición de la máscara.

• Tamaño de la máscara: Cubierta
• Posición de la máscara: Centro

Tableta y teléfono

Finalmente, elija la pestaña de la tableta para crear la versión móvil. Elija la pestaña Máscara de fondo y seleccione las cuatro opciones para Transformar máscara. Esto completa la versión alternativa del tercer ejemplo.

• Transformación de máscara de fondo: volteo horizontal, volteo vertical, rotación, inversión

Resultados

Aquí hay un vistazo a cada ejemplo con el escritorio, el teléfono y las opciones alternativas para cada uno.

Resultados del ejemplo uno

Versión regular de escritorio

Teléfono versión regular

Versión alternativa de escritorio

Teléfono de versión alternativa

Ejemplo dos resultados

Versión regular de escritorio

Teléfono versión regular

Versión alternativa de escritorio

Teléfono de versión alternativa

Ejemplo tres resultados

Versión regular de escritorio

Teléfono versión regular

Versión alternativa de escritorio

Teléfono de versión alternativa

pensamientos finales

Ese es nuestro vistazo a cómo usar la máscara de fondo de Divi y la configuración de transformación de patrones para crear muchos diseños de fondo interesantes. Dado que los patrones y las máscaras se pueden usar juntos, sus configuraciones de transformación también se pueden usar juntas. Esto abre muchas opciones de diseño, brindándole aún más herramientas para agregar elegancia a sus fondos Divi. La mejor manera de aprender a usarlos es jugar con los ajustes y ver qué puedes crear.

Queremos escuchar de ti. ¿Has probado la máscara de fondo de Divi y la configuración de transformación de patrones en tus diseños de Divi? Cuéntanoslo en los comentarios.