O campo Box Shadow adiciona o controle de sombra de caixa do Elementor a um widget personalizado construído com os Master Addons Construtor de widgets. Os editores definem a cor, deslocamentos, desfoque, propagação e posição de um pequeno popover, e a sombra é aplicada ao elemento em que seu seletor CSS aponta É o campo para levantar cartões da página, suavizar botões ou dar a um painel um visual pressionado.
Box 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 Box Shadow faz #
- Ele adiciona um controle à guia Estilo do seu widget: sua etiqueta e um ícone de lápis que abre as configurações de sombra.
- As configurações são Cor, Horizontal, Vertical, Desfoque, Spread e Posição (Esboço ou Inset).
- Elementor escreve o
box-shadowCSS para o elemento no Seletor, para que você não precise de um token em seu HTML ou CSS.
Se você ainda não construiu um widget, leia o Visão geral do Widget Builder primeiro.
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 “Testimonial Card” cujo cartão tem a classe
quote-card.
Como adicionar um campo Box Shadow #
- Ir para Complementos mestres > Construtor de widgets e abra seu widget.
- Clique no Estilo tab e adicione uma seção, por exemplo “Card Style”.
- Tipo
shadowna caixa de pesquisa de campo à esquerda, a Sombra da Caixa e a Sombra do Texto aparecem. - Arrastar Sombra Caixa na seção. Suas configurações abrem na barra lateral esquerda.
Opções de campo Box Shadow explicadas #
- Etiqueta é o texto ao lado do controle em Elementor, por exemplo “Card Shadow”.
- Nome é o ID único do campo Apenas letras, números e sublinhados.
- Descrição é uma nota para você dentro do construtor.
- Seletor, Tipo de sombra padrão, Valores de sombra padrão e Cor da Sombra Padrão apareça sob a descrição Em nossos testes, as alterações digitadas nessas caixas não foram salvas e o construtor registrou um erro, então não confie nelas por enquanto Defina o seletor nas configurações comuns em vez disso (próxima seção) e dê ao cartão uma sombra inicial na guia CSS.
- Valor padrão não é usado por este campo.
Defina o Seletor #
Role até a parte inferior da barra lateral e digite a classe do elemento no Seletor caixa sob Classes de Controle Para o cartão de depoimento:
.quote-card
Não tens de digitar {{WRAPPER}}. O construtor adiciona na frente do seu seletor, então a regra se torna {{WRAPPER}} .quote-card e só afeta este widget Separe vários seletores com vírgulas se uma sombra deve aplicar-se a mais de um elemento Se o Seletor estiver vazio, a sombra vai no invólucro exterior do widget.
Depois de salvar, a caixa Selecionador próxima à parte superior da barra lateral mostra o mesmo valor.
Adicionar uma sombra de fallback #
Coloque a sombra inicial na guia CSS Ele mostra até que um editor ligue o controle, e a sombra do controle o substitui depois disso:
.quote-card {
box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}
Clique Salvar configurações quando terminar.
Use o controle Box Shadow 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. Sua etiqueta aparece com um ícone de lápis.
Clique no lápis para abrir o popover Que liga a sombra com os valores iniciais do Elementor: Horizontal 0, Vertical 0, Borrão 10, Espalhe 0 e preto com 50% de opacidade Ajuste-os e o cartão atualize à medida que arrastar:
- Cor define a cor da sombra e opacidade Uma cor tingida e semitransparente parece mais suave que o preto.
- Horizontal e Vertical mova a sombra para os lados e para cima ou para baixo.
- Borrão suaviza a borda. 0 dá uma sombra dura.
- Espalhar cresce ou encolhe a sombra Um pequeno valor negativo mantém um grande borrão de derramar para os lados.
- Posição alterna entre Outline (fora da caixa) e Inset (dentro dela).
Definir posição para Inset para um visual pressionado, útil para campos de entrada e painéis silenciosos:
A seta circular ao lado do lápis redefine o controle e remove a sombra.
Casos de uso comum #
- Cartões em widgets de depoimentos, preços, equipes e blogs.
- Botões que precisam de um pouco de profundidade, muitas vezes emparelhados com um estilo hover.
- Sombras deslocadas duras para designs planos e ousados.
- Insira sombras em campos de entrada, barras de pesquisa e painéis embutidos.
Dicas para trabalhar com o campo Box Shadow #
- Use o Seletor na parte inferior da barra lateral e digite apenas a classe.
{{WRAPPER}}é adicionado para você. - Mantenha um fallback
box-shadowna guia CSS para que novos widgets não pareçam planos. - Para sombras de cartão macio, tente um grande Blur, um deslocamento Vertical de cerca de metade do blur e um pequeno Spread negativo.
- Dê ao elemento um raio de borda As sombras seguem os cantos, então as cartas arredondadas obtêm sombras arredondadas.
- Para sombras no texto, use o Campo Sombra Texto em vez disso.
Perguntas frequentes #
O campo Box Shadow é gratuito?
No. Box 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.
Preciso adicionar {{WRAPPER}} ao seletor?
Não. O construtor acrescenta {{WRAPPER}} na frente do seletor Box Shadow para você, então .quote-card é suficiente.
Por que meu tipo de sombra padrão ou valores de sombra padrão não são salvos?
Em nossos testes aquelas caixas não mantiveram suas alterações Defina a sombra inicial com a box-shadow regra na guia CSS em vez disso Os editores podem então alterá-lo com o controle.
Onde está o token de sombra de caixa para meu CSS?
Não há um para usar Uma sombra é vários valores em uma propriedade CSS, então Elementor escreve a regra para o Seletor para você.
Qual é a diferença entre Box Shadow e Text Shadow?
Box Shadow desenha em torno da caixa do elemento e tem Spread e Inset Text Shadow segue as letras do texto Use Box Shadow para cartões e botões, Text Shadow para títulos.
Embrulhando #
Adicione o campo Sombra de caixa a uma seção Estilo, digite a classe do seu elemento no Seletor na parte inferior da barra lateral e mantenha uma sombra de retorno leve na guia CSS Os editores então controlam a sombra de um popover Para o resto do estilo do cartão, veja o Fronteira e Dimensões campos e verifique preços para o que cada plano inclui.
