¿Le gustaría usar el Gradient Builder de Divi pero no sabes que tipo de degradado elegir?
Los tipos de degradado son parte de la nueva Divi Constructor de degradado . Nuevos tipos de degradados Divi le permite agregar diferentes formas y colores a sus fondos.
En este artículo, compararemos estos tipos de degradados y le mostraremos cómo usarlos para crear fondos únicos.
Vamos a empezar.
¿Cuáles son los tipos de gradiente Divi?
El nuevo Gradient Builder de Divi agrega varias características nuevas de degradado que incluyen tipos de degradado. Hay cuatro tipos de gradientes para elegir:
- lineal
- Circulación
- elíptico
- cónico
Cada uno de los tipos muestra el degradado de forma diferente. Se utilizan para dar forma al degradado que se mostrará 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 otros controles, como la posición, la repetición o no, la unidad de medida de la barra de desplazamiento del 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 destacar. Se pueden realizar cambios pequeños o grandes con un solo ajuste.
Con eso 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 de degradado estándar que verás en la web. Los próximos dos serán un poco más experimentales, solo para ver qué puedes hacer con los tipos de gradientes.
Ejemplos de tipos de degradado
Para ejemplos de tipo degradado, usamos la sección Hero de la página de inicio del paquete de diseño de alojamiento y desayuno gratis 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 modificaremos.
Personalizamos el texto del título cambiándolo de negro a blanco.
Tipo de degradado lineal
Lea también: Divi: cómo usar la combinación de patrones en imágenes de fondo
Los degradados lineales muestran el degradado como si estuviera repartido por la página.
Primer ejemplo del tipo de gradiente lineal
Aquí hay una vista previa de 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. la primer ministro es rgba(92,158,82,0.76) en la posición 0%. la segundo es rgba(0,10,4,0.76) en la posición del 97%.
- Paradas de gradiente:
- 0%: rgb(92,158,82,0.76)
- 97%: rgba(0,10,4,0.76)
Luego cambia el Tipo de Propiedad degradado a Lineal y establecer el Dirección más de 131 grados. que él no repitas. Selecciona elunité en Porcentaje. Coloque el degradado sobre la imagen de fondo.
- Tipo de gradiente: lineal
- Dirección del gradiente: 131 grados
- Gradiente de repetición: NO
- Unidad de gradiente: porcentaje
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Segundo ejemplo del tipo de gradiente lineal
Aquí hay una vista previa del 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. la primer ministro es rgba(18,76,41,0.76) en la posición 13%. la segundo es rgba(92,158,82,0.76) en la posición del 13%. color 3 es rgba(18,76,41,0.76) en la posición del 34%.
- Paradas de gradiente:
- 13%: rgba(18,76,41,0.76)
- 13%: rgba(92,158,82,0.76)
- 34%: rgba(18,76,41,0.76)
Luego establezca el Tipo de Propiedad degradado a Lineal y establecer el Dirección más de 90 grados. que él no repitas . Cambiar elunité porcentaje. Colóquelo encima de la imagen de fondo.
- Tipo de gradiente: lineal
- Dirección del gradiente: 90 grados
- Gradiente de repetición: NO
- Unidad de gradiente: porcentaje
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Tercer ejemplo del tipo de gradiente lineal
Nuestro tercer ejemplo coloca una línea de color claro en diagonal a lo largo de la esquina superior derecha, tocando una línea de color más oscuro.
Este tiene tres colores. color 1 es rgba(92,158,82,0.76) en la posición del 13%. color 2 es rgba(92,158,82,0.76) en la posición del 23%. los tercer color es rgba(18,76,41,0.76) en la posición del 32%.
- Paradas de gradiente:
- 13%: rgba(92,158,82,0.76)
- 23%: rgba(92,158,82,0.76)
- 32%: rgba(18,76,41,0.76)
Definir el Tipo de Propiedad gradiente a lineal en un dirección de 209 grados. Nacido el no repitas y establecer elunité en Porcentaje. Coloque el degradado sobre la imagen de fondo.
- Tipo de gradiente: lineal
- Dirección del gradiente: 209 grados
- Gradiente de repetición: NO
- Unidad de gradiente: porcentaje
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Tipo de degradado circular
El tipo de degradado circular crea un círculo con los colores.
Primer ejemplo del tipo 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. la primer ministro es rgba(92,158,82,0.76) en la posición 0%. la segundo es rgba(0,10,4,0.76) en la posición del 62%.
- Paradas de gradiente:
- 0%: rgb(92,158,82,0.76)
- 62%: rgba(0,10,4,0.76)
Definir el Tipo de Propiedad degradado en circular. Centrar el dirección . Asegúrate de que él no repitas , cambiar elunité como un porcentaje y colóquelo encima de la imagen de fondo.
- Tipo de degradado: Circular
- Posición del degradado: Centro
- Gradiente de repetición: NO
- Unidad de gradiente: porcentaje
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Segundo ejemplo del tipo de gradiente circular
Este degradado coloca un borde circular claro en el centro de la pantalla.
Tiene cuatro colores. Se superponen dos colores. la primer ministro es rgba(18,76,41,0.76) en la posición 13%. la segundo es rgba(92,158,82,0.76) en la posición del 33%. color 3 es rgba(92,158,82,0.76) en la posición del 51%. color 4 es rgba(18,76,41,0.76). Se coloca en la posición 51%, por encima del color 3.
- Paradas de gradiente:
- 13%: rgba(18,76,41,0.76)
- 33%: rgba(92,158,82,0.76)
- 51%: rgba(92,158,82,0.76)
- 51%: rgba(18,76,41,0.76)
Definir el Tipo de Propiedad degradado a Circular y coloque el Dirección arriba a la izquierda. Asegúrate de que él no repitas , cambiar el unité como un porcentaje y colóquelo encima de la imagen de fondo.
- Tipo de degradado: Circular
- Posición del degradado: arriba a la izquierda
- Gradiente de repetición: NO
- Unidad de gradiente: porcentaje
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Tercer ejemplo del tipo de gradiente circular
Este ejemplo coloca varios círculos claros en el color más oscuro, comenzando en el medio del círculo.
Este también apila dos colores en un cierto orden para lograr este diseño. los estreno el color es rgba(18,76,41,0.76) en la posición del 13%. color 2 es rgba(18,76,41,0.76) en la posición del 44%. los troisième el color se superpone al segundo color. Esto es rgba(92,158,82,0.76) en la posición del 44%. color 4 es rgba(92,158,82,0.76) en la posición del 51%.
- Paradas de gradiente:
- 13%: rgba(18,76,41,0.76)
- 44%: rgba(18,76,41,0.76)
- 44%: rgba(92,158,82,0.76)
- 51%: rgba(92,158,82,0.76)
Cambialo tipo de gradiente en circular Colocar el dirección abajo. repetición Éste. Selecciona elunité en Porcentaje y coloque el degradado sobre la imagen de fondo.
- Tipo de degradado: Circular
- Posición del degradado: inferior
- Gradiente de repetición: SÍ
- Unidad de gradiente: porcentaje
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Tipo de gradiente elíptico
Los degradados elípticos colocan los colores en forma de elipse.
Primer ejemplo del tipo de gradiente elíptico
Nuestro primer ejemplo elíptico coloca una elipse de color claro en el centro de la pantalla con un color más oscuro a su alrededor.
Este tiene dos colores. la primer ministro es rgba(92,158,82,0.76) en la posición 0%. la segundo es rgba(0,10,4,0.76) en la posición del 50%.
- Paradas de gradiente:
- 0%: rgb(92,158,82,0.76)
- 50%: rgba(0,10,4,0.76)
Cambialo tipo de gradiente en elíptica. Selecciona el dirección en Centro. Asegúrate de que este no repitas , ajustar elunité en Porcentaje y colóquelo encima de la imagen de fondo.
- Tipo de gradiente: Elíptico
- Posición del degradado: Centro
- Gradiente de repetición: NO
- Unidad de gradiente: porcentaje
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Segundo ejemplo del tipo de gradiente elíptico
Nuestro segundo ejemplo coloca muchas líneas circulares delgadas a lo largo del degradado.
Tiene dos colores. la primer ministro es rgba(92,158,82,0.76) en la posición de 34 puntos. la segundo es rgba(0,10,4,0.76) en la posición 39pt.
- Paradas de gradiente:
- 34 puntos: rgba(92,158,82,0.76)
- 39 puntos: rgba(0,10,4,0.76)
Cambialo Tipo de Propiedad gradiente a Elíptica y ajuste el Dirección a la izquierda. Tener este en repetir. Cambiar elunité en puntos Colóquelo encima de la imagen de fondo.
- Tipo de gradiente: Elíptico
- Posición del degradado: Derecha
- Gradiente de repetición: SÍ
- Unidad de gradiente: Puntos (pt)
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Tercer ejemplo del tipo de gradiente elíptico
Nuestro tercer ejemplo coloca muchos semicírculos en el degradado.
Este tiene dos colores. la primer ministro es rgba(32,68,35,0.73) en la posición 34vmin. la segundo es rgba(0,10,4,0.76) en la posición 39vmin.
- Paradas de gradiente:
- 34vmín: rgba(32, 68, 35, 0.73)
- 39vmín: rgba(0,10,4,0.76)
Cambialo Tipo de Propiedad gradiente a Elíptica y ajuste el Dirección en las alturas. Ten este en repetir. Cambiar elUnité en Mínimo de ventana gráfica. Colóquelo encima de la imagen de fondo.
- Tipo de gradiente: Elíptico
- Posición del degradado: Superior
- Gradiente de repetición: SÍ
- Unidad de degradado: Mínimo de ventana gráfica (vmin)
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Tipo de gradiente cónico
Ver también: Divi: Cómo crear transiciones de fondo entre elementos
El tipo de degradado cónico muestra el degradado como un cono como si el cono se viera desde arriba.
Primer ejemplo del tipo 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. la primer ministro es rgba(92,158,82,0.76) en la posición 0%. la segundo es rgba(0,10,4,0.76) en la posición del 50%.
- Paradas de gradiente:
- 0%: rgb(92,158,82,0.76)
- 50%: rgba(0,10,4,0.76)
Cambialo tipo de gradiente en cónico. Ajustar el dirección más de 221 grados. Centrar el posición et no lo repitas . Coloque el degradado sobre la imagen.
- Tipo de degradado: cónico
- Dirección del gradiente: 221 grados
- Posición: Centro
- Gradiente de repetición: NO
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Segundo ejemplo del tipo de gradiente cónico
Este ejemplo es similar al anterior, pero coloca la línea central hacia arriba.
Este tiene cuatro colores. la primer ministro es rgba(20,40,20,0.76) en la posición del 7%. color 2 es rgba(30,73,25,0.68) en la posición del 24%. color 3 es rgba(103,132,30,0.68) en la posición del 65%. los cuarto el color es rgba(38,86,26,0.68) en la posición del 85%.
- Paradas de gradiente:
- 7%: rgba(20,40,20,0.76)
- 24%: rgba(30,73,25,0.68)
- 65%: rgba(103,132,30,0.68)
- 85%: rgba(38,86,26,0.68)
Definir el tipo de gradiente en cónico y el dirección a 0 grados. Centrar el posición . Nacido el no repitas y colóquelo encima de la imagen.
- Tipo de degradado: cónico
- Dirección del gradiente: 0 grados
- Posición: Centro
- Gradiente de repetición: NO
- Gradiente cuadrado sobre la imagen de fondo: SÍ
Tercer ejemplo del tipo de 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. la primer ministro es rgba(30,73,25,0.68) en la posición de 5 grados. la segundo es rgba(20,40,20,0.76) en la posición de 7 grados.
- Paradas de gradiente:
- 5 grados: rgba (30,73,25,0.68)
- 7 grados: rgba (20,40,20,0.76)
Selecciona el Tipo de degradado en cónico y el Dirección a 221 grados Colocar el posición en alto. Repetir éste y colóquelo encima de la imagen de fondo.
- Tipo de degradado: cónico
- Dirección del gradiente: 221 grados
- Posición: Superior
- Gradiente de repetición: SÍ
- Gradiente cuadrado sobre la imagen de fondo: SÍ
¡¡¡Descarga DIVI ahora!!!
Conclusión
Este 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, experimente con tipos de degradado con diferentes direcciones y posiciones, y active o desactive la opción de repetición para ver qué puede 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.
No dudes en consultar también nuestra guía sobre la 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.
...
