Los degradados pueden elevar fácilmente su diseño web. Por lo general, se usan de una manera sutil. Pero también puede crear secciones en su sitio web que estén hechas exclusivamente de combinaciones de degradados. Hacen que su diseño se vea moderno y abstracto al mismo tiempo. Para ayudar a ilustrar eso, vamos a recrear una sección que está hecha exclusivamente de colores degradados. Además de eso, compartiremos 6 paletas de colores degradados diferentes que puede aplicar al resultado.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado, usando las 6 paletas de colores de degradado diferentes.
Paleta de colores degradados #1
- Color #1: #9b3e93
- Color n.º 2: #ffdf6d
- Color #3: rgba(155,62,147,0.58)
- Color #4: #eb4fa8
- Color #5: #f6ff02
- Color #6: #ffaa00
- Color #7: rgba(255,255,255,0)
Paleta de colores degradados #2
- Color #1: #4b24fb
- Color #2: #ffcad2
- Color #3: rgba(255,202,210,0.4)
- Color #4: #4b24fb
- Color #5: #ffcad2
- Color #6: #6de1ff
- Color #7: rgba(255,255,255,0)
Paleta de colores degradados #3
- Color #1: rgba(195,55,100,0.82)
- Color #2: rgba(29,38,113,0.92)
- Color #3: rgba(195,55,100,0.47)
- Color n.º 4: n.º C33764
- Color n.° 5: n.° 1D2671
- Color n.º 6: #ff5e7e
- Color #7: rgba(255,255,255,0)
Paleta de colores degradados #4
- Color #1: rgba(255,0,157,0.67)
- Color #2: rgba(0,255,216,0.8)
- Color #3: rgba(255,0,157,0.51)
- Color #4: #ff009d
- Color #5: #00ffd8
- Color n.° 6: n.° 770082
- Color #7: rgba(255,255,255,0)
Paleta de colores degradados #5
- Color #1: rgba(0,19,165,0.76)
- Color #2: #e5e5e5
- Color #3: rgba(0,19,165,0.46)
- Color #4: #0013a5
- Color #5: #e5e5e5
- Color #6: #0fefff
- Color #7: rgba(255,255,255,0)
Paleta de colores degradados #6
- Color #1: #873e4c
- Color #2: #ffe9e8
- Color #3: rgba(56,49,112,0.28)
- Color #4: #f27088
- Color n.° 5: n.° 383170
- Color n.° 6: n.° 383170
- Color #7: rgba(255,255,255,0)
Cómo crear una sección de héroe degradado abstracto con Divi (¡6 paletas de colores degradados!)
Suscríbete a nuestro canal de Youtube
Acercarse
- Mantenga la paleta de colores de su elección cerca y mantenga la numeración de cada paleta tal como está.
- A lo largo del tutorial, nos referiremos al número de color de la paleta de colores.
- Decida una determinada paleta de colores y reutilice sus colores para todo el ejemplo.
- Puede clonar la sección después y aplicar otras paletas de colores para ver el resultado en tiempo real
- Para crear las formas de degradado dentro de la sección principal, usamos módulos de texto vacíos
- Cada una de estas formas está hecha usando Divi y sus opciones integradas.
Recrear diseño de sección de héroe
Agregar nueva sección
Fondo degradado
Cree una nueva página o abra una existente y cree una nueva sección con el siguiente fondo degradado:
- Primer color degradado: color n.º 1 (búsquelo en la paleta de colores de su elección)
- Segundo color de degradado: color n.° 2 (búsquelo en la paleta de colores de su elección)
- Tipo de gradiente: lineal
- Dirección del gradiente: 160 grados
Divisor inferior
Pase a la pestaña Diseño de inmediato y aplique el siguiente divisor inferior a esta sección también:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Color n.º 3 (búsquelo en la paleta de colores de su elección)
- Altura del divisor: 500px
- Disposición de los divisores: Debajo del contenido de la sección
Espaciado
A continuación, abra la subcategoría Espaciado y cree algo de espacio para la parte superior e inferior de su sección agregando ‘100px’ al relleno superior e inferior.
Agregar una nueva fila
Estructura de la columna
Una vez que haya terminado con la configuración de la sección, continúe y agregue una fila de dos columnas.
Fondo degradado de la columna 2
Antes de agregar cualquier módulo, abra la configuración de la fila. En primer lugar, necesitaremos aplicar un degradado a la segunda columna de esta fila:
- Primer color degradado: color n.° 6 (búsquelo en la paleta de colores de su elección)
- Segundo color de degradado: color n.° 7 (búsquelo en la paleta de colores de su elección)
- Dirección del gradiente de la columna 2: 233 grados
- Columna 2 Posición final: 42%
Dimensionamiento
Luego, abra la subcategoría Tamaño en la pestaña Diseño y aplíquele la siguiente configuración:
- Hacer esta fila de ancho completo: Sí
- Igualar alturas de columna: Sí
Espaciado
Pase a la subcategoría Espaciado y use el siguiente relleno a continuación:
- Relleno superior: 0px
- Relleno inferior: 30px
- Columna 2 Relleno superior: 50px
- Columna 2 Relleno derecho: 50px
Borde
Lo último que deberá cambiar sobre la configuración de la fila es el borde. Use ‘300px’ para la esquina superior derecha.
Agregar módulo de texto vacío a la columna 1
Fondo degradado
Una vez finalizada la configuración de la fila, podemos comenzar a agregar los distintos módulos a ambas columnas. Comenzaremos con la columna 1 agregándole un módulo de texto vacío. Crearemos una forma a partir de este módulo de texto. Abra la subcategoría Fondo y agréguele el siguiente fondo degradado:
- Primer color degradado: color n.° 4 (búsquelo en la paleta de colores de su elección)
- Segundo color de degradado: color n.° 5 (búsquelo en la paleta de colores de su elección)
- Tipo de gradiente: Radial
- Dirección radial: superior izquierda
Dimensionamiento
Pase a la pestaña Diseño, abra la subcategoría Dimensionamiento y realice los siguientes cambios:
- Ancho: 33%
- Alineación del módulo: Izquierda
Espaciado
Para crear una forma a partir de este módulo de texto, también necesitaremos aplicarle algo de relleno:
- Margen superior: 50px
- Relleno superior: 200px
Borde
También vamos a agregar ‘500px’ a cada una de las esquinas excepto la inferior derecha en la subcategoría Borde.
Sombra de la caja
Por último, agregue algo de profundidad a su forma habilitando la primera opción dentro de la subcategoría Box Shadow. No estamos haciendo ninguna modificación a su configuración predeterminada.
Agregar módulo de texto de título a la columna 1
Fondo degradado
Justo debajo del módulo de texto vacío que creó en la parte anterior de este tutorial, agregue otro módulo de texto que contenga el título de su sección principal. Abra la subcategoría Fondo y aplíquele el siguiente fondo degradado:
- Primer color degradado: color n.° 6 (búsquelo en la paleta de colores de su elección)
- Segundo color de degradado: color n.° 7 (búsquelo en la paleta de colores de su elección)
- Dirección del gradiente: 156 grados
- Posición inicial: 6%
- Posición final: 47%
Configuración de texto
Puede usar la configuración de texto que desee, pero para crear exactamente el mismo diseño, use la siguiente configuración para la subcategoría Texto:
- Fuente del texto: Rufina
- Peso de fuente de texto: Negrita
- Estilo de fuente de texto: Subrayado
- Color de subrayado de texto: rgba(255,255,255,0.17)
- Estilo de subrayado de texto: Sólido
- Tamaño del texto: 100px
- Altura de línea de texto: 1em
- Orientación del texto: Izquierda
Espaciado
Aplique algo de espacio a este módulo de texto también:
- Margen superior: -100px
- Relleno superior: 70px
- Relleno inferior: 20px
- Relleno izquierdo: 70px
Borde
Y, por último, agregaremos una esquina superior izquierda redondeada de ’50px’.
Agregar módulo de texto vacío a la columna 2
Fondo degradado
Hemos creado todos los módulos que necesitamos para la primera columna, así que pasemos a la segunda. Nuevamente, usaremos un módulo de texto vacío para crear una forma. Después de agregar el módulo de texto, aplique el siguiente fondo degradado:
- Primer color degradado: color n.° 4 (búsquelo en la paleta de colores de su elección)
- Segundo color de degradado: color n.° 5 (búsquelo en la paleta de colores de su elección)
- Tipo de gradiente: Radial
- Dirección del gradiente: Izquierda
Espaciado
Para crear la forma que queremos, agregue ‘600px’ a la opción Relleno superior de este módulo de texto.
Borde
Y aplica ‘500px’ en cada una de las esquinas excepto en la inferior izquierda.
Sombra de la caja
Para terminar su forma, puede optar por agregar algo de Box Shadow usando la primera opción sin realizar ningún cambio en su configuración predeterminada.
Visibilidad
Esta forma ocupa bastante espacio en la tableta y el teléfono. Es por eso que lo vamos a deshabilitar dentro de la subcategoría Visibilidad.
Resultado
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado utilizando las 6 paletas de colores de degradado diferentes.
Paleta de colores degradados #1
Paleta de colores degradados #2
Paleta de colores degradados #3
Paleta de colores degradados #4
Paleta de colores degradados #5
Paleta de colores degradados #6
Pensamientos finales
En esta publicación, le mostramos cómo crear una sección de héroe completamente a partir de degradados. Además de eso, le proporcionamos 6 paletas de colores degradados diferentes que puede aplicar a este ejemplo. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!