Cómo usar el Gradiente de constructor Divivent para mezclar múltiples colores con gradiente sin esfuerzo

El nuevo Gradiente de Builder de Div es una herramienta poderosa que crea cualquier tipo de fondo de gradiente deseado. Es fácil de usar y puede agregar más colores para crear degrades interesantes y únicos. Sin embargo, agregar más colores puede requerir más atención en el proceso de diseño. En esta publicación, veremos cómo usar la división de Gradient Builder para mezclar más colores de gradiente sin esfuerzo, para ayudarlo a comenzar a crear sus propios gradientes multicolores. Vista previa de varios colores Gradiente primero, para echar un vistazo a lo que construiremos en este tutorial. Crearemos cuatro degrades diferentes usando el mismo aspecto.
El primer ejemplo de resultados

El segundo ejemplo de resultados

El tercer ejemplo de resultados

Cuarto ejemplo de resultados

Las mejores prácticas para combinar más colores de gradiente como todos los principios de diseño, hay algunas cosas a tener en cuenta al combinar más colores de gradiente. Aquí hay algunas cosas para recordar al combinar más colores de gradiente para obtener el mejor aspecto y la sensación para su sitio. Concéntrese en las familias de color permanecer en la misma familia de color mientras usa diferentes tonos del mismo color. Esto mantiene un menor contraste entre los colores de fondo, lo que evita que el fondo se vuelva demasiado divertido. Usaremos esta técnica para nuestro primer ejemplo.
Pruebe los colores tonificados Pruebe diferentes tonos de colores aliviados con el mismo nivel. Esto le da más color, manteniendo el contraste entre ellos bajo. Los pasteles son un buen ejemplo a este respecto. Esto le da a su fondo más tonos de color sin distraer la atención desde el primer plano. Usaremos este método en el segundo ejemplo. Priorizar la legibilidad siempre prioriza la legibilidad en su diseño. Al diseñar colores y patrones con degradación, asegúrese de que el contenido sea siempre legible. Una forma de hacerlo es empujar el gradiente a un lado de la pantalla. Esto le permite diseñar un gradiente que se destaque sin estar en el camino del contenido. Usaremos este método para el tercer ejemplo. Usilizar los degrades cruzados y mezclar combinar degradaciones que se cruzan con degrades mixtas para crear líneas duras y tonos blandos. Esto puede crear modelos interesantes sin prevenir su contenido. Pruebe diferentes direcciones y puntos de detención en el gradiente para ver qué funciona mejor para su aspecto, use estas configuraciones para crear círculos, líneas duras y más. También usaremos este método para el tercer ejemplo. Use diferentes tipos de experiencia en gradiente con diferentes tipos de gradiente para lograr resultados únicos. Por ejemplo, CONICAL es un excelente tipo de gradiente para crear un aspecto único con diferentes colores de gradiente. Usaremos cónicos en el cuarto ejemplo.
No use demasiados colores, no use más colores solo para tener más colores. Dos o tres colores suelen ser ideales, pero puede usar más si tiene cuidado. Al usar más colores, manténgalos lo más similar posible, para que se conviertan en tonos, en lugar de fuertes contrastes. No elija colores aleatorios, use colores que funcionen bien con su contenido y su sitio. Esto no solo mantiene su contenido legible, sino que también muestra que pertenece al sitio. Recuerde que UX siempre considere la experiencia del usuario. Verifique el gradiente de contenido sobre él para ver qué tan bien funciona. Ponga más usuarios para ver el contenido y el gradiente para asegurarse de que funcione bien para ellos. Gire sus gradientes Pruebe más tipos y colores con pruebas A/B para ver qué obtiene los mejores resultados. Ejemplos de múltiples colores de gradiente ahora, para ver algunos ejemplos de gradiente de constructor. Para estos ejemplos, modifiqué al héroe en la página sobre el paquete de disposición de piso gratuito que está disponible en el Div. Le di un nuevo color de fondo, #6294D1 y un nuevo color para el botón, #C1FFF4.
Color de fondo: #6294d1
El color del botón: #C1FFF4
Cómo crear más colores de gradiente con una división de gradiente de constructor primero, veamos cómo hacer los ajustes en la diva del constructor. Agregaremos el gradiente al fondo de una sección. Para comenzar, haga clic en el icono de configuración de la sección.
Luego desplácese hacia abajo hacia el fondo. Seleccione la pestaña Fondo de pantalla de gradiente y haga clic en Agregar el gradiente de fondo.

El gradiente comienza con dos colores. Seleccione las degradaciones de parada de gradiente para cambiar sus colores y llevarlos a una nueva posición inicial. Agregue cuántos degrades desea. Puede agregar más, eliminarlos, editarlos, etc. Registre el tipo, dirección, repetición, unidad y si desea obtener o no el diseño deseado.

