Deseja fazer com que os elementos do seu site se destaquem e chamem a atenção dos visitantes? A adição de uma simples sombra de caixa pode melhorar instantaneamente o design, fazendo com que imagens, botões ou seções de conteúdo se destaquem.
Neste guia, compartilharei 4 maneiras fáceis de adicionar um box shadow no WordPress para que você possa destacar o conteúdo mais importante.
Por que você deve adicionar um Box Shadow no WordPress?
Uma sombra de caixa cria uma ilusão sutil de profundidade ao imitar a sombra que um objeto projetaria, fazendo com que ele pareça ligeiramente elevado em relação ao plano de fundo. Esse efeito simples pode mudar drasticamente a forma como os visitantes percebem seu conteúdo.
Nosso cérebro é naturalmente atraído pelo contraste e pela separação, princípios enraizados na psicologia da Gestalt. A adição de um box shadow cria uma separação visual entre os elementos, direcionando instantaneamente os olhos dos visitantes para as áreas mais importantes do seu site.
Isso significa que as sombras de caixa podem realmente ajudar seu site a ter um desempenho melhor:
- Aumente as conversões: Destaque as chamadas para ação, como botões ou formulários, para incentivar cliques e conversões.
- Dê ênfase às imagens: Faça com que as imagens se destaquem do plano de fundo, chamando a atenção e aumentando seu impacto.
- Melhore a experiência do usuário: Crie um layout visualmente mais atraente e organizado, tornando a navegação em seu site mais fácil e agradável.
A seguir, você encontrará quatro maneiras fáceis de adicionar esses efeitos ao seu site WordPress.
- Método 1: Adicionar um Box Shadow no WordPress usando um construtor de páginas (mais fácil)
- Método 2: Adicionar uma sombra de caixa no WordPress com código CSS (mais controle)
- Método 3: Adicionar uma sombra de caixa usando um plug-in gratuito (alternativa rápida)
- Método 4: Adicionar um Box Shadow usando CSS Hero (avançado)
Método 1: Adicionar um Box Shadow no WordPress usando um construtor de páginas (mais fácil)
Agora que você entende o poder das sombras de caixa, vamos criar uma. Esse método é perfeito para aprendizes visuais e para qualquer pessoa que queira uma solução sem código. Usarei o SeedProd para adicionar uma sombra de caixa elegante com apenas alguns cliques.
O SeedProd é o melhor construtor de sites do WordPress, com mais de 1 milhão de usuários. Com seu construtor de páginas 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, apontando e clicando.
Para começar, instale e ative o SeedProd em seu site WordPress. Para obter mais detalhes, consulte nosso guia sobre como instalar o SeedProd.
Depois de ativar o plug-in, navegue até SeedProd " Landing Pages em seu painel do WordPress. Em seguida, clique no botão Add New Landing Page (Adicionar nova página de destino ).
Aqui, escolha um design pré-fabricado e totalmente personalizável para sua página. Os modelos do SeedProd facilitam a busca de um visual que se adapte à sua marca, e você pode ajustar cada detalhe para torná-lo seu.
Clique nos filtros na parte superior para navegar e, em seguida, passe o mouse sobre um modelo e clique no ícone de marca de seleção para selecioná-lo.
Agora, você pode inserir um nome para a 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 a otimização do mecanismo de pesquisa do WordPress.
Se não quiser manter o URL gerado, clique no campo "URL da página" e digite o seu próprio URL.
Agora você pode clicar no botão Save and Start Editing the Page (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 visualização ao vivo de seu design à direita. No lado esquerdo, há um painel com blocos que você pode arrastar para a página.
Quando você encontrar um bloco que deseja adicionar, clique, arraste e solte-o na visualização ao vivo. Em seguida, você pode selecionar o bloco para personalizar sua aparência e configurações.
Por exemplo, ao clicar no bloco Headline, você pode inserir seu próprio texto e alterar o tamanho, a cor e o alinhamento da fonte.
Você também pode mover os blocos pela página arrastando-os e soltando-os. Para obter instruções detalhadas, consulte nosso guia sobre como criar uma página de destino no WordPress.
Se quiser adicionar uma sombra de caixa a um bloco, você precisará clicar na guia Advanced (Avançado ) nas configurações desse bloco.
Neste exemplo, quero adicionar uma sombra de caixa a cada caixa de recurso. Portanto, clicarei nas configurações da coluna e selecionarei a guia Advanced (Avançado).
Em seguida, clique no menu suspenso "Shadow" (Sombra) e selecione uma opção, como Hairline (Fio de cabelo), Small (Pequeno), Medium (Médio), Large (Grande), X Large (X Grande) e assim por diante.
Ao escolher uma sombra, a visualização será atualizada automaticamente. Você pode experimentar estilos diferentes até encontrar um que funcione.
Se os estilos predefinidos não funcionarem para você, escolha a opção "Personalizado". Essa opção abre novas personalizações para alterar o desfoque, a propagação, a cor, a posição da sombra e muito mais.
No final, escolhi a opção 2X Large e repeti o processo para cada bloco da grade.
Depois de adicionar a sombra da caixa, você pode continuar a personalizar sua página adicionando mais blocos e sombras.
Quando estiver satisfeito com a aparência de tudo, clique em Save (Salvar) no canto superior direito e selecione Publish (Publicar) para tornar sua página ativa.
Aqui está um exemplo da aparência de minha página final, completa com as novas sombras de caixa:
Método 2: Adicionar uma sombra de caixa no WordPress com código CSS (mais controle)
Adicionar uma sombra de caixa a cada elemento em seu site pode fazer com que ele pareça desordenado. Em vez disso, é melhor usá-las para destacar conteúdo importante e manter a consistência do design.
A maneira mais fácil de fazer isso é definir o estilo de sombra da caixa com CSS, e usarei o WPCode para simplificar bastante.
O WPCode é um popular plugin de snippet de código que permite adicionar código personalizado ao seu site WordPress sem editar diretamente os arquivos do tema. Isso mantém as coisas organizadas e ajuda a evitar erros acidentais.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in gratuito WPCode. Para obter um passo a passo completo, consulte este guia sobre como instalar um plug-in do WordPress.
Depois de ativar o plug-in, vá para Code Snippets " +Add Snippets em seu administrador do WordPress.
Nesta página, você verá trechos de código personalizados pré-criados para adicionar ao seu site. Para adicionar seu próprio código, 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 snippet para ajudá-lo a identificá-lo. Em seguida, selecione a opção "CSS Snippet" no menu suspenso "Code Type" (Tipo de código).
Agora, adicione o seguinte trecho de código no 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 snippet para personalizar a sombra que deseja criar.
Vamos detalhar esses números para que você saiba exatamente o que está acontecendo:
- .custom-box-shadow: esse é o nome da classe CSS que estamos criando. Usaremos isso para aplicar a sombra da caixa a elementos específicos.
- Box-shadow: informa ao navegador que estamos prestes a definir uma 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 e o segundo a move para baixo. Altere esses valores para ajustar a posição da sombra.
- 10px: Esse é o raio de desfoque. Números mais altos criam uma sombra mais suave e difusa. Números mais baixos a mantêm nítida.
- rgba(0, 0, 0, 0.2): Define a cor da sombra. Estamos usando um preto semitransparente aqui. O último número (alfa) controla a transparência - 0 é totalmente transparente e 1 é totalmente opaco.
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 "Auto Insert" e defina o local como Site Wide Header.
Agora, role de volta para a parte superior da página e alterne o botão de alternância "Inactive" para a posição "Active". Em seguida, clique no botão Save Snippet .
A próxima etapa é 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 "Advanced" (Avançado) no menu à esquerda.
No campo "Classes CSS adicionais", digite "custom-box-shadow".
Em seguida, quando estiver satisfeito com a postagem, você poderá clicar em "Atualizar" ou "Publicar". Você poderá então visitar a postagem e ver seu box shadow em ação.
Método 3: Adicionar uma sombra de caixa usando um plug-in gratuito (alternativa rápida)
Se você não se sente à vontade para trabalhar com trechos de código, talvez prefira criar sombras usando Drop Shadow Boxes. Esse plug-in gratuito do WordPress permite adicionar sombras de caixa a qualquer bloco usando o editor de blocos integrado do WordPress.
Primeiro, instale e ative o plug-in em seu site. Como não há definições configuráveis, você pode usar o plug-in 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 procure por "sombra projetada".
Quando ele aparecer, clique nele para adicioná-lo à sua página. Você verá uma sombra projetada em um bloco vazio, portanto, vamos adicionar algum conteúdo.
Dentro do bloco de sombra projetada, clique no ícone de adição, 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 de 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 "Width" (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 "Effect" (Efeito) e escolha um na lista.
Outras opções que 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 os outros blocos ou clique em "Update" (Atualizar) ou "Publish" (Publicar) para tornar suas alterações efetivas.
Aqui está a aparência das minhas sombras de caixa usando esse método:
Método 4: Adicionar um Box Shadow usando CSS Hero (avançado)
Se você não se sente à vontade para trabalhar com código, mas ainda deseja criar sombras de caixa avançadas, o CSS Hero é uma ótima opção.
Esse plug-in premium permite que você ajuste 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, o que o torna ideal para experimentar diferentes efeitos de sombra em seu site.
Para começar, instale e ative o plug-in CSS Hero. Em seguida, siga as instruções de ativação do produto para vincular sua conta do CSS Hero ao seu site do WordPress.
Agora, clique na opção "Customize with CSS Hero" (Personalizar com CSS Hero) na barra de ferramentas do administrador para abrir o editor CSS Hero.
Por padrão, o editor CSS Hero mostra uma visualização ao vivo do seu site e um painel no qual você pode editar cada elemento do design da Web.
Se você não estiver na página em que deseja adicionar a sombra da caixa, use os ícones na parte superior da tela para alternar do modo "Selecionar" para "Navegar".
Agora, você pode ir para a página desejada e voltar para o modo Select.
Em seguida, clique em qualquer elemento na visualização em que você deseja adicionar um sombreamento de caixa, como uma imagem, um botão, um parágrafo ou outro conteúdo.
Depois de fazer isso, clique em "Extra" no painel esquerdo.
Por padrão, a opção de sombra da caixa mostra "Nenhum", portanto, 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. Basta arrastar 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 a propagação da sombra.
Use a mesma abordagem para adicionar um box shadow a outras áreas do seu site. Em seguida, quando estiver satisfeito com a aparência de tudo, clique no botão Save & Publish (Salvar e publicar ).
Agora, acesse suas alterações para ver como elas ficam ao vivo em seu site.
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 quiser adicionar efeitos mais criativos, os guias a seguir serão úteis:
- Como alterar as margens no WordPress - Personalize o espaçamento em torno do seu conteúdo para obter uma aparência polida e profissional.
- Como adicionar texto a uma imagem no WordPress - Crie gráficos impressionantes e chamadas para ação diretamente em suas imagens.
- Como criar fundos animados do Particle.js no WordPress - Adicione um toque de dinamismo com fundos animados atraentes.
- 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 - Chame a atenção de seus visitantes com efeitos de texto animado atraentes.
- Como criar divisores de seção sofisticados para WordPress - Separe visualmente seu conteúdo com divisores de forma elegantes.
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 a usar o SeedProd e crie páginas de destino e sites impressionantes e de alta conversão sem codificação.
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
