Comparación de los tipos de degradado en Divi's Gradient Builder

Los tipos de degradado son parte del nuevo Divi Gradient Builder. Los nuevos tipos de degradados de Divi le brindan la posibilidad de agregar diferentes formas y colores a sus fondos. En esta publicación, compararemos estos tipos de degradados y le mostraremos cómo usarlos para crear fondos únicos.

Empecemos.

¿Qué son los tipos de degradado Divi?

El nuevo Gradient Builder de Divi agrega varias características nuevas de degradado que incluyen tipos de degradado. Hay cuatro tipos de gradiente para elegir:

• Lineal
• Circular
• Elíptico
• Cónico

Cada uno de los tipos muestra el degradado de forma diferente. Se utilizan para dar forma al degradado para que se muestre como un patrón de color lineal, en un círculo, una elipse o un cono. Los veremos en detalle en nuestros ejemplos.

Los tipos de degradado también se ven afectados por los demás controles, como la posición, si se repite o no, la unidad de medida de la barra deslizante de degradado y la ubicación del degradado sobre el fondo.

Cada ajuste puede tener un impacto pequeño o enorme en el gradiente. El degradado puede ser sutil o puede resaltar. Se pueden hacer cambios pequeños o grandes con un solo ajuste.

Con esto en mente, veamos algunos ejemplos de degradados usando cada uno de los tipos de degradados. Mostraremos tres ejemplos de cada tipo de degradado. El primero será un tipo estándar de degradado que verías en la web. Los siguientes dos serán un poco más experimentales, solo para ver qué se puede hacer con los tipos de degradado.

Ejemplos de tipos de degradado

Para los ejemplos de tipos de degradado, estoy usando la sección principal de la página de destino del paquete de diseño gratuito Bed and Breakfast que está disponible en Divi. Esta sección ya tiene un degradado, pero lo reemplazaremos y experimentaremos un poco. Podemos eliminar el degradado de fondo original o modificarlo. Los resultados son los mismos. Para simplificar, lo modificaré.

Personalicé el texto del título, cambiándolo de negro a blanco.

Tipo de degradado lineal

Los degradados lineales muestran el degradado como si estuvieran repartidos por la página.

Primer ejemplo de gradiente lineal

He aquí un vistazo a nuestro primer ejemplo. Muestra un color más claro a la izquierda de la pantalla y un color más oscuro a la derecha, con una transición suave entre ellos.

Para crear este ejemplo, agregue dos colores. El primero es rgba(92,158,82,0.76) en la posición 0%. El segundo es rgba(0,10,4,0.76) en la posición del 97%.

• Color 1: rgba(92,158,82,0.76) (en la posición 0%)
• Color 2: rgba(0,10,4,0.76) (en la posición del 97%)

A continuación, cambia el Tipo de degradado a Lineal y establece la Dirección a 131 grados. Que no se repita . Establezca la Unidad en Porcentaje. Coloque el degradado sobre la imagen de fondo.

• Tipo de gradiente: lineal
• Dirección: 131 grados
• Repetir: No
• Unidad: Porcentaje
• Coloque el degradado sobre la imagen de fondo: Sí

Segundo Ejemplo de Gradiente Lineal

Aquí hay un vistazo al segundo ejemplo de gradiente lineal. Funciona como el primero, pero tiene un tope duro a la izquierda donde toma el relevo un tono más oscuro.

Para crear este, agregue tres Gradient Stops. El primero es rgba(18,76,41,0.76) en la posición del 13%. El segundo es rgba(92,158,82,0.76) en la posición del 13%. El color 3 es rgba(18,76,41,0.76) en la posición del 34 %.

• Color 1: rgba(18,76,41,0.76) (en la posición del 13%)
• Color 2: rgba(92,158,82,0.76) (en la posición del 13%)
• Color 3: rgba(18,76,41,0.76) (en la posición del 34%)

A continuación, establezca el Tipo de degradado en Lineal y establezca la Dirección en 90 grados. Que no se repita . Cambie la Unidad a Porcentaje. Colóquelo encima de la imagen de fondo.

• Tipo de gradiente: lineal
• Dirección: 90 grados
• Repetir: No
• Unidad: Porcentaje
• Coloque el degradado sobre la imagen de fondo: Sí

Ejemplo de tercer gradiente lineal

Nuestro tercer ejemplo coloca una línea de color clara en diagonal en la esquina superior derecha, tocando una línea de color más oscura.

Este tiene tres colores. El color 1 es rgba(92,158,82,0.76) en la posición del 13%. El color 2 es rgba(92,158,82,0.76) en la posición del 23%. El tercer Color es rgba(18,76,41,0.76) en la posición del 32%.

• Color 1: rgba(92,158,82,0.76) (en la posición del 13%)
• Color 2: rgba(92,158,82,0.76) (en la posición del 23%)
• Color 3: rgba(18,76,41,0.76) (en la posición del 32%)

