¿Le gustaría combinar la configuración de la máscara de fondo y las opciones de transformación de patrones? Divi crear fondos únicos?
Los diseños de fondo son una excelente manera de darle a su Sitio web estilo visual y destacar entre la multitud. Los nuevos ajustes de Máscara de fondo y Transformación de patrón de Divi se pueden combinar de muchas maneras para crear estos patrones de fondo.
En este artículo, veremos cómo usar la máscara de fondo y la configuración de transformación de patrones de Divi para crear fondos interesantes para sus diseños Divi.
Vamos a empezar.
vista
Primero, aquí hay una vista previa de cada ejemplo en diferentes tamaños de pantalla (teléfono y escritorio).
Lea también: Divi: cómo usar los efectos de sombra y desplazamiento para crear contenido interactivo
Ejemplo 1
Versión 1 en escritorio
Versión 1 en el teléfono
¡¡¡Descarga DIVI ahora!!!
Versión 2 en escritorio
Versión 2 en el teléfono
Ejemplo 2
Versión 1 en escritorio
Versión 1 en el teléfono
¡¡¡Descarga DIVI ahora!!!
Versión 2 en escritorio
Versión 2 en el teléfono
Ejemplo 3
Versión 1 en escritorio
Versión 1 en el teléfono
¡¡¡Descarga DIVI ahora!!!
Versión 2 en escritorio
Versión 2 en el teléfono
Máscara de fondo Divi y opciones de transformación de patrón
Las nuevas funciones de máscara y patrón 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 línea y seleccione las pestañas Patrón de fondo o Máscara de fondo.
Una vez que haya agregado un patrón o una máscara, se mostrará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.
Agregamos una máscara de Blog de capa en la imagen a continuación. Usémoslos para demostrar cómo funcionan los ajustes de Máscara de fondo y Transformación de patrón.
Inversión horizontal
Es la inversión horizontal. Aplicamos la configuración de transformación tanto al patrón como a la máscara.
Volteo vertical
Este es el giro vertical para el patrón y la máscara.
Rotación
Este muestra Rotación para patrón y máscara.
Marcha atrás
Este ejemplo muestra Invertir para patrón y máscara.
Combinaciones de transformación de patrón y máscara de fondo
Por supuesto, también podemos usar parámetros de transformación en varias combinaciones. He aquí algunos ejemplos.
Esto gira el patrón e invierte la máscara.
Este ejemplo utiliza volteo vertical, rotación e inversión para el patrón de fondo. La máscara de fondo usa volteo horizontal, volteo vertical y rotación.
Para este ejemplo, usamos el giro y la rotación horizontales para el patrón de fondo, y el giro y la rotación verticales 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 personalizaremos y luego usaremos la configuración de transformación para modificarlo para cada ejemplo.
Para nuestros ejemplos, estamos usando una versión modificada de la sección Hero de la página de destino del diseño. Planificación de Herencias disponible en divi.
Aquí hay una descripción general de la sección en cuestión. Utiliza el color de fondo: #92a5ab.
- Fondo: #92a5ab
Parámetros de transformación de patrón y máscara de fondo Ejemplo 1
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. A continuación, crearemos una versión alternativa con el arco mirando hacia el otro lado.
Patrón de fondo
Abra la configuración de la sección, desplácese hacia abajo hasta Antecedentes 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: inversa
Máscara de fondo
Seleccionar pestaña Máscara de fondo y elige 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. Esto completa nuestra primera versión del arco con mechones.
- Máscara de fondo: Arco
- Color de la máscara: #616d72
- Transformación de máscara: Invertir
Ejemplo 1 Versión 2
A continuación, creemos una variación de nuestro diseño. Solo modifica el transformación de máscara para el patrón de fondo en volteo horizontal y volteo vertical. Esto cambia el arco para mirar en la otra dirección y compensa el patrón, por lo que no se ve como una imagen especular.
- Transformación de máscara: voltear horizontalmente, voltear verticalmente
Parámetros de transformación de patrón y máscara de fondo Ejemplo 2
Para nuestro segundo ejemplo, crearemos un óvalo en el centro de la pantalla con un patrón dentro del óvalo. A continuación, 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 elige Shippo por el motivo. Establezca la transformación del patrón en Invertir.
- Fondo del patrón: Shippo
- Transformación de patrón: inversa
Máscara de fondo
Luego selecciona la pestaña Máscara de fondo y cambie los siguientes ajustes.
- Máscara de fondo: Elipse
- Color: #758489
- Transformación de máscara: giro horizontal, rotación
tableta y teléfono
Tanto la tablet como el teléfono usarán la misma configuración, por lo que solo tendremos que cambiar la configuración de la tablet. Selecciona el Pestaña de la tableta y modificar el transformación de máscara en inversión horizontal.
- Transformación de máscara: giro horizontal, inversión
Ejemplo 2 Versión 2
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)
Luego selecciona la pestaña Máscara de fondo y elija Voltear horizontalmente, Girar e Invertir para la 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 Modificar el transformación de máscara en inversión e inversión horizontal. La versión alternativa del ejemplo dos ahora está completa.
- Transformación de máscara: giro horizontal, inversión
Parámetros de transformación de patrón y máscara de fondo Ejemplo 3
Para nuestro tercer ejemplo de configuración de transformación de máscara y patrón, 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 Configuración del dispositivo y seleccione el icono del dispositivo. despacho. Seleccionar pestaña Patrón de fondo y elija Honeycomb para el patrón de fondo. Cambia el Color a rgba(0,0,0,0.42). Para este dejaremos las opciones. Transformación de patrón desactivado 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
Luego selecciona la pestaña Máscara de fondo. Elegir Pintar para la máscara de fondo. Cambia el color a #697b82. Elija Flip Vertical para la transformación de máscara.
- Máscara de fondo: Pintura
- Color de la máscara: #697b82
- Transformación de máscara: volteo vertical
Luego seleccione Cobertura por tamaño Esto abre algunas opciones más. Elegir Abajo a la derecha por ubicación Eso es todo para la versión de escritorio. A continuación, crearemos la versión móvil.
- Tamaño de la máscara: Cubierta
- Posición de la máscara: abajo a la derecha
tableta y teléfono
Luego selecciona la pestaña tableta y modificar la transformación de la máscara fondo en volteo vertical y rotación. Esto completa el estilo de nuestro tercer ejemplo. A continuación, crearemos la versión alternativa.
- Transformación de máscara: volteo vertical, rotación
Ejemplo 3 Versión 2
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 del patrón para voltear horizontalmente, voltear verticalmente y rotar.
- Color de máscara: rgba (0,0,0,0.11)
- Transformación de máscara: giro horizontal, giro vertical, rotación
máscara de fondo
Luego selecciona la pestaña Máscara de fondo. Cambia el color a blanco y la transformación de la máscara a flip horizontal, flip vertical e inversión.
- Color de la máscara: #ffffff
- Transformación de máscara: giro horizontal, giro vertical, inversión
Luego, cambie el tamaño de la máscara para cubrir, 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 elige pestaña tablet para crear la versión móvil. Elegir pestaña máscara de fondo y seleccione las cuatro opciones de transformación de máscara. Esto completa la versión alternativa del tercer ejemplo.
- Transformación de máscara: giro horizontal, giro vertical, rotación, inversión
Resultados finales
Aquí hay una descripción general de cada ejemplo con diferentes tamaños de pantalla (Escritorio y Teléfono)
Ejemplo 1
Versión 1 en escritorio
Versión 1 en el teléfono
Versión 2 en el escritorio
Versión 2 en el teléfono
Ejemplo 2
Versión 1 en el escritorio
Versión 1 en el teléfono
Versión 2 en el escritorio
Versión 2 en el teléfono
Ejemplo 3
Versión 1 en escritorio
Versión 1 en el teléfono
Versión 2 en el escritorio
Versión 2 en el teléfono
¡¡¡Descarga DIVI ahora!!!
Ver también: Divi: Cómo crear una sección de miembros del equipo como un carrusel
Conclusión
Este 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 patrones 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ásoutils para agregar elegancia a sus fondos Divi.
La mejor manera de aprender a usarlos es jugar con los ajustes y ver qué puedes crear.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
