Como Adicionar Sombra de Caixa Facilmente no WordPress (4 Maneiras)

Uma sombra de caixa é uma das maneiras mais fáceis de adicionar profundidade e ênfase a elementos no seu site WordPress. Podemos criar esse efeito com apenas algumas linhas de CSS.

Dito isso, mesmo que seja simples, alguns leitores do WPBeginner pediram dicas sobre como implementá-lo de forma eficaz, especialmente se eles não se sentem confortáveis com codificação.

Neste artigo, mostraremos várias maneiras de adicionar sombras de caixa facilmente no WordPress, passo a passo. 

Por Que Adicionar Sombras de Caixa no WordPress?

Uma sombra de caixa, às vezes também conhecida como sombra projetada, é um efeito visual que faz parecer que algo na tela está projetando uma sombra.

Tendemos a prestar mais atenção a objetos que parecem mais próximos de nós. Com isso em mente, muitos proprietários de sites adicionam sombras de caixa ao seu conteúdo mais importante para fazê-lo parecer que está pairando acima da página.

Por exemplo, se você adicionar uma sombra grande a um botão de chamada para ação, ele parecerá fisicamente mais próximo do visitante, o que chama a atenção dele.

Dito isso, vamos ver como você pode adicionar sombras de caixa ao seu blog WordPress ou site. Simplesmente use os links rápidos abaixo para pular direto para o método que você deseja usar.

• Método 1. Adicionar uma Sombra de Caixa Usando Código (Mais Controle)
• Método 2. Adicionar uma Sombra de Caixa Usando um Plugin Gratuito
• Método 3. Adicionar uma Sombra de Caixa Usando um Page Builder (Fácil)
• Método 4. Adicionar uma Sombra de Caixa Usando CSS Hero (Avançado)
• Saiba Mais Maneiras de Adicionar Designs Únicos ao Seu Site WordPress

Método 1. Adicionar uma Sombra de Caixa Usando Código (Mais Controle)

Se você adicionar um efeito de sombra a todos os blocos do WordPress, isso pode deixar seu site confuso e desorganizado. Com isso em mente, você deve adicionar uma sombra de caixa apenas aos elementos mais importantes da página.

Você também deve manter as sombras de caixa consistentes em todo o seu site. A melhor maneira de fazer isso é definindo o estilo em CSS usando o WPCode.

O WPCode é o melhor plugin de snippets de código usado por mais de 1 milhão de sites WordPress. Ele facilita a adição de código personalizado no WordPress sem a necessidade de editar o arquivo functions.php.

Com o WPCode, até mesmo iniciantes podem editar o código do site sem arriscar erros e erros de digitação que podem causar muitos erros comuns do WordPress.

A primeira coisa que você precisa fazer é instalar e ativar o plugin gratuito WPCode. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, vá para Snippets de Código » Adicionar Snippet.

Aqui, você verá todos os snippets WPCode prontos que você pode adicionar ao seu site. Estes incluem um snippet que permite que você desabilite completamente os comentários, carregue tipos de arquivo que o WordPress normalmente não suporta, desabilite páginas de anexo, e muito mais.

Simplesmente passe o mouse sobre ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clique em ‘+ Adicionar Snippet Personalizado’ quando ele aparecer.

Em seguida, você precisa escolher o tipo de código na lista de opções que aparecem na tela.

Para este tutorial, você precisará adicionar CSS personalizado ao WordPress, então selecione ‘Snippet CSS’ como o tipo de código.

Agora, você será direcionado para a página Criar Snippet Personalizado.

Para começar, digite um título para o snippet de código personalizado. Pode ser qualquer coisa que ajude você a identificar o snippet no painel do WordPress.

Em seguida, na caixa ‘Code Preview’, copie e cole o seguinte trecho de código:

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}

No trecho acima, você pode precisar substituir os valores px dependendo do tipo de sombra que deseja criar.

Para ajudar, veja o que os diferentes valores px significam, da esquerda para a direita:

