Como Adicionar Sombra de Caixa no WordPress: 4 Maneiras Fáceis 

Quando uma página parece plana, geralmente são as sombras que estão faltando. Adicionar uma sombra de caixa aos seus cartões de destaque ou botões de CTA é uma das correções de design mais rápidas que você pode fazer no WordPress.

Neste guia, compartilharei 4 maneiras fáceis de adicionar uma sombra de caixa no WordPress para que você possa destacar o conteúdo que mais importa.

Por que Adicionar uma Sombra de Caixa no WordPress?

Uma sombra de caixa cria uma ilusão sutil de profundidade, imitando a sombra que um objeto lançaria, fazendo com que ele pareça ligeiramente elevado do fundo. Esse efeito de sombra CSS pode mudar drasticamente a forma como os visitantes percebem seu conteúdo.

Nossos cérebros são naturalmente atraídos por contraste e separação, princípios enraizados na psicologia Gestalt. Adicionar uma sombra de caixa cria uma separação visual entre os elementos, guiando instantaneamente os olhos dos seus visitantes para as áreas mais importantes do seu site.

Isso significa que as sombras de caixa podem realmente ajudar seu site a ter um melhor desempenho:

• Aumentar Conversões: Destaque chamadas para ação como botões ou formulários para incentivar cliques e conversões.
• Enfatizar Imagens: Faça as imagens se destacarem do fundo, atraindo atenção e aumentando seu impacto.
• Melhorar a Experiência do Usuário: Crie um layout mais visualmente atraente e organizado, tornando seu site mais fácil e agradável de navegar.

Abaixo, você encontrará 4 maneiras fáceis de adicionar esses efeitos ao seu site WordPress.

Método 1: Adicionar uma Sombra de Caixa no WordPress Usando SeedProd (O Mais Fácil)

Agora que você entende o poder das sombras de caixa, vamos criar uma. Este método é perfeito para aprendizes visuais e qualquer pessoa que queira uma solução sem código. Usarei o SeedProd para adicionar uma sombra de caixa estilosa em apenas alguns cliques.

SeedProd é o melhor construtor de sites WordPress, com mais de 1 milhão de usuários. Com seu construtor visual de arrastar e soltar, você pode criar páginas de destino e sites de alta conversão e personalizar cada centímetro do seu design sem escrever código.

Você também pode adicionar sombras de caixa a qualquer elemento de design clicando e arrastando.

Para começar, instale e ative o SeedProd em seu site WordPress. Para mais detalhes, veja nosso guia sobre como instalar o SeedProd.

Observação: A versão gratuita do SeedProd tem tudo o que você precisa para adicionar sombras de caixa no WordPress. No entanto, usarei a versão premium para este guia, pois ela possui modelos mais avançados.

Após ativar o plugin, navegue até SeedProd » Landing Pages no seu painel do WordPress. Em seguida, clique no botão Adicionar Nova Landing Page.

Aqui, escolha um design pré-fabricado e totalmente personalizável para sua página. Os modelos do SeedProd facilitam a busca por um visual que se encaixe na sua marca, e você pode ajustar cada detalhe para torná-lo seu.

Clique nos filtros no topo para navegar, depois passe o mouse sobre um modelo e clique no ícone de visto para selecioná-lo.

Agora, você pode inserir um nome para sua página, e o SeedProd definirá automaticamente o URL. Incluir palavras-chave relevantes para a página no URL é uma boa ideia, pois isso pode melhorar sua otimização para mecanismos de busca no WordPress.

Se você não quiser manter o URL gerado, clique no campo 'URL da Página' e digite o seu próprio.

Agora você pode clicar no botão Salvar e Começar a Editar a Página para iniciar seu design na interface do construtor de páginas.

O construtor de arrastar e soltar do SeedProd mostra uma prévia ao vivo do seu design à direita. No lado esquerdo, há um painel com blocos que você pode arrastar para a página.

Quando encontrar um bloco que deseja adicionar, clique, arraste e solte-o na prévia ao vivo. Em seguida, você pode selecionar o bloco para personalizar sua aparência e configurações.

Por exemplo, clicar no bloco de Título permite que você insira seu próprio texto e altere o tamanho da fonte, cor e alinhamento.

Você também pode mover blocos pela página arrastando e soltando-os. Para instruções detalhadas, consulte nosso guia sobre como criar uma landing page no WordPress.

