Cómo usar The Divi Gradient Builder para mezclar múltiples colores de degradado sin esfuerzo

Publicado: 2022-05-18

El nuevo Gradient Builder de Divi es una poderosa herramienta que crea cualquier tipo de fondo degradado que desees. Es fácil de usar y puede agregar múltiples colores para crear degradados que sean interesantes y únicos. Sin embargo, agregar más colores puede requerir más tiempo en el proceso de diseño. En esta publicación, veremos cómo usar Divi Gradient Builder para combinar múltiples colores de degradado sin esfuerzo para ayudarlo a comenzar a crear sus propios degradados multicolores.

Vista previa de varios colores degradados

Primero, echemos un vistazo a lo que construiremos en este tutorial. Crearemos cuatro degradados diferentes usando el mismo diseño.

Resultados del primer ejemplo

Resultados del primer ejemplo

Resultados del segundo ejemplo

Resultados del segundo ejemplo

Resultados del tercer ejemplo

Resultados del tercer ejemplo

Resultados del cuarto ejemplo

Resultados del cuarto ejemplo

Mejores prácticas para combinar múltiples colores degradados

Como todos los principios de diseño, hay algunas cosas que se deben tener en cuenta al combinar varios colores degradados. Aquí hay algunas cosas que debe tener en cuenta al combinar varios colores degradados para obtener la mejor apariencia para su sitio web.

Centrarse en las familias de colores

Manténgase dentro de la misma familia de colores mientras usa diferentes tonos del mismo color. Esto mantiene un contraste más bajo entre los colores de fondo, lo que evita que el fondo distraiga demasiado. Usaremos esta técnica para nuestro primer ejemplo.

Pruebe colores atenuados

Pruebe varios tonos de colores atenuados con el mismo nivel. Esto le da más color mientras mantiene bajo el contraste entre ellos. Los pasteles son un buen ejemplo de esto. Esto le da a su fondo múltiples tonos de color sin que distraiga el primer plano. Usaremos este método en nuestro segundo ejemplo.

Priorizar la legibilidad

Prioriza siempre la legibilidad en tu diseño. Cuando diseñe colores y patrones con sus degradados, asegúrese de que su contenido sea siempre legible. Una forma de hacer esto es empujar el degradado hacia un lado de la pantalla. Esto le permite diseñar un degradado que se destaque sin interferir con el contenido. Usaremos este método para nuestro tercer ejemplo.

Usar degradados cruzados y combinados

Combine degradados que se cruzan con degradados combinados para crear líneas duras y tonos suaves. Esto puede crear patrones interesantes sin interferir con su contenido. Pruebe diferentes direcciones y puntos de parada de degradado para ver qué funciona mejor para su diseño. Use esta configuración para crear círculos, líneas marcadas y más. También usaremos este método para nuestro tercer ejemplo.

Usar diferentes tipos de degradado

Experimente con diferentes tipos de gradientes para obtener resultados únicos. Por ejemplo, cónico es un gran tipo de degradado para crear una apariencia única con diferentes colores de degradado. Usaremos cónica en nuestro cuarto ejemplo.

No use demasiados colores

No use más colores solo por tener más colores. Dos o tres colores suelen ser ideales, pero puedes usar más si tienes cuidado. Cuando use aún más colores, manténgalos lo más similares posible para que se conviertan en sombras en lugar de fuertes contrastes.

No elija colores al azar

Use colores que funcionen bien con su contenido y sitio web. Esto no solo mantiene su contenido legible, sino que también parece que pertenece al sitio web.

Recuerda UX

Considere siempre la experiencia del usuario. Verifique el degradado con contenido sobre él para ver qué tan bien funciona. Pida a varios usuarios que observen el contenido y el degradado para asegurarse de que les funcione bien.

Pruebe sus gradientes

Pruebe varios tipos y colores de degradados con pruebas a/b para ver cuál obtiene los mejores resultados.

Ejemplos de varios colores degradados

Ahora, veamos algunos ejemplos de Gradient Builder. Para estos ejemplos, modifiqué al héroe de la página Acerca de del Paquete de diseño de pisos gratuito que está disponible en Divi. Le he dado un nuevo color de fondo, #6294d1, y un nuevo color de botón, #c1fff4.

  • Color de fondo: #6294d1
  • Color del botón: #c1fff4