• Deslocamento horizontal. Ao definir um valor positivo, a sombra é empurrada para a esquerda. Se você digitar um valor negativo como -5px, a sombra será empurrada para a direita. Se você não quiser adicionar um deslocamento horizontal, pode usar 0px.
• Deslocamento vertical. Se você usar um valor positivo, a sombra será empurrada para baixo. Se você digitar um valor negativo, a sombra será empurrada para cima. Se você não quiser deslocar a sombra verticalmente, basta digitar 0px.
• Raio de desfoque. Isso desfoca a sombra para que ela não tenha bordas nítidas. Quanto maior o valor, maior o efeito de desfoque. Se preferir usar bordas nítidas, digite 0px.
• Raio de expansão. Quanto maior o valor, maior a expansão da sombra. Este valor é opcional, então pule-o se não quiser mostrar uma expansão.
• Cor. Embora o cinza seja a cor mais comum para sombras, você pode usar qualquer cor que desejar digitando um código hexadecimal. Se você não tiver certeza de qual código usar, pode explorar cores diferentes usando um recurso como HTML Color Codes.

Quando estiver satisfeito com o trecho, role até a seção ‘Insertion’. O WPCode pode adicionar seu código a diferentes locais, como após cada post, apenas no frontend ou apenas no admin.

Para usar o código CSS personalizado em todo o seu site WordPress, clique em ‘Auto Insert’ se ainda não estiver selecionado. Em seguida, abra o menu suspenso ‘Location’ e escolha ‘Site Wide Header.’

Depois disso, você estará pronto para rolar até o topo da tela e clicar no alternador 'Inativo', para que ele mude para 'Ativo'.

Finalmente, clique em 'Salvar Snippet' para tornar o snippet CSS ativo.

Agora, você pode adicionar a classe CSS personalizada a qualquer bloco.

No editor de blocos do WordPress, simplesmente selecione o bloco onde você deseja adicionar uma sombra de caixa. Em seguida, no menu do lado direito, clique para expandir a seção 'Avançado'.

Aqui, você verá campos onde pode adicionar diferentes classes.

Em 'Classes CSS Adicionais', digite shadow-effect.

Quando estiver pronto para publicar a sombra de caixa, basta clicar no botão 'Publicar' ou 'Atualizar'.

Agora, se você visitar seu site, verá a sombra de caixa ativa.

Além de adicionar uma sombra de caixa, você também pode usar o WPCode para alterar a cor do texto ou até mesmo personalizar o estilo de blockquotes do seu tema do WordPress com CSS.

Método 2. Adicionar uma Sombra de Caixa Usando um Plugin Gratuito

Se você não se sente confortável escrevendo código, talvez prefira criar sombras usando o Drop Shadow Box. Este plugin gratuito permite adicionar sombras de caixa a qualquer bloco usando o editor de páginas e posts integrado do WordPress.

Primeiro, você precisará instalar e ativar o plugin. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Não há configurações para configurar, então você pode começar a usar este plugin imediatamente.

Para adicionar uma sombra projetada, basta clicar no ícone de ‘+’ e começar a digitar ‘Caixa de Sombra Projetada’. Quando o bloco correto aparecer, clique nele para adicioná-lo à página ou postagem.

Isso adiciona a sombra projetada como uma caixa vazia, então o próximo passo é adicionar algum conteúdo.

Para fazer isso, prossiga e clique no ‘+’ dentro do bloco Caixa de Sombra Projetada.

Em seguida, basta adicionar o bloco que você deseja usar e configurá-lo normalmente.

Por exemplo, na imagem a seguir, adicionamos um bloco de Imagem e selecionamos uma foto da biblioteca de mídia do WordPress.

Com isso feito, clique para selecionar o bloco Caixa de Sombra Projetada. No menu do lado direito, você verá todas as configurações que pode usar para estilizar este bloco.

O WordPress define a largura da sombra automaticamente, mas você pode alterá-la abrindo o menu suspenso ‘Largura’ e escolhendo ‘Pixels’ ou ‘%’.

Você pode redimensioná-lo usando as configurações que aparecem.

O plugin Drop Box Shadow vem com alguns efeitos diferentes, como bordas curvas e um efeito ‘Perspectiva’ que chama a atenção.

Para visualizar os diferentes efeitos, basta abrir o menu suspenso ‘Efeito’ e escolher na lista. A visualização será atualizada automaticamente para que você possa experimentar diferentes estilos e ver qual prefere.

Você também pode alterar se o plugin exibe a sombra dentro da caixa, fora da caixa ou ambos usando as opções ‘Sombra Interna’ e ‘Sombra Externa’.

Depois disso, você pode alterar a cor da caixa e da borda usando as configurações sob o cabeçalho ‘Cores’.

