Elementor permite definir um fundo gradiente, mas não um gradiente no texto em si O widget Heading padrão só leva uma cor sólida, então um título multicolorido normalmente significa escrever seu próprio CSS com background-clip: text. Essa é a lacuna que os livres Widget de título gradiente em Complementos Mestres para Elementor enche.
Com este widget você escolhe duas cores, escolhe um gradiente linear ou radial, e o texto preenche esse gradiente, sem código Você também obtém uma sombra de texto opcional e 13 modos de mistura que controlam como o gradiente se mistura com o que quer que esteja por trás deste guia cobre todas as configurações, usando o widget que é enviado gratuitamente com Master Addons.
Aqui está o tipo de texto gradiente que você construirá, um título que desaparece de uma cor para outra sobre uma imagem de fundo:
Antes de começar #
- Elementor instalado e ativo
- Complementos Mestres para Elementor instalados e ativos (guia instalação)
- Uma página ou modelo aberto no editor Elementor
Passo 1: Adicione o widget de manchete de gradiente #
No editor Elementor, pesquise no painel de widgets Título do gradiente e arraste-o para sua página Os widgets Master Addons carregam o emblema “MA”, para que sejam fáceis de detectar O editor abre o Editar título do gradiente painel com três guias: Conteúdo, Estilo e Avançado.
Passo 2: Defina o Conteúdo do Título #
No Conteúdo guia, digite seu título no Título campo. O resto dos campos aqui são os básicos:
- URL de cabeçalho transforma todo o rumo em um link.
- Alinhamento define para a esquerda, centro ou direita.
- Título HTML Tag escolhe a tag: H1 a H6, ou div, span, ou p. Use H1 para o título principal de uma página e H2 para títulos de seção para que a página mantenha uma estrutura limpa.
Etapa 3: Escolha as cores do gradiente #
Mudar para o Estilo aba e abrir Estilo Gradiente. Manter Cor do texto set to Gradient (Classic dá uma única cor simples).O gradiente corre entre duas cores:
- Cor é a primeira cor, com a Localização controle deslizante (uma porcentagem) que define onde ele fica ao longo do texto.
- Segunda Cor é a cor final, com a sua própria Localização controle deslizante.
Defina as duas cores para a paleta da sua marca e, em seguida, pressione os controles deslizantes de Localização para decidir quanto do texto cada cor cobre A visualização é atualizada à medida que você arrasta Há um separado Normal e Pairar tab também, para que o gradiente possa mudar quando alguém paira o rumo.
Passo 4: Escolha o Tipo de Gradiente, Linear ou Radial #
O Tipo dropdown define a forma gradiente Cada opção troca o controle extra que aparece abaixo dela:
- Radial espalha as cores de um ponto central Escolha a Posição (como Center Center) para definir onde fica esse ponto.
- Linear executa as cores em linha reta Defina o Ângulo para controlar a direção: 180 aponta o gradiente diretamente para baixo, 90 o envia.
Radial é bom para um brilho do meio do texto Linear é o que a maioria das pessoas imagina quando pensa em texto “gradiente,” um desbotamento limpo da esquerda para a direita ou de cima para baixo.
Passo 5: Adicionar uma Sombra de Texto (Opcional) #
O Sombra de texto o controle adiciona profundidade atrás das letras Clique no lápis para definir a cor da sombra, desfoque e deslocamento horizontal e vertical Uma sombra suave ajuda o texto gradiente a permanecer legível quando fica sobre uma imagem de fundo ocupada.
Passo 6: Experimente os 13 modos de mistura #
O Modo Mistura dropdown decide como o texto gradiente se mistura com o que quer que esteja atrás dele, como uma imagem de fundo ou cor Existem 13 modos:
- Normal, Multiplicar, Tela, Sobreposição
- Escurecer, Iluminar, Desviar de Cor, Saturação
- Cor, Diferença, Exclusão, Matiz, Luminosidade
Normal mantém o gradiente como está O resto reage ao fundo: Multiplique escurece, Tela clareia, Diferença pode inverter cores para um olhar marcante A maneira mais rápida de escolher é virar através deles e assistir a visualização, uma vez que o resultado depende das cores por trás do texto.
Afinar o Tipografia para fonte e tamanho enquanto você estiver aqui, clique em Publicar (ou Atualizar) para salvar a página.
Onde o texto gradiente funciona bem #
- Manchetes de heróis, onde um título gradiente se destaca contra uma foto ou seção escura.
- Seção títulos isso precisa de um pouco mais de personalidade do que texto simples.
- Páginas de destino combinando o gradiente com o esquema de cores de uma marca.
- Sobre imagens de fundo, onde um modo de mistura liga o texto à cena.
Perguntas frequentes #
Você pode adicionar cor gradiente ao texto no Elementor?
Não com o widget Heading padrão, que só leva uma cor sólida O widget Master Addons Gradient Headline adiciona: escolha duas cores, escolha linear ou radial, e o texto preenche com o gradiente, sem necessidade de CSS personalizado.
Como faço texto gradiente no Elementor sem CSS?
Adicione o widget Master Addons Gradient Headline, digite seu título, depois abra a guia Estilo e defina a primeira Cor e Segunda Cor Escolha Linear ou Radial em Tipo, e o gradiente se aplica ao texto automaticamente.
Qual é a diferença entre o texto gradiente linear e radial?
Um gradiente linear executa as cores em linha reta, definido por um ângulo Um gradiente radial as espalha a partir de um ponto central que você escolhe com o controle Posição Os ternos lineares vão da esquerda para a direita; radial se adapta a um brilho do meio.
O que os modos de mistura fazem?
Os modos de mistura controlam como o texto gradiente se mistura com o fundo por trás dele As 13 opções variam de Normal (sem mistura) a Multiplicar, Tela, Sobreposição, Diferença e muito mais O efeito depende das cores por trás do texto, então visualize cada uma.
Preciso do Elementor Pro para texto gradiente?
Não. O widget Gradient Headline funciona com a versão gratuita do Elementor, portanto, as cores gradiente, os tipos, a sombra do texto e os modos de mistura funcionam sem o Elementor Pro.