Ejemplos de Divi Gradient Builder

Cómo crear múltiples colores degradados con Divi Gradient Builder

Primero, veamos cómo hacer los ajustes dentro del Divi Gradient Builder. Agregaremos el degradado al fondo de una sección. Para comenzar, haga clic en el icono de configuración de la sección .

Cómo crear múltiples degradados con Divi Gradient Builder

A continuación, desplácese hacia abajo hasta Fondo . Seleccione la pestaña Degradado de fondo y haga clic en Agregar degradado de fondo .

Cómo crear múltiples degradados con Divi Gradient Builder

El degradado comienza con dos colores. Seleccione los degradados en la barra de Gradient Stops para cambiar sus colores y arrástrelos a una nueva posición inicial. Agrega tantos degradados como quieras. Puede agregar más, eliminarlos, editarlos, etc.

Cómo crear múltiples degradados con Divi Gradient Builder

Ajuste el Tipo , la Dirección , la Repetición , la Unidad y si lo desea o no sobre la imagen de fondo para obtener el diseño que desea.

Cómo crear múltiples degradados con Divi Gradient Builder

Para obtener una descripción detallada de Divi Gradient Builder, consulte el artículo Introducción al Advanced Gradient Builder For Divi.

Múltiples colores degradados Ejemplo uno

Para nuestro primer ejemplo, crearemos cuatro paradas de degradado. Abra la pestaña Degradado de fondo y seleccione el primer degradado . Deje la Posición del degradado en 0% y cambie el Color del degradado a #6294d1.

  • El gradiente se detiene en la posición del primer punto: 0 %
  • Color: #6294d1

Divi Gradient Builder Ejemplo uno

A continuación, agregue una nueva parada de color haciendo clic en la barra de parada de degradado. Mueva su Posición de degradado al 29% y cambie su Color a #b5bfd1,

  • El gradiente se detiene en la posición del segundo punto: 29 %
  • Color: #b5bfd1

Divi Gradient Builder Ejemplo uno

A continuación, agregue la tercera Parada de degradado y mueva su Posición al 84%. Cambia su Color a #8eacd1.

  • El gradiente detiene la posición del tercer punto: 84 %
  • Color: #8eacd1

Divi Gradient Builder Ejemplo uno

Por último, cambie el color de la cuarta parada de degradado a #b5bfd1. Dejaremos esta posición de degradado al 100%.

  • El gradiente se detiene en la cuarta posición del punto: 100 %
  • Color: #b5bfd1

Divi Gradient Builder Ejemplo uno

A continuación, ajustaremos la configuración del degradado. Cambie la dirección a 225 grados. Deje el resto de la configuración en sus valores predeterminados. Incluiré esas configuraciones aquí para que puedas verlas. Ahora puede cerrar la configuración del módulo y guardar su trabajo.

  • Tipo: Lineal
  • Dirección: 225 grados
  • Gradiente de repetición: No
  • Unidad de gradiente: porcentaje
  • Colocar degradado encima de la imagen de fondo: No

Divi Gradient Builder Ejemplo uno

Múltiples colores degradados Ejemplo dos

Para nuestro segundo ejemplo, crearemos tres paradas de degradado. Abra la configuración de Degradado de fondo y cambie el Color de la primera parada de degradado a #bffffc. Deja su Posición en 0%.

  • Primera posición de parada de gradiente: 0%
  • Color: #bffffc

Divi Gradient Builder Ejemplo dos

Agregue una nueva parada de degradado y mueva su Posición al 42%. Cambia su Color a #bbc7f9.

  • Posición de parada del segundo gradiente: 42 %
  • Color: #bbc7f9

Divi Gradient Builder Ejemplo dos

A continuación, cambie el Color de la tercera parada de degradado a #adbdd1. Dejaremos su Posición de degradado al 100%.

  • Posición de parada del tercer gradiente: 100 %
  • Color: #adbdd1

Divi Gradient Builder Ejemplo dos