Apenas esteja ciente de que ‘Fundo’ se refere ao interior da Caixa de Sombra de Gota, enquanto ‘Borda’ aparece fora do bloco.

Se você quiser criar uma caixa de sombra mais suave e curva, pode ativar a opção ‘Cantos arredondados’. Por fim, você pode alterar o alinhamento e o preenchimento, de forma semelhante a como você personaliza outros blocos no WordPress.

Para criar mais sombras de caixa, basta seguir o mesmo processo descrito acima.

Quando estiver satisfeito com a aparência da página, clique em ‘Atualizar’ ou ‘Publicar’ para tornar todas as suas novas sombras de caixa visíveis.

Método 3. Adicionar uma Sombra de Caixa Usando um Page Builder (Fácil)

Se você quiser adicionar sombras de caixa a landing pages, páginas iniciais personalizadas ou qualquer parte do seu tema WordPress, recomendamos o uso de um plugin de page builder.

SeedProd é o melhor construtor de páginas drag-and-drop para WordPress. Ele permite que você crie páginas de destino personalizadas e até mesmo crie um tema personalizado para WordPress sem precisar escrever uma única linha de código.

Ele também permite que você adicione sombras de caixa a qualquer bloco usando seu editor avançado de arrastar e soltar.

Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Após a ativação, vá para SeedProd » Landing Pages no seu painel do WordPress.

O SeedProd vem com mais de 300 modelos projetados profissionalmente que são agrupados em categorias. Na parte superior, você verá categorias que permitem criar belas páginas de em breve, ativar o modo de manutenção, criar uma página de login personalizada para o WordPress e muito mais.

Todos os modelos do SeedProd são fáceis de personalizar, então você pode usar qualquer design que desejar.

Quando encontrar um modelo que deseja usar, basta passar o mouse sobre ele e clicar no ícone de marca de seleção.

Agora você pode digitar um nome para sua página de destino no campo 'Nome da Página'. O SeedProd criará automaticamente um 'URL da Página' usando o nome da página.

É inteligente incluir palavras-chave relevantes em seu URL sempre que possível, pois isso ajuda os motores de busca a entender do que se trata a página. Isso geralmente melhorará seu SEO do WordPress.

Para alterar o URL gerado automaticamente da página, basta digitar no campo 'URL da Página'.

Quando estiver satisfeito com as informações que digitou, clique em 'Salvar e Começar a Editar a Página'. Isso carregará a interface do construtor de páginas do SeedProd.

Este simples construtor de arrastar e soltar mostra uma visualização ao vivo do design da sua página à direita. À esquerda, há um menu mostrando todos os diferentes blocos e seções que você pode adicionar à página.

Quando encontrar um bloco que deseja adicionar, basta arrastá-lo e soltá-lo em seu modelo.

Para personalizar um bloco, clique para selecioná-lo no editor do SeedProd. O menu à esquerda mostrará todas as configurações que você pode usar para personalizar o bloco.

Por exemplo, se você clicar em um bloco de Título, poderá digitar seu próprio texto ou alterar a cor do texto e o tamanho da fonte.

Enquanto você constrói a página, pode mover os blocos pelo layout arrastando e soltando-os. Para instruções mais detalhadas, consulte nosso guia sobre como criar uma landing page com WordPress.

Para criar uma sombra de caixa, clique para selecionar qualquer bloco no editor de páginas do SeedProd. As configurações no menu à esquerda podem variar entre os blocos, mas você normalmente precisará clicar em uma aba ‘Avançado’.

Aqui, procure por um menu suspenso ‘Sombra’ na seção ‘Estilos’. Simplesmente abra este menu suspenso e escolha um estilo de sombra como Fina, Média ou 2X Grande.

A prévia será atualizada automaticamente, então você pode experimentar diferentes estilos para ver qual fica melhor no design da sua página.

Se você não quiser usar nenhum dos estilos prontos, clique em ‘Personalizado’.

Isso adiciona algumas novas configurações onde você pode alterar a cor, o desfoque, a expansão e a posição da sombra personalizada.

Feito isso, você pode continuar trabalhando na página adicionando mais blocos e sombras de caixa.

Quando estiver satisfeito com a aparência da página, clique no botão ‘Salvar’ e depois escolha ‘Publicar’ para torná-la ativa.

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 quer criar sombras de caixa avançadas, então você pode experimentar o CSS Hero. Este plugin premium permite que você ajuste cada parte do seu tema WordPress sem ter que escrever uma única linha de código.

