¿Te gustaría diseñar un fondo único usando máscaras de patrones? Divi ?
Las nuevas máscaras de patrón de fondo de Divi han abierto muchas opciones de diseño para los fondos. Funcionan muy bien con colores de fondo y patrones para crear muchos diseños únicos.
En este artículo, veremos cómo crear sutiles máscaras de patrón de fondo con Divi . También discutiremos los beneficios de usar una máscara sutil y crearemos tres ejemplos.
Vamos a empezar.
Vista previa de máscara de patrón de fondo
Antes de comenzar a diseñar, aquí hay una vista previa de lo que construiremos en este tutorial Divi.
Ejemplo 1
Lea también: Divi: cómo cambiar el degradado de un fondo al pasar el mouse
Ejemplo 2
Ejemplo 3
Cómo crear una máscara de fondo
La máscara de fondo cubrirá el patrón de fondo y revelará partes del patrón. funciona muy bueno con colores y patrones de fondo. Puede ajustar el fondo para que se ajuste a la contenido, ajustar el contenido para ajustarse al fondo o ajustar ambos.
Ver también: Divi: Cómo usar el "Generador de degradados" para embellecer tus imágenes
Primero, abra el parámetros de la sección donde desea agregar la máscara de fondo.
A continuación, deberá elegir un color de fondo para la sección. Desplácese hasta Antecedentes. Con la pestaña Fondo seleccionada, elige tu color fondo en el selector de color.
A continuación, deberá elegir un patrón de fondo y establecer su tamaño y ubicación. Seleccionar pestaña Patrón de fondo y haga clic Agregar patrón de fondo.
Esto abre una lista de opciones de modelo. Elige tu patrón en la lista. Completará la sección.
A continuación, deberá elegir una máscara de fondo y ajustar su color y configuración para que se adapte a su diseño. Seleccionar pestaña Máscara de fondo y haga clic Añadir máscara de fondo.
Se abrirá otro modal con opciones de máscara. Elige tu mascarilla fondo en la lista. La máscara será blanca hasta que elijas un color.
ajustarlos configuración de la máscara de fondo para lograr el look deseado. Puede cambiar el tamaño, la posición, la dirección de la máscara, la rotación, etc. Jugar con estos ajustes puede ayudarte a crear diseños interesantes.
Aquí hay una vista previa del fondo que acabamos de crear sin ningún módulo. Los colores son similares, pero son lo suficientemente diferentes como para resaltar un poco. Esto evita que distraiga demasiado.
Ejemplos de máscaras de patrón de fondo sutil
Ahora veamos tres ejemplos de máscaras de patrón de fondo.
Agregamos una máscara de fondo a la sección Héroe de página de inicio corporativa gratuita disponible en divi.
Aquí hay una vista previa de la página original antes de agregar las máscaras de patrón de fondo.
También cambiaremos los colores de fondo de los botones. Usando los mismos conceptos de diseño sutiles, haremos que se destaquen más que en el fondo.
El divisor es otro elemento que veremos cambiar de color, pero este elemento usa transparencia para obtener su color del fondo, por lo que no necesitaremos cambiar su color.
Ejemplo 1
Este ejemplo usará el fondo original y los colores de los botones.
Color de fondo
Para nuestro primer ejemplo, estamos usando el color de fondo original para este diseño: #1d1d25. También mantendremos el color original del botón: #4c594c
- Color de fondo: #1d1d25
- Color del botón: #4c594c
Patrón de fondo
Seleccione la pestaña Patrón de fondo y elige Rayas diagonales 2. Cambia el color del patrón a #383838.
- Patrón de fondo: rayas diagonales 2
- Color del patrón: #383838
- Tamaño: tamaño real
- Repetir origen: arriba a la izquierda
- Repetición de patrón: Repetir
Máscara de fondo
Luego selecciona la pestaña Máscara de fondo. Elegir Signo de intercalación y establezca el color en #383838.
- Máscara: Careta
- Color de la máscara: #383838
Debajo del color de la máscara, seleccione la opción para transformación horizontal y la relación de aspecto retrato. Cierre la configuración de la sección y guarde su trabajo.
- Transformación de máscara: horizontalmente
- Relación de aspecto de la máscara: grande (retrato)
Ejemplo 2
Para nuestro segundo ejemplo, cambiaremos el fondo y los colores de los botones a púrpura.
Color de fondo
Abrirlos parámetros de la sección . Asegurarse que usted están en la pestaña Color de fondo y cambiarlo Color en #483c56.
- Fondo: #483c56
Patrón de fondo
Luego selecciona la pestaña patrón de espalda fondo y elija Tufted para el patrón de fondo. Cambia el color del patrón a #635c84.
- Patrón de fondo: copetudo
- Color del patrón: #635c84
Entonces escoge Tamaño personalizado . Esto abre otro conjunto de opciones. Cambialo anchura en 10vw.
- Tamaño del patrón: Tamaño personalizado
- Ancho del patrón: 10vw
- Repetir Origen: arriba a la izquierda
- Repetición de patrón: Repetir
Máscara de fondo
Ahora es el momento de configurar nuestra máscara de fondo.
Seleccionar pestaña Máscara de fondo y elige la máscara llamada Arch. Cambia su color a #67557a.
- Máscara: Arco
- Color de la máscara: #67557a
A continuación, establezca sus opciones para en Horizontal, Vertical y Rotación. Para el relación de aspecto, elige la opción ancha o apaisada. Cierra la configuración de la sección.
- Transformación de Máscara: Horizontal, Vertical y Rotación
- Relación de aspecto de la máscara: ancho (horizontal)
Bouton
Finalmente, ajustemos el botón CTA en esta sección Hero. Queremos que se mezcle con el diseño, pero también queremos que se destaque.
Abrirlos configuración de botones. Solo tendremos que cambiar el color de fondo. Puede ser de un color similar al del fondo, pero lo suficientemente diferente como para no perderse en la página. Elegiremos un color más brillante para el fondo. Dejaremos el mismo color de texto.
Seleccione la pestaña Diseño , desplácese hasta Antecedentes y modificar el Color de fondo del botón en #8b4dc1. Nos da el contraste que queremos y funciona muy bien con el fondo morado. Cierre la configuración del botón y guarde su página.
- Fondo del botón: #8b4dc1
Ejemplo 3
Para nuestro tercer ejemplo, cambiaremos el fondo y los colores de los botones a verde utilizando los mismos conceptos que en los dos ejemplos anteriores.
Color de fondo
Primero, abra el parámetros de la sección . Con pestaña Color de fondo.
- Fondo: #497762
Patrón de fondo
Luego selecciona la pestaña Patrón de fondoy cambie los parámetros de suma a seguir.
- Patrón de fondo: Cuadrados
- Color del patrón: #3a604e
- Tamaño: tamaño real
- Origen de la repetición del patrón: arriba a la izquierda
- Repetición de patrón: Repetir
Máscara de fondo
Luego selecciona la pestaña Máscara de fondo.
- Máscara: Líneas diagonales
- Color: #3a604e
A continuación, establezca los siguientes parámetros:
- Transformación de máscara: horizontalmente
- Relación de aspecto de la máscara: Paisaje
- Tamaño: Cubierta
- Posición de la máscara: Centro superior
Bouton
Finalmente, abra el configuración de botones y seleccione la pestaña Diseño. Desplácese hacia abajo y cambie el color de fondo del botón en #61a380. Cierre la configuración del módulo y guarde su trabajo.
- Fondo del botón: #61a380
Resultados finales
Ver también: Divi: Cómo personalizar la cesta y los iconos de búsqueda del módulo "Menú de ancho completo"
Así es como se ven nuestras máscaras de patrones de fondo en la sección de héroes de nuestro diseño.
Ejemplo 1
Ejemplo 2
Ejemplo 3
¡¡¡Descarga DIVI ahora!!!
Conclusión
Este es nuestro vistazo a cómo crear sutiles máscaras de patrón de fondo con Divi. Una máscara sutil se destaca lo suficiente como para dar textura visual al fondo. Se ven geniales sin distraer la atención de tus llamadas a la acción y otros elementos.
Las máscaras de patrón de fondo de Divi son fáciles de usar y su configuración te permite crear algo único. Experimente con la configuración para crear sus propias máscaras de patrón de fondo.
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.
...