Establezca el Tipo de degradado en Lineal en una dirección de 209 grados. Haga que no se repita y establezca la Unidad en Porcentaje. Coloque el degradado sobre la imagen de fondo.

• Tipo de gradiente: lineal
• Dirección: 209 grados
• Repetir: No
• Unidad: Porcentaje
• Coloque el degradado sobre la imagen de fondo: Sí

Tipo de degradado circular

El tipo de degradado circular crea un círculo con los colores.

Primer ejemplo de gradiente circular

Nuestro primer ejemplo de degradado circular coloca un color claro en el centro y un color más oscuro alrededor de los bordes.

Este tiene 2 colores. El primero es rgba(92,158,82,0.76) en la posición 0%. El segundo es rgba(0,10,4,0.76) en la posición del 62%.

• Color 1: rgba(92,158,82,0.76) (en la posición 0%)
• Color 2: rgba(0,10,4,0.76) (en la posición 62%)

Establezca el Tipo de degradado en Circular. Centre la dirección . No se repita , cambie la Unidad a Porcentaje y colóquelo sobre la imagen de fondo.

• Tipo de degradado: Circular
• Dirección: Centro
• Repetir: No
• Unidad: Porcentaje
• Coloque el degradado sobre la imagen de fondo: Sí

Segundo ejemplo de gradiente circular

Este degradado coloca un borde circular claro en el centro de la pantalla.

Tiene cuatro colores. Se apilan dos colores. El primero es rgba(18,76,41,0.76) en la posición del 13%. El segundo es rgba(92,158,82,0.76) en la posición del 33%. El color 3 es rgba(92,158,82,0.76) en la posición del 51%. El color 4 es rgba (18,76,41,0,76). Se coloca en la posición del 51 %, por encima del color 3.

• Color 1: rgba(18,76,41,0.76) (en la posición del 13%)
• Color 2: rgba(92,158,82,0.76) (en la posición del 33%)
• Color 3: rgba(92,158,82,0.76) (en la posición 51%)
• Color 4: rgba(18,76,41,0.76) (en la posición 51%)

Establezca el Tipo de degradado en Circular y coloque la Dirección en la parte superior izquierda. No se repita , cambie la Unidad a Porcentaje y colóquelo sobre la imagen de fondo.

• Tipo de degradado: Circular
• Dirección: Arriba a la izquierda
• Repetir: No
• Unidad: Porcentaje
• Coloque el degradado sobre la imagen de fondo: Sí

Ejemplo de tercer gradiente circular

Este ejemplo coloca varios círculos claros dentro del color más oscuro, comenzando en el medio del círculo.

Este también apila dos colores en un cierto orden para obtener este diseño. El primer color es rgba(18,76,41,0.76) en la posición del 13%. El color 2 es rgba(18,76,41,0.76) en la posición del 44 %. El tercer color se apila encima del segundo color. Es rgba(92,158,82,0.76) en la posición del 44%. El color 4 es rgba(92,158,82,0.76) en la posición del 51%.

• Color 1: rgba(18,76,41,0.76) (en la posición del 13%)
• Color 2: rgba(18,76,41,0.76) (en la posición 44%)
• Color 3: rgba(92,158,82,0.76) (en la posición 44%)
• Color 4: rgba(92,158,82,0.76) (en la posición 51%)

Cambia el Tipo de Degradado a Circular. Coloque la dirección en la parte inferior. Tenga este para repetir . Establezca la Unidad en Porcentaje y coloque el degradado sobre la imagen de fondo.

• Tipo de degradado: Circular
• Dirección: Abajo
• Repetir: Sí
• Unidad: Porcentaje
• Coloque el degradado sobre la imagen de fondo: Sí

Tipo de gradiente elíptico

Los degradados elípticos colocan los colores en forma de elipse.

Primer ejemplo de gradiente elíptico

Nuestro primer ejemplo elíptico coloca una elipse con un color claro en el centro de la pantalla con un color más oscuro alrededor.

Este tiene dos colores. El primero es rgba(92,158,82,0.76) en la posición 0%. El segundo es rgba(0,10,4,0.76) en la posición del 50%.

• Color 1: rgba(92,158,82,0.76) (en la posición 0%)
• Color 2: rgba(0,10,4,0.76) (en la posición del 50%)

Cambia el Tipo de Degradado a Elíptico. Establezca la Dirección en Centro. Haga que este no se repita , establezca la Unidad en Porcentaje y colóquelo sobre la imagen de fondo.

• Tipo de gradiente: Elíptico
• Dirección: Centro
• Repetir: No
• Unidad: Porcentaje
• Coloque el degradado sobre la imagen de fondo: Sí

Segundo ejemplo de gradiente elíptico

Nuestro segundo ejemplo coloca muchas líneas circulares finas a lo largo del degradado.

Tiene dos colores. El primero es rgba(92,158,82,0.76) en la posición de 34 puntos. El segundo es rgba(0,10,4,0.76) en la posición de 39 puntos.

