O Campo de sombra de caixa coloca o controle de sombra padrão da Elementor no painel do seu widget personalizado: deslocamento horizontal e vertical, desfoque, propagação, cor com opacidade e uma alternância de inserção Dentro dos complementos mestres Construtor de widgets, é o campo que permite aos editores retirar um cartão da página, suavizar um botão ou recessar uma entrada sem tocar na folha de estilo.
O controle Box Shadow suporta Condições, uma maneira limpa de mostrá-lo somente quando uma alternância de sombra estiver ativada, e a saída de token no construtor for tratada pelo Mecanismo de modelo de sintaxe dupla. Ambos os guias cobrem configuração e limitações.
Box Shadow é um controle de grupo, a mesma família que Typography e Background A conexão com seu widget é um seletor CSS, não um token: você diz ao campo qual elemento ele estiliza, e Elementor escreve a sombra lá por conta própria.
O que o campo Box Shadow faz #
- Controle do grupo sombra da caixa do Elementor Renders, aberto a partir do ícone de lápis junto ao rótulo do campo.
- Deslocamentos horizontais e verticais posicione a sombra em torno do elemento.
- Desfoque e propagação controle a suavidade e o alcance.
- Cor inclui um canal alfa, de onde vem a maior parte da qualidade da sombra.
- Alternar posição alterna entre uma sombra externa e uma inserção.
- Escreve o próprio CSS para o seletor que você fornece; nenhum token de modelo existe.
Se você é novo na construção de widgets, o Visão geral do Widget Builder é o lugar para começar.
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 testemunho cujo
<article class="quote-card">deve carregar uma sombra controlada pelo editor.
Como adicionar um campo Box Shadow #
No editor Widget Builder, role o painel de campos à esquerda até encontrar o Sombra Caixa campo, listado com os outros campos de grupo de estilo, como Fundo e Sombra de Texto.
Arraste-o para uma seção abaixo do Estilo tab, normalmente ao lado dos campos Border e Dimensions em uma seção de estilo de cartão Uma vez que ele pousa, as opções do campo abrem à esquerda.
Opções de campo Box Shadow explicadas #
- Etiqueta: o texto mostrado ao lado do controle em Elementor, por exemplo “Card 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.
- Opções de campos: substitui os subcontroles dentro do grupo, como alterar um valor padrão a partir do qual a sombra começa.
- Descrição, Mostrar etiqueta, separador e condições são as opções de exibição usuais.
Aponte o campo no seu seletor #
Como todo controle de grupo, o campo Box Shadow não tem {{shortcode}} para o seu CSS. Uma sombra são vários valores reunidos em uma propriedade e a {{ token }} para o campo imprime nada de útil O Seletor opção é toda a conexão.
Para o cartão de depoimento, o seletor é
{{WRAPPER}} .quote-card
{{WRAPPER}}significa o próprio contêiner do widget e mantém a sombra delimitada para esse widget Os controles de grupo usam o seletor exatamente como você o escreve, então digite{{WRAPPER}}você mesmo..quote-cardé o elemento dentro do HTML do seu widget no qual a sombra pousa.
Cuidado: um seletor sem {{WRAPPER}} partidas cada .quote-card na página, então as configurações de sombra de um widget reestilizam todos eles Nada avisa você; os estilos simplesmente se espalham.
Mantenha uma sombra de fallback na guia CSS do widget se o design depender de um É o look na primeira gota, e os valores do controle assumem o controle assim que um editor abre o popover.
Use o controle Box Shadow no Elementor #
Coloque o widget em uma página no Elementor, recarregando o editor se a página já estiver aberta O controle mostra sua etiqueta com um ícone de lápis; clicando nele abre o popover de sombra.
Defina a cor primeiro, depois puxe o Blur para cima e mantenha os deslocamentos pequenos para a aparência do cartão macio ou empurre o Vertical para cima com zero Blur para uma sombra gráfica rígida Flip Position para inserir para campos e poços pressionados A visualização rastreia cada mudança Uma nota de layout: as sombras não ocupam espaço no fluxo, portanto, uma propagação generosa pode sangrar nas seções acima e abaixo sem mover nada, o que vale a pena verificar quando o widget fica entre linhas apertadas.
Casos de uso comum #
- Cartões em widgets de testemunho, preços e equipe, onde uma sombra suave separa o cartão da página.
- Botões isso precisa de profundidade no estado padrão.
- Molduras imagem, dando às fotos uma borda elevada, semelhante a uma impressão.
- Barras e painéis pegajosos onde uma sombra sinaliza elevação sobre o conteúdo.
- Colocar campos de formulário, usando a alternância de inserção para uma aparência recuada.
Dicas para trabalhar com o campo Box Shadow #
- A opção Seletor é toda a conexão. Não há token de sombra de caixa para a guia CSS; esperar um é o beco sem saída mais comum com controles de grupo.
- Sempre inicie o seletor com
{{WRAPPER}}. O campo o usa bruto e deixá-lo derramar a sombra em todos os elementos correspondentes da página. - Agrupe-o com Border e Dimensions. Os três campos juntos formam uma seção completa de estilo de cartão no painel.
- Apoie-se na cor alfa, não na escuridão. Uma sombra preta com 10 a 15 por cento de opacidade lê melhor do que uma cinza sólida, e vale a pena uma nota na Descrição do seu campo.
- Mantenha um fallback no Widget CSS. Se o design precisar de uma sombra por padrão, envie-a na folha de estilo e deixe o controle substituí-la.
Perguntas frequentes #
Qual é o campo Box Shadow no Master Addons Widget Builder?
Ele adiciona o controle de grupo de sombra de caixa do Elementor a um widget personalizado, cobrindo deslocamentos, desfoque, propagação, cor e uma alternância de inserção Você aponta o campo para um seletor CSS, como {{WRAPPER}} .quote-card, e Elementor escreve a sombra para esse seletor.
Onde está o código de acesso de sombra de caixa para a guia CSS?
Não existe nenhum. Box 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 Preencha a opção Seletor e o CSS será gerado para você.
Por que minha sombra também está aparecendo em outros widgets?
Falta o selector {{WRAPPER}}. Os controles de grupo aplicam o seletor exatamente como está escrito, portanto .quote-card sozinho estiliza cada partida na página Altere para {{WRAPPER}} .quote-card e salvar.
Posso fazer uma sombra interior?
Sim. O alternador Position do popover muda a sombra para a inserção, o que a desenha dentro das bordas do elemento, o tratamento usual para entradas e poços embutidos.
Para que serve a configuração Opções de campos?
Ele substitui subcontroles individuais dentro do grupo, por exemplo, dando à sombra um valor inicial predefinido para que o controle seja aberto com uma sombra utilizável em vez de vazia.
Uma sombra no meu Widget CSS entra em conflito com o controle?
Não. A sombra da folha de estilo é a aparência padrão, e a saída do controle a substitui quando um editor define valores. Mantendo um fallback, há a configuração recomendada.
Embrulhando #
O campo Sombra da caixa do construtor de widgets oferece aos editores controle real sobre a profundidade: um campo, um seletor começando com {{WRAPPER}}, e todo o popover sombra aparece no painel Ele funciona no mesmo modelo seletor como o Campo tipografia, então a configuração é transportada diretamente entre os controles do grupo Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.
