Cómo aplicar un color de texto degradado a su copia usando solo las opciones integradas de Divi

No importa qué tipo de sitio web esté creando, resaltar la copia y el contenido sigue siendo una de las principales prioridades. Con las opciones integradas de Divi, hay muchas formas de llegar allí. Una de las posibilidades que tiene es aplicar un color de texto degradado a su copia. Este es un gran enfoque para agregar color a su sitio web, especialmente si mantiene el resto de su sitio web limpio y minimalista. Ayuda a equilibrar los espacios en blanco y le da a su sitio web un soplo de aire fresco.

En este tutorial, le mostraremos cómo darle a su texto un color degradado usando solo las opciones integradas de Divi.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla. Le mostraremos cómo hacer que esto funcione utilizando una paleta de colores claros y oscuros. Una vez que obtenga el enfoque, puede crear todo tipo de diseños con texto degradado.

Acercarse

1. Comprensión de los modos de fusión Divi

Los modos de fusión funcionan exactamente como está acostumbrado a ellos en el software de edición de imágenes. Se basan en estructuras de capas. Concretamente, eso significa que un modo de mezcla en Divi seguirá una cierta jerarquía:

• Un modo de combinación aplicado a un módulo combinará el módulo + la columna debajo de él
• Un modo de combinación aplicado a una columna combinará la columna + fila debajo de ella
• Un modo de fusión aplicado a una fila fusionará la fila + sección debajo de ella

Para este tutorial, es necesario comprender que un modo de combinación aplicado a un módulo se combinará con la columna debajo de él. Al darle a la columna un fondo degradado y al módulo en cuestión un modo de fusión, podemos lograr un texto de color degradado.

2. Elegir entre una paleta de colores completamente oscura o clara

Para que esto funcione, tendrá que usar una paleta de colores completamente oscura o clara. Los modos de fusión que estamos usando, aclarar y oscurecer, solo ofrecerán el resultado deseado cuando esté usando un color completamente negro o blanco. Al usar otros colores, el efecto que hemos aplicado se verá más o menos.

3. Eliminación de todo el ancho del canalón entre columnas y módulos

Como se mencionó en la primera parte del enfoque, usaremos fondos de gradiente de columna. Para asegurarnos de que este fondo degradado no aparezca en ningún lugar que no queramos, vamos a eliminar todo el ancho de la canaleta. Al hacerlo, nos aseguraremos de que no se aplique un margen personalizado predeterminado entre los módulos. Para compensar el espacio que perdemos, agregaremos manualmente relleno personalizado en su lugar.

4. Usar relleno en lugar de cambiar el ancho de un elemento

Y para ajustar el ancho de un elemento de diseño, usaremos un relleno personalizado a la izquierda y a la derecha. Cambiar el ancho en la configuración de tamaño cambiaría el ancho de todo el módulo y permitiría que el fondo del degradado de la columna se mostrara en el lado izquierdo y derecho, que es algo que no queremos.

¡Empecemos a crear!

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

Color de fondo

¡Empecemos! Agrega una sección normal a una página nueva o existente y dale el color de fondo correcto (dependiendo de si deseas recrear el diseño claro u oscuro).

• Color de fondo: #ffffff (diseño claro), # 000000 (diseño oscuro)

Espaciado

Continúe agregando algo de relleno personalizado a la sección.

• Acolchado superior: 215px
• Acolchado inferior: 215px

Agregar fila n. ° 1

Estructura de la columna

Luego, agregue una nueva fila usando la siguiente estructura de columnas:

Fondo degradado de la columna 2

Agregue un fondo degradado a la segunda columna de la fila. Aquí es donde colocaremos el título Módulo de texto en la siguiente parte del tutorial.

• Color 1: # c700ff
• Color 2: # 32f1ff
• Dirección del gradiente de la columna 2: 150 grados
• Posición inicial de la columna 2: 20%
• Posición final de la columna 2: 60%

Dimensionamiento

Cambie también la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Y modifique la configuración de espaciado.

• Margen superior: 50px
• Margen inferior: 50 px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Agregar módulo de texto a la columna 2

Agregar contenido

Ahora continúe y agregue un módulo de texto a la segunda columna de la fila que agregó.

Color de fondo

Dale a tu módulo el fondo correcto, dependiendo del tipo de diseño que quieras recrear.

• Color de fondo: #ffffff (diseño claro), # 000000 (diseño oscuro)

Configuración del texto del encabezado

A continuación, cambie la configuración del texto del título.

• Alineación del texto del encabezado 2: centro
• Título 2 Color del texto: # 000000 (Diseño claro), #ffffff (Diseño oscuro)
• Tamaño del texto del encabezado 2: 67 px (escritorio), 50 px (tableta), 40 px (teléfono)
• Espacio entre letras del encabezado 2: -2px

Espaciado

Y agregue un poco de relleno en la parte inferior. Recuerde, estamos usando relleno inferior en lugar de margen para asegurarnos de que no se muestre el fondo degradado de la columna.

• Acolchado inferior: 50px

Modo de mezcla

Para que el fondo degradado de la columna se aplique al módulo que ha agregado, aplique un modo de fusión en la configuración de filtros.

• Modo de fusión: aclarar (diseño claro), oscurecer (diseño oscuro)

Agregar módulo divisor a la fila

Visibilidad

