Widget de texto de gradiente de elementador gratuito
O widget Cabeçalho do Elementor só leva uma cor de texto sólida, portanto, texto gradiente geralmente significa escrever CSS com background-clip: text. O widget Gradient Headline no plugin gratuito Master Addons faz isso a partir do painel Digite o título, escolha duas cores, escolha um gradiente linear ou radial e as letras se preencham com ele Você também obtém um gradiente de hover separado, 13 modos de mistura, uma sombra de texto, um link e uma escolha de tag de cabeçalho. Ele se adapta a títulos de heróis, títulos de seção e banners de venda.
Como adicionar texto gradiente no elementor
Você precisa do Elementor e do plugin gratuito Master Addons. Nenhum CSS personalizado e nenhum Elementor Pro.
- Instalar e ativar Complementos Master do WordPress.org.
- Edite sua página com Elementor, procure no painel de widgets Título do gradiente e arraste-o para dentro.
- Digite seu texto em Título, em seguida, defina a Tag e Alinhamento HTML do Título.
- Em Estilo, Estilo de gradiente, escolha a primeira Cor e a Segunda Cor e ajuste seus controles deslizantes de localização.
- Escolha Linear e defina o Ângulo ou Radial e defina a Posição.
- Defina a tipografia, tente um modo de mistura em seu plano de fundo e adicione um gradiente de pairar, se desejar.
As capturas de tela de cada etapa estão no guia de texto gradiente.
Gradientes lineares ou radiais de duas cores
Em Estilo, Estilo Gradiente, definir Cor do texto para Gradiente (ou Clássico para uma cor simples).Escolha o primeiro Cor e o Segunda Cor, e mova cada um Localização controle deslizante para decidir onde um se mistura com o outro. Tipo alterna entre Linear, com um Ângulo (180 graus por padrão vão de cima para baixo) e Radial, com a Posição como Centro Central Para um gradiente que se move atrás de uma seção inteira em vez de texto, consulte o Gradiente Animado BG extensão (Pro).
- Guias normais e Hover: defina um segundo gradiente que aparece quando os visitantes passam o rumo.
- Cada gradiente usa duas paradas de cores Para três ou mais cores, você precisaria de CSS personalizado.
- Os padrões vão do roxo (#9929ea) ao vermelho (#FB083E), então altere-os primeiro para as cores da sua marca.
Título do elementor com título CSS vs gradiente
Você pode fazer texto gradiente com o próprio widget Heading da Elementor se estiver confortável com o CSS Aqui está o que cada rota envolve.
| Característica | Título do Elementor + CSS | Título do gradiente dos complementos mestres |
|---|---|---|
| Configuração | Adicione CSS com clipe de fundo: texto em WordPress CSS adicional, Elementor Pro Custom CSS ou Master Addons gratuitos Extensão CSS personalizada | Escolha as cores no painel |
| Tipos gradientes | Qualquer coisa que o CSS permita, incluindo três ou mais cores | Linear ou radial, duas paradas coloridas |
| Gradiente pairar | Css extra | Built-in Hover guia |
| Misture modos e sombra | Css extra | 13 modos de mistura e um controle de sombra de texto |
| Preço | Grátis se você mesmo escrever o CSS | Grátis com complementos mestres |
Escreva CSS se precisar de mais de duas cores ou um gradiente animado Use Gradient Headline quando quiser configurá-lo visualmente em um minuto Widgets gratuitos relacionados: Título Duplo e Manchetes animadas.
Tipografia, modos de mistura e sombra de texto
Cada aba tem a sua própria Tipografia, assim que a fonte, o tamanho e o peso podem mudar no pairar também. Modo Mistura oferece 13 opções, desde Normal, Multiplicar e Tela até Diferença e Luminosidade, que misturam o gradiente com uma imagem ou cor por trás do texto. Sombra de texto adiciona cor, desfoque e deslocamento para profundidade extra ou legibilidade em fotos ocupadas.
- Os gradientes são CSS puro, portanto não há imagem para carregar.
- Os modos de mistura reagem a tudo o que está atrás do título, portanto, visualize-os no fundo real.
- Mantenha contraste suficiente entre ambas as cores e o fundo para facilitar a leitura.
Link, Tag de Cabeçalho e Alinhamento
Na guia Conteúdo, adicione a URL de cabeçalho para fazer todo o título um link Escolha o Título HTML Tag (H1 a H6, div, span ou p) para que o título se ajuste à estrutura da sua página e ao conjunto Alinhamento para a esquerda, centro ou direita.
- Use um H1 por página, geralmente o título do herói, e H2 para títulos de seção.
- Um cabeçalho gradiente vinculado funciona bem para um banner de venda que vai para a loja.
- O texto do título suporta edição inline na visualização do Elementor.
Perguntas frequentes para manchete de gradiente
O widget Gradient Headline é gratuito?
Sim. faz parte do plugin gratuito Master Addons e funciona com Elementor gratuito, portanto você não precisa do Elementor Pro para texto gradiente.
Posso usar mais de duas cores no gradiente?
Não. Cada gradiente tem duas paradas de cores, uma primeira Cor e uma Segunda Cor. Mover os controles deslizantes de localização altera o quão nítida ou suave é a mistura. Para três ou mais cores, adicione seu próprio CSS a um título normal.
O texto gradiente irá desacelerar meu site?
Não. O gradiente é CSS simples no texto do título, portanto não há arquivo de imagem para carregar.
O gradiente pode mudar ao pairar?
Sim. A guia Hover no Gradient Style tem suas próprias cores, locais, tipo, ângulo ou posição, tipografia, modo de mistura e sombra de texto, para que o título possa mudar para um gradiente diferente quando os visitantes o pairarem.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
