Elementor te permite establecer un fondo degradado, pero no un degradado en el texto en sí. El widget de encabezado estándar solo toma un color sólido, por lo que un título multicolor normalmente significa escribir tu propio CSS background-clip: text. Esa es la brecha Titular de gradiente widget adentro Complementos maestros para Elementor rellenos.
Con este widget eliges dos colores, eliges un gradiente lineal o radial y el texto se llena con ese gradiente, sin código. También obtienes una sombra de texto opcional y 13 modos de combinación que controlan cómo se mezcla el gradiente con lo que se encuentre detrás. Esta guía cubre cada configuración, utilizando el widget que se envía gratis con Master Addons.
Aquí está el tipo de texto degradado que construirás, un encabezado que se desvanece de un color a otro sobre una imagen de fondo:
Antes de comenzar #
- Elementor instalado y activo
- Complementos maestros para Elementor instalados y activos (guía de instalación)
- Una página o plantilla abierta en el editor Elementor
Paso 1: agregue el widget de título de gradiente #
En el editor Elementor, busque en el panel de widgets Titular de gradiente y arrástrelo a su página. Los widgets de complementos maestros llevan la insignia “MA”, por lo que son fáciles de detectar. El editor abre el Editar título de gradiente panel con tres pestañas: Contenido, Estilo y Avanzado.
Paso 2: establezca el contenido del encabezado #
En el Contenido tab, escribe tu título en el Encabezado campo. El resto de campos aquí son los básicos:
- Url de encabezado convierte todo el encabezado en un enlace.
- Alineación lo establece a la izquierda, al centro o a la derecha.
- Título Etiqueta HTML elige la etiqueta, H1 a H6. Utilice H1 para el título principal de una página y H2 para los títulos de las secciones para que la página mantenga una estructura limpia.
Paso 3: elija los colores degradados #
Cambiar al Estilo pestaña y abre Estilo degradado. El gradiente discurre entre dos colores:
- Color es el primer color, con a Ubicación control deslizante (un porcentaje) que establece dónde se encuentra a lo largo del texto.
- Segundo color es el color final, con el suyo propio Ubicación control deslizante.
Establezca los dos colores en su paleta de marca, luego presione los controles deslizantes de Ubicación para decidir cuánto texto cubre cada color. La vista previa se actualiza a medida que arrastras. Hay un separado Normal y Flotar tab también, por lo que el gradiente puede cambiar cuando alguien pasa el rumbo.
Paso 4: Elija el tipo de gradiente, lineal o radial #
El Tipo el menú desplegable establece la forma del gradiente. Cada opción cambia el control adicional que aparece debajo:
- Radial extiende los colores desde un punto central. Elige un Posición (como Centro Centro) para establecer dónde se encuentra ese punto.
- Lineal ejecuta los colores en línea recta. Establecer el Ángulo para controlar la dirección: 180 puntos de pendiente hacia abajo, 90 la envían a través.
Radial es bueno para brillar desde la mitad del texto. Lineal es el que la mayoría de la gente imagina cuando piensa en “texto degradado”, un desvanecimiento limpio de izquierda a derecha o de arriba a abajo.
Paso 5: agregue una sombra de texto (opcional) #
El Sombra de texto el control agrega profundidad detrás de las letras. Haga clic en el lápiz para establecer el color de la sombra, el desenfoque y el desplazamiento horizontal y vertical. Una sombra suave ayuda a que el texto degradado siga siendo legible cuando se asienta sobre una imagen de fondo ocupada.
Paso 6: prueba los 13 modos de mezcla #
El Modo de mezcla dropdown decide cómo se mezcla el texto degradado con lo que se encuentre detrás, como una imagen de fondo o un color. Hay 13 modos:
- Normal, Multiplicar, Pantalla, Superposición
- Oscurecer, aclarar, esquivar el color, saturar
- Color, Diferencia, Exclusión, Tono, Luminosidad
Normal mantiene el gradiente tal como está. El resto reacciona al fondo: Multiply se oscurece, la pantalla se aclara, la diferencia puede invertir colores para una apariencia llamativa. La forma más rápida de elegir es hojearlos y ver la vista previa, ya que el resultado depende de los colores detrás del texto.
Sintoniza el Tipografía para conocer la fuente y el tamaño mientras esté aquí, haga clic Publicar (o Actualizar) para guardar la página.
Donde el texto degradado funciona bien #
- Titulares de héroes, donde un título degradado se destaca frente a una foto o sección oscura.
- Títulos de sección eso necesita un poco más de personalidad que texto plano.
- Páginas de aterrizaje hacer coincidir el degradado con la combinación de colores de una marca.
- Sobre imágenes de fondo, donde un modo de mezcla vincula el texto con la escena.
Preguntas frecuentes #
¿puedes agregar color degradado al texto en Elementor?
No con el widget de encabezado predeterminado, que solo toma un color sólido. El widget Master Addons Gradient Headline lo agrega: elija dos colores, elija lineal o radial y el texto se llena con el degradado, no se necesita CSS personalizado.
¿cómo hago texto degradado en Elementor sin CSS?
Agregue el widget Master Addons Gradient Headline, escriba su encabezado, luego abra la pestaña Estilo y establezca el primer color y el segundo color. Elija Lineal o Radial en Tipo y el degradado se aplicará al texto automáticamente.
¿cuál es la diferencia entre texto en gradiente lineal y radial?
Un gradiente lineal recorre los colores en línea recta, establecido en ángulo. Un gradiente radial los extiende desde un punto central que elija con el control de Posición. El lineal se adapta de izquierda a derecha y se desvanece; El radial se adapta a un brillo desde el medio.
¿qué hacen los modos de mezcla?
Los modos de mezcla controlan cómo se mezcla el texto degradado con el fondo detrás. Las 13 opciones van desde Normal (sin combinación) hasta Multiplicar, Pantalla, Superposición, Diferencia y más. El efecto depende de los colores detrás del texto, así que obtenga una vista previa de cada uno.
¿necesito Elementor Pro para texto degradado?
No. El widget Gradient Headline funciona con la versión gratuita de Elementor, por lo que los colores degradados, los tipos, la sombra de texto y los modos de combinación funcionan sin Elementor Pro.
