O campo Sombra de texto adiciona o controle de sombra de texto do Elementor a um widget personalizado construído com os Complementos Mestres Construtor de widgets. Os editores obtêm uma cor, uma configuração de desfoque e dois deslocamentos, e a sombra é aplicada a qualquer texto em que seu seletor CSS aponte. Use-o quando um título tiver que permanecer legível em cima de uma foto.
Text Shadow é um campo Pro. O plugin gratuito inclui um Widget Builder limitado, e o conjunto completo de campos vem com Master Addons Pro.
O que o campo Sombra de texto faz #
- Ele adiciona um controle ao painel do seu widget no Elementor: seu rótulo mais um ícone de lápis que abre as configurações de sombra.
- Essas configurações são Cor (com opacidade), Desfoque, Horizontal e Vertical.
- Elementor escreve o
text-shadowCSS ao elemento definido na opção Selector do campo, para que não coloque um token no seu HTML ou CSS.
Se você ainda não construiu um widget, leia o Visão geral do Widget Builder primeiro e volte com um widget aberto.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Master Addons para Elementor e Master Addons Pro, ambos ativos. O guia instalação coberturas configuração.
- Um widget aberto no Widget Builder O exemplo neste guia é um widget “Photo Banner”: uma foto de fundo com um cabeçalho H2 no topo que tem a classe
banner-title, preenchido a partir de um campo de texto nomeadobanner_title.
Como adicionar um campo Sombra de texto #
- Ir para Complementos mestres > Construtor de widgets e abra seu widget.
- Clique no Estilo aba acima da área de seções e adicione uma seção se a guia estiver vazia Dê à seção um título claro, como “Banner Title”.
- Tipo
shadowna caixa de pesquisa de campo à esquerda, a Sombra da Caixa e a Sombra do Texto aparecem. - Arrastar Sombra de texto na seção. Suas configurações abrem na barra lateral esquerda.
Você também pode soltar o campo em uma seção Conteúdo ou Avançado, e o controle então aparece nessa guia Elementor Os editores geralmente procuram sombras em Estilo, no entanto.
Opções de campo Sombra de texto explicadas #
- Etiqueta é o texto ao lado do controle em Elementor O exemplo usa “Title Shadow”.
- Nome é o ID exclusivo do campo (apenas letras, números e sublinhados) Elementor salva os valores do editor sob este nome, então defina-o uma vez e deixe-o em paz.
- Descrição é uma nota para você dentro do construtor Elementor não exibe sob este controle.
- Valor padrão não é usado por este campo Uma nova sombra sempre começa a partir dos próprios padrões do Elementor, listados mais abaixo.
Role para baixo na barra lateral para alcançar as configurações comuns e o Seletor.
- Mostrar etiqueta esconde ou mostra a etiqueta no painel.
- Separador desenha uma linha divisória antes ou depois do controle.
- Condições mostrar o controlo apenas quando outro campo tiver um determinado valor, por exemplo um switcher “Show shadow” Ver Condições.
- Seletor é o seletor CSS que recebe a sombra O campo não faz nada de útil sem ele, por isso tem sua própria seção abaixo.
Bloco de Etiquetas, Controle Responsivo, Suporte Dinâmico, Frontend Disponível e Classes de Controle também aparecem na lista Um controle de sombra de texto não os usa, e alterá-los não tem efeito neste campo.
Defina o Seletor #
O Seletor informa ao Elementor qual elemento obtém a sombra. Para o título do banner, insira:
{{WRAPPER}} .banner-title
{{WRAPPER}}é substituído pela classe exclusiva deste widget na página, que mantém a sombra dentro deste widget..banner-titleé a classe no cabeçalho do HTML do seu widget.
O campo usa o seu seletor exatamente como digitado Sem {{WRAPPER}}, a regra torna-se .banner-title { text-shadow: ... } para toda a página, e cada elemento com essa classe a pega, incluindo títulos em outros widgets Se você deixar o Seletor vazio, a sombra vai para {{WRAPPER}} .elementor-widget-container, que cobre todo o texto do widget.
Um controle pode estilizar vários elementos Separe os seletores com vírgulas e comece cada um com {{WRAPPER}}, por exemplo {{WRAPPER}} .banner-title, {{WRAPPER}} .banner-subtitle.
O painel Documentação ao lado do editor de código lista a {{title_shadow}} token para este campo Deixe-o fora do seu HTML e CSS Uma sombra é armazenada como números e uma cor, de modo que o token não tem texto para imprimir, e o Seletor já lida com a saída.
Clique Salvar configurações quando terminar.
Use o controle Sombra de Texto no Elementor #
Adicione o widget a uma página ou recarregue o editor se a página já estiver aberta Selecione o widget e abra o Estilo guia. O controle fica na seção que você criou, mostrando sua etiqueta e um ícone de lápis.
Clique no lápis para abrir o popover Que liga a sombra com os valores iniciais do Elementor: Desfoque 10, Horizontal 0, Vertical 0 e preto com 30% de opacidade A tela é atualizada enquanto você arrasta os controles deslizantes.
- Borrão corre de 0 a 100 px. Em 0 você obtém uma cópia nítida das letras, e valores mais altos suavizam-na em um brilho.
- Horizontal e Vertical corra de -100 a 100 px e mova a sombra para a esquerda ou para a direita e para cima ou para baixo.
Clique na amostra de cor para escolher a cor da sombra O selecionador possui um controle deslizante de opacidade e aceita valores HEXA, RGBA ou HSLA, para que você possa digitar um valor como rgba(0, 0, 0, 0.65) diretamente.
Para remover a sombra, clique na seta circular de reinicialização ao lado do lápis.
Casos de uso comum #
- Títulos sobre fotos de heróis e banners com áreas brilhantes atrás do texto.
- Texto em fundos de vídeo, onde uma sombra suave mantém as palavras legíveis à medida que o quadro muda.
- Tipo de exibição retrô, como um deslocamento rígido com desfoque zero em grandes números ou emblemas de venda.
- Um brilho em fundos escuros, feito com uma cor de sombra clara, um grande desfoque e sem deslocamento.
Dicas para trabalhar com o campo Sombra de texto #
- Comece cada seletor com
{{WRAPPER}}. Caso contrário, a sombra pode vazar para outros widgets da página. - Coloque o campo ao lado de um campo Tipografia que usa o mesmo seletor, para que as configurações de fonte e sombra do título fiquem em uma seção.
- Escolha uma cor semitransparente. Preto com 40 a 70% de opacidade parece natural e preto sólido tende a parecer pesado.
- Verifique a sombra contra a imagem mais brilhante que o widget provavelmente obterá Uma sombra que funcione em uma foto escura pode desaparecer em uma clara.
- Se o design precisar de uma sombra antes que alguém toque no controle, adicione um
text-shadowregra para.banner-titlena aba CSS O valor do controle o substitui uma vez que um editor define um. - Para cartões, botões e recipientes, use o Campo de sombra de caixa em vez disso. Text Shadow segue a forma das letras.
Perguntas frequentes #
O campo Sombra de Texto é gratuito?
No. Text Shadow é um dos campos Pro no Widget Builder, então Master Addons Pro tem que estar ativo antes que você possa adicioná-lo a um widget.
Por que minha sombra de texto não aparece?
Verifique primeiro o Seletor Ele tem que corresponder a um elemento no HTML do seu widget, por exemplo {{WRAPPER}} .banner-title para um cabeçalho com a classe banner-title. Em seguida, salve o widget e recarregue o editor Elementor.
Posso usar o token {{title_shadow}} no meu CSS?
Não. O token não imprime nada útil para este campo Defina a opção Seletor e Elementor escreve o text-shadow governe para você.
Por que a sombra aparece nos títulos de outros widgets?
Falta o Selector {{WRAPPER}}, então corresponde a essa classe em toda a página. Adicionar {{WRAPPER}} na frente da classe e salvar.
Qual é a diferença entre Text Shadow e Box Shadow?
Text Shadow desenha em torno das letras e não tem configurações de propagação ou inserção Box Shadow desenha em torno do retângulo do elemento Use Text Shadow para títulos e rótulos, e Box Shadow para cartões e botões.
Embrulhando #
Coloque o campo Sombra de texto em uma seção Estilo, dê a ele um rótulo e um nome e defina o Seletor como {{WRAPPER}} mais a classe do seu texto Os editores então obtêm controles de Cor, Desfoque e deslocamento no Elementor, e a sombra permanece dentro desse widget Emparelhe-a com o Campo tipografia para o resto do estilo da rubrica, e verifique preços para o que cada plano inclui.
