Widget de texto degradado Elementor gratuito
El widget de encabezado de Elementor solo toma un color de texto sólido, por lo que el texto degradado generalmente significa escribir CSS con background-clip: text. El widget Gradient Headline en el complemento gratuito Master Addons lo hace desde el panel. Escriba el encabezado, elija dos colores, elija un gradiente lineal o radial y las letras se llenen con él. También obtienes un gradiente flotante separado, 13 modos de combinación, una sombra de texto, un enlace y una etiqueta de encabezado para elegir. Se adapta a títulos de héroes, encabezados de secciones y pancartas de venta.
Cómo agregar texto degradado en Elementor
Necesita Elementor y el complemento gratuito Master Addons. Sin CSS personalizado ni Elementor Pro.
- Instalar y activar Addones maestros de WordPress.org.
- Edite su página con Elementor, busque en el panel de widgets Titular de gradiente y arrástralo hacia adentro.
- Escribe tu texto Encabezado, luego configure la etiqueta y alineación HTML del título.
- En Estilo, Estilo degradado, elija el primer color y el segundo color y ajuste sus controles deslizantes de ubicación.
- Elija Lineal y establezca el Ángulo, o Radial y establezca la Posición.
- Configure la tipografía, pruebe un modo de mezcla sobre su fondo y agregue un gradiente de desplazamiento si lo desea.
Las capturas de pantalla de cada paso están en el guía de texto degradado.
De dos colores, gradientes lineales o radiales
În stil, Estilo degradado, set Color del texto degradar (o clásico para un color liso). Elige el primero Color y el Segundo color, y muévete cada uno Ubicación control deslizante para decidir dónde se mezcla uno con el otro. Tipo cambia entre Lineal, con un Ángulo (180 grados de forma predeterminada van de arriba a abajo) y Radial, con a Posición como Centro Centro. Para ver un gradiente que se mueve detrás de una sección completa en lugar de texto, consulte Gradiente animado BG extensión (Pro).
- Pestañas normales y flotantes: establezca una segunda pendiente que aparezca cuando los visitantes pasen el rumbo.
- Cada degradado utiliza dos paradas de color. Para tres o más colores necesitarás CSS personalizado.
- Los valores predeterminados van del morado (#9929ea) al rojo (#FB083E), así que cámbielos primero a los colores de su marca.
Encabezado de elementor con CSS frente a titular de gradiente
Puede crear texto degradado con el propio widget de encabezado de Elementor si se siente cómodo con CSS. Esto es lo que implica cada ruta.
| Característica | Encabezado Elementor + CSS | Titular de gradiente de complementos maestros |
|---|---|---|
| Configuración | Agregue CSS con clip en segundo plano: texto en WordPress CSS adicional, Elementor Pro Custom CSS o los complementos maestros gratuitos Extensión CSS personalizada | Elija colores en el panel |
| Tipos de gradiente | Cualquier cosa que CSS permita, incluidos tres o más colores | Lineal o radial, dos paradas de color |
| Pendiente flotante | Css adicional | Pestaña flotante incorporada |
| Combina modos y sombras | Css adicional | 13 modos de combinación y control de sombra de texto |
| Precio | Gratis si escribes el CSS tú mismo | Gratis con complementos maestros |
Escribe CSS si necesitas más de dos colores o un degradado animado. Utilice el título de degradado cuando desee configurarlo visualmente en un minuto. Widgets gratuitos relacionados: Doble título y Titulares animados.
Tipografía, modos de mezcla y sombra de texto
Cada pestaña tiene la suya propia Tipografía, por lo que la fuente, el tamaño y el peso también pueden cambiar al pasar el cursor. Modo de mezcla ofrece 13 opciones, desde Normal, Multiplicar y Pantalla hasta Diferencia y Luminosidad, que mezclan el degradado con una imagen o color detrás del texto. Sombra de texto agrega color, desenfoque y desplazamiento para mayor profundidad o legibilidad en fotos ocupadas.
- Los degradados son CSS puro, por lo que no hay imagen para cargar.
- Los modos de mezcla reaccionan a lo que se encuentre detrás del encabezado, así que previsuítalos en el fondo real.
- Mantenga suficiente contraste entre ambos colores y el fondo para que sea legible.
Enlace, etiqueta de encabezado y alineación
En la pestaña Contenido, agregue un Url de encabezado para hacer de todo el encabezado un enlace. Elija el Título Etiqueta HTML (H1 a H6, div, span o p) para que el encabezado se ajuste a la estructura de su página y establezca Alineación a izquierda, centro o derecha.
- Utilice un H1 por página, normalmente el título de héroe, y un H2 para los títulos de las secciones.
- Un encabezado degradado vinculado funciona bien para un banner de venta que va a la tienda.
- El texto del encabezado admite la edición en línea en la vista previa de Elementor.
Preguntas frecuentes sobre el titular de gradiente
¿el widget Gradient Headline es gratuito?
Sí. Es parte del complemento Master Addons gratuito y funciona con Elementor gratuito, por lo que no necesitas Elementor Pro para texto degradado.
¿Puedo usar más de dos colores en el degradado?
No. Cada degradado tiene dos paradas de color, un primer color y un segundo color. Mover los controles deslizantes de ubicación cambia qué tan nítida o suave es la mezcla. Para tres o más colores, agregue su propio CSS a un encabezado normal.
¿el texto degradado ralentizará mi sitio web?
No. El degradado es CSS simple en el texto del encabezado, por lo que no hay ningún archivo de imagen para cargar.
¿puede el gradiente cambiar al flotar?
Sí. La pestaña Flotar en Gradient Style tiene sus propios colores, ubicaciones, tipo, ángulo o posición, tipografía, modo de combinación y sombra de texto, por lo que el encabezado puede cambiar a un gradiente diferente cuando los visitantes lo pasan por alto.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