O CSS Hero permite que você crie uma sombra única para cada bloco, então também é uma ótima opção se você quiser criar muitos efeitos de sombra diferentes. Você pode aprender mais sobre o plugin em nossa revisão do CSS Hero.

Primeiro, você precisa instalar e ativar o plugin CSS Hero. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você verá um botão ‘Prosseguir para Ativação do Produto’ na parte superior da tela. Clique neste botão.

Isso o levará ao site do CSS Hero, onde você poderá fazer login em sua conta e obter uma chave de licença. Simplesmente siga as instruções na tela e você será redirecionado de volta ao seu site em alguns cliques.

Em seguida, clique no texto ‘CSS Hero’ na barra de ferramentas de administração do WordPress.

Isso abrirá o editor do CSS Hero.

Por padrão, o editor do CSS Hero tem uma pré-visualização WYSIWYG do seu site e um painel esquerdo onde você pode editar cada elemento do design do seu site.

Se você perceber que não está na página onde deseja adicionar a sombra da caixa, poderá alternar do modo ‘Editar’ para o modo ‘Navegar’.

Isso permite que você interaja com menus de navegação, links e outro conteúdo normalmente.

Agora você pode navegar até a página ou post onde deseja adicionar a sombra.

Assim que chegar a essa página, prossiga e mude novamente para o modo 'Editar'.

Com isso feito, clique no parágrafo, imagem, botão ou qualquer outro conteúdo onde você deseja adicionar uma sombra de caixa.

No painel esquerdo, clique em 'Extra'.

Agora você pode prosseguir e clicar em 'Criar Sombra'.

Isso mostrará todas as configurações que você pode usar para criar uma sombra de caixa.

Para começar, você pode alterar se a sombra aparece dentro ou fora do bloco usando as configurações de 'Posição da Sombra'.

Aqui, selecionamos 'Fora' para que a sombra apareça fora da própria imagem.

Após tomar essa decisão, você pode ajustar a orientação da sombra usando o pequeno ponto na caixa 'Orientação'.

Simplesmente arraste e solte o ponto para uma nova posição para vê-lo se mover na prévia ao vivo.

Quando estiver satisfeito com a posição da sombra, você pode alterar sua cor, desfoque e expansão.

O CSS Hero mostrará essas alterações imediatamente, para que você possa experimentar diferentes configurações para ver o que fica melhor.

Para adicionar uma sombra de caixa a outros blocos, basta seguir o mesmo processo descrito acima.

Quando estiver satisfeito com a aparência da página, clique em 'Salvar' para tornar as alterações ao vivo.

Saiba Mais Maneiras de Adicionar Designs Únicos ao Seu Site WordPress

Os métodos acima fornecem uma ótima base para adicionar sombras de caixa no WordPress. Mas e se você quiser alcançar efeitos ainda mais únicos e criativos?

Nos artigos a seguir, você encontrará guias úteis sobre como adicionar vários elementos de design ao seu site:

• Como Adicionar Efeitos de Hover em Imagens no WordPress – Este guia explora diferentes efeitos de hover que você pode criar para suas imagens, tornando seu site mais envolvente e interativo para os visitantes.
• Como Adicionar Facilmente Animações CSS no WordPress – Animações, juntamente com sombras de caixa, podem criar uma experiência de usuário dinâmica e visualmente atraente, capturando a atenção dos seus visitantes e mantendo-os engajados.
• Como Adicionar um Efeito Parallax a Qualquer Tema do WordPress – Ao incorporar efeitos parallax, você pode aprimorar a ilusão de profundidade e criar um site mais imersivo.
• Como Criar um Divisor de Forma Personalizado no WordPress – Este artigo mostra como criar formas exclusivas para separar visualmente seções do seu conteúdo.
• Como Criar Facilmente um Slider Responsivo no WordPress – Este guia ensina como criar sliders para exibir seu conteúdo de forma atraente e economizando espaço.
• Como Adicionar um Fundo Animado no WordPress – Adicionar fundos animados pode criar uma experiência de usuário única e visualmente interessante.

Esperamos que este tutorial tenha ajudado você a aprender como adicionar uma sombra de caixa no WordPress. Você também pode querer aprender como remover CSS não utilizado no WordPress e como otimizar a entrega de CSS do WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.