Se você quiser adicionar uma sombra de caixa a um bloco, precisará clicar na aba Avançado nas configurações desse bloco.

Neste exemplo, quero adicionar uma sombra de caixa a cada caixa de recursos. Portanto, clicarei nas configurações da coluna e selecionarei a aba Avançado.

Em seguida, clique no menu suspenso 'Sombra' e selecione uma opção, como Fina, Pequena, Média, Grande, Extra Grande, e assim por diante.

Ao escolher uma sombra, a prévia será atualizada automaticamente. Você pode experimentar diferentes estilos até encontrar um que funcione.

Se os estilos pré-fabricados não funcionarem para você, escolha a opção 'Personalizado'. Esta opção abre novas personalizações para alterar o desfoque, o espalhamento, a cor, a posição da sombra e muito mais.

No final, escolhi a opção 2X Grande e repeti o processo para cada bloco na grade.

Após adicionar a sombra de caixa, você pode continuar personalizando sua página adicionando mais blocos e sombras.

Quando estiver satisfeito com a aparência de tudo, clique em Salvar no canto superior direito e selecione Publicar para tornar sua página ativa.

Aqui está um exemplo de como minha página final fica, completa com as novas sombras de caixa:

Para adicionar uma sombra de caixa a um botão do WordPress, selecione seu bloco de botão no SeedProd, abra a guia Avançado e aplique as mesmas configurações de sombra mostradas acima.

Método 2: Adicionar uma Sombra de Caixa no WordPress com Código CSS (Mais Controle)

Adicionar uma sombra de caixa a todos os elementos do seu site pode deixá-lo confuso. Em vez disso, é melhor usá-las para destacar conteúdo importante e manter o design consistente.

A maneira mais fácil de fazer isso é definindo o estilo da sua sombra de caixa com CSS, e usarei o WPCode para torná-lo super simples.

WPCode é um plugin popular de trechos de código que permite adicionar código personalizado ao seu site WordPress sem editar diretamente os arquivos do seu tema. Isso mantém as coisas organizadas e ajuda a evitar erros acidentais.

A primeira coisa que você precisará fazer é instalar e ativar o plugin gratuito WPCode. Para um guia completo, veja este guia sobre como instalar um plugin do WordPress.

Após ativar o plugin, vá para Code Snippets » +Add Snippets no seu painel do WordPress.

Nesta página, você verá trechos de código personalizados pré-fabricados para adicionar ao seu site. Para adicionar o seu, passe o cursor sobre a opção ‘Add Your Custom Code’ e clique em Add Custom Snippet.

Após o carregamento da página, digite um nome para o seu trecho para ajudar a identificá-lo. Em seguida, selecione a opção ‘CSS Snippet’ no menu suspenso ‘Code Type’.

Agora adicione o seguinte trecho de código ao editor de código:

.custom-box-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

Você pode substituir os valores de px no trecho para personalizar a sombra que deseja criar.

Vamos detalhar esses números para que você saiba exatamente o que está acontecendo:

• .custom-box-shadow: Este é o nome da classe CSS que estamos criando. Usaremos isso para aplicar a sombra de caixa a elementos específicos.
• Box-shadow: Isso informa ao navegador que estamos prestes a definir uma propriedade CSS de sombra de caixa.
• 5px 5px: Esses dois primeiros valores são o deslocamento horizontal e vertical da sombra. O primeiro valor a move para a direita, o segundo a move para baixo. Brinque com esses valores para ajustar a posição da sombra.
• 10px: Este é o raio de desfoque. Números maiores criam uma sombra mais suave e difusa. Números menores a mantêm nítida.
• 0px (spread radius): Este é o raio de expansão. Um valor positivo expande a sombra para fora; 0px a mantém justa. Adicione-o entre o valor de desfoque e a cor rgba se quiser usá-lo.
• rgba(0, 0, 0, 0.2): Isso define a cor da sombra. Estamos usando um preto semitransparente aqui. O último número (alfa) controla a transparência: 0 é completamente transparente e 1 é totalmente opaco.

Você também pode adicionar ‘inset’ como o primeiro valor para criar uma sombra dentro do elemento em vez de fora dele.

Se sua sombra de caixa não estiver aparecendo, aqui estão três coisas para verificar:

• O seletor CSS pode não estar visando o elemento correto. Use as Ferramentas do Desenvolvedor do navegador para confirmar a qual elemento a classe está aplicada.
• Outra folha de estilos pode estar substituindo sua sombra. Adicione !important como último recurso se não conseguir resolver o conflito.
• Um contêiner pai com overflow:hidden definido irá cortar a sombra. Remova essa propriedade ou ajuste o contêiner.

Quando estiver satisfeito com o snippet, role para baixo até a seção Inserção para definir onde o WPCode deve adicioná-lo. Para usá-lo em todo o seu site, escolha a opção 'Inserir Automaticamente' e defina a localização como Cabeçalho do Site Inteiro.

Agora, volte para o topo da página e mude o seletor 'Inativo' para a posição 'Ativo'. Em seguida, clique no botão Salvar Snippet.

O próximo passo é adicionar a classe CSS personalizada a qualquer bloco do WordPress. Para fazer isso, selecione qualquer bloco no editor de blocos do WordPress e clique em 'Avançado' no menu à esquerda.

No campo 'Classes CSS Adicionais', digite 'custom-box-shadow'.

Em seguida, quando estiver satisfeito com a postagem, você pode clicar em 'Atualizar' ou 'Publicar'. Você pode então visitar a postagem e ver sua sombra de caixa em ação.

Método 3: Adicionar uma Sombra de Caixa Usando um Plugin Gratuito (Alternativa Rápida)

Se você não se sente confortável trabalhando com snippets de código, pode preferir criar sombras usando Drop Shadow Boxes. Este plugin gratuito do WordPress permite adicionar sombras de caixa a qualquer bloco usando o editor de blocos integrado do WordPress.

Primeiro, instale e ative o plugin em seu site. Como não há configurações configuráveis, você pode usar o plugin imediatamente.

Em seguida, crie ou edite uma postagem ou página do WordPress. Dentro do editor, clique no ícone de mais (+) para adicionar um novo bloco e pesquise por 'drop shadow'.

Quando ele aparecer, clique nele para adicioná-lo à sua página. Você verá uma sombra projetada em um bloco vazio, então vamos adicionar algum conteúdo.

Dentro do bloco de sombra projetada, clique no ícone de mais, adicione um bloco e configure-o como de costume. Por exemplo, adicionei um bloco de imagem e escolhi uma imagem da biblioteca de mídia do WordPress.

Em seguida, clique no bloco para ver as configurações da sombra da caixa na barra lateral esquerda.

A largura da sombra é definida automaticamente pelo WordPress, mas você pode alterá-la escolhendo 'pixels' ou '%' na caixa suspensa 'Largura'. Em seguida, você pode usar o controle deslizante para ajustá-la.

Você também notará outros efeitos, como bordas curvas e um efeito de 'Perspectiva'. Para visualizá-los, abra o menu suspenso 'Efeito' e escolha um da lista.

Outras opções com as quais você pode experimentar incluem sombras internas e externas, cores de borda, pixels de borda e cantos arredondados.

Quando estiver satisfeito com a sombra da caixa, repita essas etapas para outros blocos, ou clique em 'Atualizar' ou 'Publicar' para tornar suas alterações ao vivo.

Veja como minhas sombras de caixa ficam usando este método:

Método 4: Adicionar uma Sombra de Caixa Usando CSS Hero (Avançado)

Se você não se sente confortável trabalhando com código, mas ainda deseja criar sombras de caixa avançadas, então CSS Hero é uma ótima opção.

Este plugin premium permite ajustar cada parte do seu tema do WordPress sem escrever uma única linha de código. Você também pode criar sombras exclusivas para cada bloco, tornando-o ideal para experimentar diferentes efeitos de sombra em todo o seu site.

Para começar, instale e ative o plugin CSS Hero. Em seguida, siga as instruções de ativação do produto para vincular sua conta CSS Hero ao seu site WordPress.

Agora, clique na opção ‘Personalizar com CSS Hero’ na barra de ferramentas do administrador para abrir o editor CSS Hero.

Por padrão, o editor CSS Hero exibe uma visualização ao vivo do seu site e um painel onde você pode editar cada elemento do seu design web.

Se você não estiver na página onde deseja adicionar a sombra da caixa, use os ícones na parte superior da tela para alternar do modo ‘Selecionar’ para o modo ‘Navegar’.

Agora, você pode ir para a página desejada e voltar para o modo Selecionar.

Em seguida, clique em qualquer elemento na visualização onde deseja adicionar uma sombra de caixa, como uma imagem, botão, parágrafo ou outro conteúdo.