A continuación, cambie el Tipo de degradado a Circular. Deje el resto de la configuración en sus valores predeterminados. Esto crea un punto caliente en el centro de la sección. Cierra tu configuración y guarda tu trabajo.

  • Tipo de degradado: Circular

Divi Gradient Builder Ejemplo dos

Múltiples colores degradados Ejemplo tres

Para nuestro tercer ejemplo, usaremos tres paradas de gradiente para construir nuestro gradiente. Mueva la Posición para el primer degradado al 15% y cambie su Color a #afc3ed.

  • Primera posición de parada de gradiente: 15 %
  • Color: #afc3ed

Divi Gradient Builder Ejemplo tres

Luego, mueva la segunda parada de degradado al 33% y cambie su Color a #adbdd1.

  • Posición de parada del segundo gradiente: 33 %
  • Color: #bffffc

Divi Gradient Builder Ejemplo tres

A continuación, mueva la tercera parada de degradado al 33 %, directamente encima de la segunda parada de degradado, y cambie su Color a #adbdd1. Parecerá que tiene dos degradados en la barra de parada de degradado.

  • Posición de parada del tercer gradiente: 33 %
  • Color: #adbdd1

Divi Gradient Builder Ejemplo tres

Este tendrá un arco interesante que crearemos con la configuración. Cambie el Tipo de degradado a Circular y la Posición de degradado a Derecha. Cierra la configuración y guarda tu trabajo.

  • Tipo: Circular
  • Posición: Derecha

Divi Gradient Builder Ejemplo tres

Múltiples colores degradados Ejemplo cuatro

Nuestro cuarto ejemplo incluye cinco paradas de gradiente. Para la primera parada de degradado , cambie el Color a #878ebc. Deje este en 0% para la Posición.

  • Primera posición de parada de gradiente: 0%
  • Color: #878ebc

Divi Gradient Builder Ejemplo cuatro

Agregue la segunda parada de degradado en una Posición del 22%. Cambia su Color a #a0c1d6.

  • Posición de parada del segundo gradiente: 22 %
  • Color: #a0c1d6

Divi Gradient Builder Ejemplo cuatro

Luego, agregue la tercera parada de degradado en una Posición de 48%. Cambia su Color a #bffffc.

  • Posición de parada del tercer gradiente: 48 %
  • Color: #bffffc

Divi Gradient Builder Ejemplo cuatro

Para nuestra cuarta parada de gradiente , colóquela en la Posición 73% y cambie su Color a #d3d8ff.

  • Posición de parada del cuarto gradiente: 73 %
  • Color: #d3d8ff

Divi Gradient Builder Ejemplo cuatro

Para la quinta parada de degradado , muévala a la Posición 77% y cambie el Color a #c6dfff.

  • Quinta posición de parada de gradiente: 77 %
  • Color: #c6dfff

Divi Gradient Builder Ejemplo cuatro

Finalmente, cambie el Tipo de degradado a Cónico y cambie la Dirección del degradado a 233 grados. Cierra la configuración y guarda tu trabajo.

  • Tipo: Cónico
  • Dirección: 233 grados

Divi Gradient Builder Ejemplo cuatro

Resultados de varios colores degradados

Resultados del primer ejemplo

Resultados del primer ejemplo

Resultados del segundo ejemplo

Resultados del segundo ejemplo

Resultados del tercer ejemplo

Resultados del tercer ejemplo

Resultados del cuarto ejemplo

Resultados del cuarto ejemplo

Pensamientos finales sobre múltiples colores degradados

Ese es nuestro vistazo a cómo usar Divi Gradient Builder para mezclar múltiples colores degradados sin esfuerzo. Es divertido jugar con Gradient Builder. Puede agregar tantos colores como desee, pero deberá seguir algunos principios de diseño simples para que se vean geniales juntos. Estos ejemplos muestran lo fácil que es usar de tres a cinco colores para crear su degradado y hacer que funcionen bien con el diseño de su sitio web.

Queremos escuchar de ti. ¿Ha utilizado estos métodos para crear múltiples colores degradados con el nuevo Gradient Builder de Divi? Cuéntanos tu experiencia en los comentarios.