Para una presentación detallada del Gradiente Builder, consulte el artículo Introducción a la introducción de Gradient Builder para Div.

Ejemplo de colores de gradiente múltiple Para nuestro primer ejemplo, crearemos cuatro paradas de gradiente. Abra la pestaña de fondo de gradiente y seleccione el primer gradiente. Deje la posición de gradiente al 0% y cambie el color de gradiente a #6294D1.

La posición del primer punto detiene el gradiente: 0%

Color: #6294d1
Luego agregue una nueva parada de color haciendo clic en la barra de parada de gradiente. Mueva la posición de gradiente al 29% y cambie el color a #B5BFD1,
Las paradas de gradiente se detienen el segundo punto: 29%
Color: #B5BFD1

Luego agregue la parada del tercer gradiente y mueva su posición al 84%. Cambie su color a #8AACD1.
Gradiente Detener la posición del tercer punto: 84%
Color: #8ACD1

Finalmente, cambie el color de la parada de cuarto gradiente en #B5BFD1. Dejaremos esta posición de gradiente al 100%.
La posición de cuarto punto se detiene con gradiente: 100%
Color: #B5BFD1

A continuación, ajustaremos la configuración de gradiente. Cambie la dirección a 225 grados. Deje el resto de la configuración a los valores predeterminados. Incluiré estas configuraciones aquí para que pueda verlos. Ahora puede cerrar la configuración del módulo y guardar su trabajo.

Tipo: lineal
Dirección: 225 grados

Repetir gradiente: no
Unidad de gradiente: porcentaje de gradiente sobre la imagen de fondo: no
Múltiples colores de gradiente Para el segundo ejemplo para el segundo ejemplo, crearemos tres paradas de gradiente. Abra la configuración del jardín de gradiente y cambie el color de la primera parada de gradiente en #BFFFC. Deje su posición al 0%.
Posición de parada de primer gradiente: 0%
Color: #bffffc
Agregue una nueva parada de gradiente y mueva su posición al 42%. Cambie su color a #BBC7F9.

Posición de parada de segundo gradiente: 42%
Color: #BBC7F9
Luego cambie el color de la parada del tercer gradiente en #ADBDD1. Dejaremos la posición de gradiente al 100%.

Posición de cierre del tercer gradiente: 100%
Color: #ADBDD1
Luego cambie el tipo de gradiente en la circular. Deje el resto de la configuración a los valores predeterminados. Esto crea un punto caliente en el centro de la sección. Cierre su configuración y guarde su trabajo.

Tipo de gradiente: circular
Múltiples colores de gradiente Ejemplo tres Para el tercer ejemplo, usaremos tres paradas de gradiente para construir nuestro gradiente. Mueva la posición para el primer gradiente al 15% y cambie su color a #AFC3ED.
Posición de parada de primer gradiente: 15%

Color: #AFC3ed
Luego mueva la segunda parada de gradiente al 33% y cambie el color a #ADBDD1.

Posición de parada de segundo gradiente: 33%
Color: #bffffc
Luego mueva la parada del tercer gradiente al 33%, directamente por encima de la segunda parada de gradiente y cambia el color a #ADBDD1. Parece que tuviste dos degrades en la barra de parada de gradiente.

Tercera posición de parada en el gradiente: 33%
Color: #ADBDD1
Tendrá un arco interesante que crearemos con la configuración. Cambie el tipo de gradiente a la posición circular y de gradiente a la derecha. Cierre la configuración y guarde su trabajo. TIP: Circular

Posición: Derecha
Múltiple ejemplo de colores de gradiente Cuarto ejemplo incluye cinco paradas de gradiente. Para la primera parada del gradiente, cambie el color a #878EBC. Déjalo en 0% para la posición.
Posición de parada de primer gradiente: 0%

Color: #878EBC
Agregue la segunda parada de gradiente a una posición del 22%. Cambie su color a #A0C1D6.
Posición de parada de segundo gradiente: 22%

Color: #A0C1D6
Luego agregue la parada del tercer gradiente a una posición del 48%. Cambie su color a #BFFFFC.
Tercera posición de parada en el gradiente: 48%

Color: #bffffc
Para hacer la cuarta parada en el gradiente, colóquelo a la posición del 73% y cambie su color a #D3D8FF.
Posición de parada de cuarto gradiente: 73%

Color: #d3d8ff
A la parada de quinto gradiente, muévalo a una posición del 77% y cambie el color a #C6DFFF.
La quinta posición de parada en el gradiente: 77%

Color: #c6dfff
Finalmente, cambie el tipo de gradiente a lo cónico y cambie la dirección del gradiente a 233 grados. Cierre su configuración y guarde su trabajo.
Tipo: cónico

Dirección: 233 grados
Resultados con múltiples colores Gradiente primer ejemplo de resultados
El segundo ejemplo de resultados

El tercer ejemplo de resultados
Cuarto ejemplo de resultados