• Color 1: rgba(92,158,82,0.76) (en la posición de 34 puntos)
• Color 2: rgba(0,10,4,0.76) (en la posición de 39 puntos)

Cambia el Tipo de Degradado a Elíptico y establece la Dirección a la Izquierda. Tenga este para repetir . Cambie la Unidad a Puntos. Colóquelo encima de la imagen de fondo.

• Tipo de gradiente: Elíptico
• Dirección: Izquierda
• Repetir: Sí
• Unidad: Puntos
• Coloque el degradado sobre la imagen de fondo: Sí

Ejemplo de tercer gradiente elíptico

Nuestro tercer ejemplo coloca muchos semicírculos dentro del degradado.

Este tiene dos colores. El primero es rgba(32,68,35,0.73) en la posición 34vmin. El segundo es rgba(0,10,4,0.76) en la posición 39vmin.

• Color 1: rgba(32,68,35,0.73) (en la posición 34vmin)
• Color 2: rgba(0,10,4,0.76) (en la posición 39vmin)

Cambie el Tipo de degradado a Elíptico y establezca la Dirección en Superior. Tenga este para repetir . Cambie la Unidad a Mínimo de ventana gráfica. Colóquelo encima de la imagen de fondo.

• Tipo de gradiente: Elíptico
• Dirección: Superior
• Repetir: Sí
• Unidad: Mínimo de ventana gráfica
• Coloque el degradado sobre la imagen de fondo: Sí

Tipo de gradiente cónico

El tipo de degradado cónico muestra el degradado en forma de cono como si el cono se viera desde arriba.

Primer ejemplo de gradiente cónico

Este ejemplo coloca una línea diagonal desde el centro del degradado hacia la izquierda con un color claro en un lado y un color oscuro en el otro.

Tiene dos colores. El primero es rgba(92,158,82,0.76) en la posición 0%. El segundo es rgba(0,10,4,0.76) en la posición del 50%.

• Color 1: rgba(92,158,82,0.76) (en la posición 0%)
• Color 2: rgba(0,10,4,0.76) (en la posición del 50%)

Cambia el Tipo de Degradado a Cónico. Establezca la Dirección en 221 grados. Centrar la Posición y hacer que no se repita . Coloque el degradado sobre la imagen.

• Tipo de degradado: cónico
• Dirección: 221 grados
• Posición: Centro
• Repetir: No
• Coloque el degradado sobre la imagen de fondo: Sí

Segundo ejemplo de gradiente cónico

Este ejemplo es similar al anterior, pero coloca la línea del centro hacia arriba.

Este tiene cuatro colores. El primero es rgba(20,40,20,0.76) en la posición del 7%. El color 2 es rgba(30,73,25,0.68) en la posición del 24 %. El color 3 es rgba(103,132,30,0.68) en la posición del 65%. El cuarto color es rgba(38,86,26,0.68) en la posición del 85%.

• Color 1: rgba(20,40,20,0.76) (en la posición 7%)
• Color 2: rgba(30,73,25,0.68) (en la posición 24%)
• Color 3: rgba(103,132,30,0.68) (en la posición 65%)
• Color 4: rgba(38,86,26,0.68) (en la posición 85%)

Establezca el Tipo de degradado en cónico y la Dirección en 0 grados. Centre la posición . Haga que no se repita y colóquelo encima de la imagen.

• Tipo de degradado: cónico
• Dirección: 0 grados
• Posición: Centro
• Repetir: No
• Coloque el degradado sobre la imagen de fondo: Sí

Ejemplo de tercer gradiente cónico

Nuestro último ejemplo coloca una explosión de líneas desde el centro superior del degradado hacia afuera en todas las direcciones.

Este tiene dos colores. El primero es rgba(30,73,25,0.68) en la posición de 5 grados. El segundo es rgba(20,40,20,0.76) en la posición de 7 grados.

• Color 1: rgba(30,73,25,0.68) (en la posición de 5 grados)
• Color 2: rgba(20,40,20,0.76) (en la posición de 7 grados)

Establezca el Tipo de degradado en Cónico y la Dirección en 221 grados. Coloque la posición en la parte superior. Haga que este se repita y colóquelo encima de la imagen de fondo.

• Tipo de degradado: cónico
• Dirección: 221 grados
• Posición: Superior
• Repetir: Sí
• Coloque el degradado sobre la imagen de fondo: Sí

pensamientos finales

Ese es nuestro vistazo a la comparación de los tipos de degradado en Gradient Builder de Divi. Como puede ver en estos ejemplos, las configuraciones son simples, pero cualquiera de ellas puede marcar una gran diferencia en el diseño del degradado. Para obtener los mejores resultados, pruebe los tipos de degradado con diferentes direcciones y posiciones, y habilite o deshabilite la opción de repetición para ver qué puede crear.

Queremos escuchar de ti. ¿Ha utilizado los diferentes tipos de degradado en Divi Gradient Builder? Cuéntanos tu experiencia en los comentarios.