Quando terminar, clique em ‘Extra’ no painel esquerdo.

Por padrão, a opção de sombra de caixa mostra ‘Nenhuma’, então clique no botão Criar Sombra.

Primeiro, altere onde a sombra aparece. Nas configurações de Posição da Sombra, você pode escolher ‘Dentro’ ou ‘Fora’.

Em seguida, trabalhe no ângulo da sombra na seção Orientação. Simplesmente arraste o círculo até que o ângulo da sombra da caixa esteja na posição desejada.

Por fim, altere a cor da sombra usando a ferramenta conta-gotas e use os controles deslizantes para controlar o desfoque e o espalhamento da sombra.

Use a mesma abordagem para adicionar uma sombra de caixa a outras áreas do seu site. Em seguida, quando estiver satisfeito com a aparência de tudo, clique no botão Salvar e Publicar.

Agora, visite suas alterações para ver como elas ficam ao vivo no seu site.

Perguntas Frequentes

O que é uma sombra de caixa no WordPress?

Uma sombra de caixa no WordPress é um efeito de sombra CSS aplicado a um elemento — como uma imagem, botão ou bloco de conteúdo — para dar profundidade. Faz com que o elemento pareça ligeiramente elevado do fundo da página. Você pode adicionar um usando um construtor de páginas visual, um trecho de CSS ou um plugin dedicado, sem editar os arquivos do tema.

Como adiciono uma sombra de caixa no WordPress sem um plugin?

Para adicionar uma sombra de caixa no WordPress sem um plugin, escreva um trecho de CSS personalizado. Adicione uma regra de box-shadow em Aparência > Personalizar > CSS adicional, ou use o WPCode para gerenciar o trecho. Em seguida, aplique o nome da classe CSS a qualquer bloco através do seu painel de configurações Avançadas no editor de blocos.

Qual é a diferença entre uma sombra de caixa e uma sombra projetada?

Uma sombra de caixa segue a caixa delimitadora retangular de um elemento, produzindo sempre uma sombra retangular, independentemente da forma do elemento. Uma sombra projetada usa a propriedade de filtro CSS e segue o contorno real do elemento, incluindo áreas transparentes. Para a maioria dos casos de uso do WordPress — cartões, botões, imagens — uma sombra de caixa funciona bem. Use uma sombra projetada quando a sombra precisar seguir uma forma irregular ou recortada.

Posso adicionar uma sombra de caixa a imagens no WordPress?

Sim. Com o SeedProd, selecione um bloco de imagem, abra a aba Avançado e escolha um preset no menu suspenso Sombra. Com CSS, aplique uma regra box-shadow direcionada ao elemento img ou a uma classe CSS personalizada. O plugin Drop Shadow Boxes também envolve blocos de imagem com uma sombra usando o editor nativo do WordPress.

Mais Maneiras de Personalizar seu Site WordPress

Os métodos que abordei neste guia são ideais para adicionar efeitos de sombra de caixa no WordPress. Mas se você quiser adicionar efeitos mais criativos, achará os seguintes guias úteis:

• Como Alterar Margens no WordPress — Personalize o espaçamento ao redor do seu conteúdo para um visual polido e profissional.
• Como Adicionar Texto em uma Imagem no WordPress — Crie gráficos marcantes e chamadas para ação diretamente em suas imagens.
• Como Criar Fundos com Partículas Animadas (Particle.js) no WordPress — Adicione um toque de estilo dinâmico com fundos animados que chamam a atenção.
• Como Tornar uma Página de Largura Total no WordPress — Liberte-se das barras laterais e crie layouts de página imersivos e de largura total.
• Como Escurecer uma Imagem de Fundo no WordPress — Torne seu texto mais fácil de ler e crie uma sensação de profundidade com uma imagem de fundo escurecida.
• Como Criar Animações de Texto no WordPress — Capture a atenção dos seus visitantes com efeitos de texto animados que chamam a atenção.
• Como Criar Divisores de Seção Elegantes para WordPress — Separe visualmente seu conteúdo com divisores de formas estilosos.

Espero que este guia tenha ajudado você a aprender como adicionar uma sombra de caixa no WordPress. Agora, você pode melhorar instantaneamente o design do seu site e destacar seu conteúdo mais importante.

Pronto para aprimorar suas habilidades em WordPress? Comece com o SeedProd e crie landing pages e sites de alta conversão sem codificação.

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.