O Campo Sombra Texto adiciona o controle de sombra de texto do Elementor ao seu widget personalizado: deslocamento horizontal e vertical, desfoque e uma cor com opacidade, aplicada a qualquer texto em que seu seletor aponte Inside the Master Addons Construtor de widgets, é a maneira mais rápida de permitir que os editores mantenham uma manchete legível em uma foto ocupada ou dêem ao tipo de exibição uma elevação sutil.
Como todo controle do Widget Builder, o Text Shadow é compatível Condições, útil para revelá-lo somente quando uma opção de sombra estiver habilitada, e a saída de token no construtor passa pelo Mecanismo de modelo de sintaxe dupla. Ambos os guias cobrem configuração e limitações.
Text Shadow é um controle de grupo, o menor da família que inclui Tipografia e Fundo A fiação é idêntica: nenhum token em seu CSS, apenas uma opção Selector que diz ao Elementor qual elemento estilizar.
O que o campo Sombra de texto faz #
- Controle de grupo sombra de texto do Renders Elementor, aberto a partir do ícone de lápis junto ao rótulo do campo.
- Deslocamentos horizontais e verticais coloque a sombra em torno dos glifos.
- Borrão suaviza-o, de uma borda duplicata dura a um brilho largo.
- Cor inclui um canal alfa para sombras realistas e de baixa capacidade.
- Escreve o próprio CSS para o seletor que você fornece; não há token de modelo.
Nunca construiu um widget antes? comece com o Visão geral do Widget Builder e volte assim que tiver um aberto.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- Um widget personalizado aberto no editor Widget Builder Nosso exemplo é um widget de banner de fotos com um
<h2 class="banner-title">rumo sentado na imagem.
Como adicionar um campo Sombra de texto #
No editor Widget Builder, role o painel de campos à esquerda até encontrar o Sombra de texto campo, listado com outros campos de grupos de estilo, como Typography e Box Shadow.
Arraste-o para uma seção abaixo do Estilo tab, geralmente bem ao lado do campo Tipografia que estiliza o mesmo texto, uma vez que ele pousa, as opções do campo abrem à esquerda.
Opções de campo Sombra de texto explicadas #
- Etiqueta: o texto mostrado ao lado do controle em Elementor, por exemplo “Title Shadow”.
- Nome: o identificador exclusivo apenas para o campo, letras, números e sublinhados.
- Seletor: o seletor CSS ao qual a sombra se aplica Esta é a conexão em si, abordada a seguir.
- Excluir: remove subcontroles individuais do grupo quando você deseja um popover reduzido.
- Descrição, Mostrar etiqueta, separador e condições são as opções de exibição padrão que você viu em outros campos.
Aponte o campo no seu seletor #
Como os outros controles de grupo, o campo Sombra de Texto não tem {{shortcode}} para o seu CSS. A sombra agrupa compensa, desfoca e colore em uma propriedade, então a {{ token }} para o campo imprime nada de útil O Seletor a opção carrega toda a conexão.
Para o cabeçalho do banner, o seletor é:
{{WRAPPER}} .banner-title
{{WRAPPER}}significa o próprio contêiner do widget, mantendo a sombra dentro deste widget Os controles de grupo aplicam o seletor conforme escrito, portanto{{WRAPPER}}é seu para digitar; não é adicionado para você..banner-titleé o elemento de texto dentro do HTML do seu widget.
Cuidado: pule {{WRAPPER}} e o seletor estiliza cada .banner-title em toda a página, incluindo aqueles em outros widgets A configuração espelha o Campo tipografia exatamente, então um seletor que funciona lá funciona aqui.
Se o design exigir uma sombra padrão, mantenha-a na guia CSS do widget como um fallback O controle a substitui uma vez que um editor define valores.
Use o controle Sombra de Texto no Elementor #
Adicione seu widget personalizado a uma página no Elementor ou recarregue o editor se ele já estiver aberto O controle mostra sua etiqueta e um ícone de lápis que abre o shadow popover.
Escolha uma cor e, em seguida, ajuste o Borrão e os dois deslocamentos Uma sombra escura em baixa opacidade com um par de pixels de borrão mantém uma manchete legível sobre a fotografia; deslocamentos maiores com zero borrão produzem um efeito de exibição retro As atualizações de visualização a cada alteração Ajuste o resultado contra a foto mais clara que o site provavelmente usará, não apenas a imagem de demonstração, porque uma sombra discada em um fundo escuro pode desaparecer completamente em um brilhante.
Casos de uso comum #
- Cabeçalhos sobre fotos em widgets de herói e banner, onde a sombra compra contraste de volta.
- Texto em fundos de vídeo, que mudam constantemente e precisam de uma borda extra.
- Exibir efeitos de tipo como sombras de deslocamento rígido em números grandes.
- Texto leve em imagens leves, onde um halo escuro suave mantém legendas legíveis.
- Crachás e etiquetas sentado em gradientes ou áreas padronizadas.
Dicas para trabalhar com o campo Sombra de texto #
- A opção Seletor é toda a conexão. Não existe nenhum token para controles de grupo, então nada vai na guia CSS deste campo.
- Sempre inicie o seletor com
{{WRAPPER}}. É usado bruto e sem ele a sombra atinge todos os elementos correspondentes da página. - Combine-o com um campo Tipografia no mesmo seletor. As decisões de fonte e sombra para um título ficam juntas no painel.
- Favoreça cores de baixa opacidade. As sombras construídas a partir do canal alfa da cor ficam no design; o preto sólido raramente.
- Use Excluir para simplificar. Se um widget precisar apenas de desfoque e cor, aparar o grupo mantém o popover pequeno.
- Envie um fallback na guia CSS quando o design padrão depende da sombra estar lá.
Perguntas frequentes #
Qual é o campo Sombra de texto no Master Addons Widget Builder?
Ele adiciona o controle de grupo de sombra de texto do Elementor a um widget personalizado, com deslocamento horizontal e vertical, desfoque e cor Você aponta o campo para um seletor CSS, como {{WRAPPER}} .banner-title, e Elementor escreve a sombra nesse texto.
Onde está o shortcode de sombra de texto para a guia CSS?
Não existe nenhum. Text Shadow é um controle de grupo, então seu valor nunca é impresso através de a {{token}}; um token para ele não gera nada útil. Defina a opção Seletor e o CSS será gerado para você.
Como o Text Shadow é diferente do Box Shadow?
Text Shadow desenha a sombra dos glifos do próprio texto e não tem configurações de propagação ou inserção Box Shadow desenha da caixa do elemento Use Text Shadow para títulos e rótulos, Box Shadow para cartões, botões e contêineres.
Por que minha sombra está aparecendo em títulos de outros widgets?
O seletor não possui {{WRAPPER}}, por isso corresponde à classe em todos os lugares da página Os controles de grupo tomam o seletor exatamente como escrito Prefixá-lo com {{WRAPPER}} e salvar.
Um campo Sombra de Texto pode cobrir vários elementos de texto?
Sim. Separe a vírgula dos seletores e comece cada um com {{WRAPPER}}, por exemplo {{WRAPPER}} .banner-title, {{WRAPPER}} .banner-sub. Ambos seguem o mesmo controle.
Uma regra de sombra de texto no meu CSS de widget ainda se aplica?
Sim, como padrão A saída do controle substitui o valor da folha de estilo assim que um editor configura o popover, que é exatamente como um fallback deve se comportar.
Embrulhando #
O campo Sombra de texto do Widget Builder é um pequeno controle que resolve um problema recorrente: texto que tem que permanecer legível, não importa qual imagem um editor deixe para trás Nomeie o campo, defina o Seletor como {{WRAPPER}} mais a classe do texto, e a sombra vive no painel a partir daí Ele compartilha seu modelo seletor com o Campo tipografia, que geralmente pertence no mesmo título de qualquer maneira Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.