El segundo y último módulo que necesitamos en esta fila es un módulo divisor.

• Mostrar divisor: Sí

Color de fondo

Cambie el color de fondo según el tipo de diseño que esté recreando.

• Color de fondo: #ffffff (diseño claro), # 000000 (diseño oscuro)

Espaciado

Para reducir el ancho del divisor, agregaremos un relleno personalizado en el lado izquierdo y derecho.

• Relleno izquierdo: 250px
• Relleno derecho: 250px

Modo de mezcla

Nuevamente, agregue un modo de fusión para que se muestre el fondo del degradado de la columna.

• Modo de fusión: aclarar (diseño claro), oscurecer (diseño oscuro)

Agregar fila n. ° 2

Estructura de la columna

¡A la siguiente fila! Utilice la siguiente estructura de columnas:

Columna 1 Fondo degradado

Continúe agregando un fondo degradado a la primera columna.

• Color 1: # c700ff
• Color 2: # 32f1ff
• Columna 1 Tipo de degradado: lineal
• Dirección del gradiente de la columna 1: 105 grados
• Posición inicial de la columna 1: 20%
• Posición final de la columna 1: 50%

Fondo degradado de la columna 2

También estamos usando un fondo degradado para la segunda columna.

• Color 1: # 32f1ff
• Color 2: # c700ff
• Columna 2 Tipo de degradado: lineal
• Columna 2 Dirección de gradiente: 90 grados
• Posición inicial de la columna 2: 40%
• Posición final de la columna 2: 60%

Columna 3 Fondo degradado

Lo mismo ocurre con la tercera columna.

• Color 1: # c700ff
• Color 2: # 32f1ff
• Columna 3 Tipo de degradado: lineal
• Columna 3 Dirección de gradiente: 85 grados
• Columna 3 Posición inicial: 20%
• Posición final de la columna 3: 50%

Dimensionamiento

A continuación, cambie la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Y agregue un poco de relleno personalizado a la izquierda y a la derecha.

• Relleno izquierdo: 100 px (escritorio y tableta), 50 px (teléfono)
• Relleno derecho: 100 px (escritorio y tableta), 50 px (teléfono)

Agregar módulo Blurb a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo Blurb a la columna 1 con un título de su elección. Más adelante en la publicación, usaremos un módulo separado para agregar el contenido del cuerpo.

Elegir icono

Seleccione un icono de su elección.

Color de fondo

Y modifica el color de fondo del módulo Blurb.

• Color de fondo: #ffffff (diseño claro), # 000000 (diseño oscuro)

Configuración de iconos

Continúe yendo a la configuración del icono y realizando algunos cambios allí.

• Color del icono: # 000000 (diseño claro), #ffffff (diseño oscuro)
• Ubicación de la imagen / icono: parte superior
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 51px

Configuración del texto del título

Cambie también la configuración del texto del título.

• Peso de la fuente del título: negrita
• Alineación del texto del título: centro
• Color del texto del título: # 000000 (diseño claro), #ffffff (diseño oscuro)
• Espaciado de letras de título: -1px
• Altura de la línea de título: 1.2em

Espaciado

Luego, vaya a la configuración de espaciado y agregue algunos valores de margen y relleno personalizados.

• Margen inferior: 5px
• Relleno superior: 50px
• Acolchado inferior: 50px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Modo de mezcla

Por último, pero no menos importante, aplique el modo de fusión correcto.

• Modo de fusión: aclarar (diseño claro), oscurecer (diseño oscuro)

Agregar módulo de texto a la columna 1

Agregar contenido

Estamos separando el título y el cuerpo del módulo Blurb en dos módulos para que el modo de fusión se aplique solo al icono y al título. Continúe y agregue un módulo de texto justo debajo del módulo Blurb que contiene el contenido del cuerpo.

Color de fondo

A continuación, agregue un color de fondo.

• Color de fondo: #ffffff (diseño claro), # 0c0c0c (diseño oscuro)

Configuración de texto

Y cambia la configuración del texto.

• Espaciado de letras de texto: 0.5px
• Altura de la línea de texto: 2,3 em
• Orientación del texto: justificar
• Color del texto: oscuro (diseño claro), claro (diseño oscuro)

Espaciado

Para darle al módulo algo de espacio para respirar, agregue algunos valores de relleno personalizados en la configuración de espaciado.

• Relleno superior: 100 px
• Acolchado inferior: 100px
• Relleno izquierdo: 70px
• Relleno derecho: 70px

Sombra de la caja

Y para rematar, añade también una sombra de caja sutil.

• Fuerza de desenfoque de sombra de caja: 56px
• Fuerza de propagación de la sombra de caja: -12px
• Color de sombra: rgba (0,0,0,0.3)

Clonar módulo Blurb y módulo de texto dos veces + colocar en las columnas restantes

Por último, pero no menos importante, clone ambos módulos que puede encontrar en la columna 1 y coloque los duplicados en las dos columnas restantes. Cambie el contenido en consecuencia también.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado final.

Pensamientos finales

En esta publicación, le mostramos cómo crear texto degradado en su sitio web utilizando solo las opciones integradas de Divi. Para que este tutorial funcione, y para poder practicar el enfoque en otros diseños también, es necesario que revise la sección de enfoque de esta publicación y lo comprenda mientras recrea el diseño. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!