Como Adicionar Estilos Personalizados a Widgets do WordPress (2 Maneiras)

Construir sites WordPress nos ensinou que pequenos detalhes fazem grandes diferenças. A estilização personalizada de widgets pode transformar sites bons em ótimos.

Na WPBeginner, fazemos cada elemento funcionar em conjunto. Pegue nossos widgets de barra lateral, por exemplo.

Personalizamos sua aparência para destacar recursos importantes e fazê-los se integrar perfeitamente ao design do nosso site. Isso nos ajuda a construir confiança com milhões de visitantes.

Neste guia, compartilharemos os métodos mais fáceis para personalizar estilos de widgets WordPress. Você aprenderá técnicas para fazer seus widgets parecerem profissionais e se integrarem perfeitamente ao seu tema.

Por que adicionar estilos personalizados a widgets WordPress?

Por padrão, widgets WordPress usam a estilização do seu tema, que pode nem sempre corresponder aos seus objetivos de design. Adicionar estilos personalizados lhe dá mais controle sobre a aparência dos seus widgets.

Veja por que vale a pena personalizar:

• 🎨 Combine com sua Marca: Estilos personalizados permitem que você alinhe cores, fontes e espaçamento dos widgets com a marca do seu site para um visual mais coeso.
• 👓 Melhore a Legibilidade: Às vezes, o layout padrão do widget não é fácil de ler. A estilização pode ajudar a melhorar tamanhos de fonte, contraste ou alinhamento para uma melhor experiência do usuário.
• 🌟 Destaque Conteúdo Importante: Quer que seus posts recentes, chamadas para ação ou informações de contato se destaquem? CSS personalizado pode tornar esses widgets mais atraentes.
• 🧹 Limpe Designs Confusos: Se um widget parecer muito cheio ou fora do lugar, estilos personalizados ajudam a otimizar sua aparência e integrá-lo de forma mais suave ao seu layout.
• 🧩 Crie Layouts Únicos: Estilos personalizados abrem possibilidades de layout, como transformar um widget de texto básico em uma caixa de promoção estilizada ou alinhar vários widgets em uma grade.

Em resumo, estilizar seus widgets ajuda você a ir além do visual padrão e criar um site mais polido e profissional.

Dito isso, vamos dar uma olhada em como adicionar facilmente estilos personalizados aos seus widgets do WordPress.

Mostraremos 2 maneiras de personalizar seus widgets do WordPress com estilos personalizados. Você pode usar estes links rápidos para pular para o que funciona melhor para você:

Método 1: Estilize Widgets do WordPress com Código CSS

Os widgets do WordPress agora usam o editor de blocos para adicionar um novo widget e bloco às áreas de widgets e barras laterais. Isso significa que você verá algumas opções de estilo de bloco para alguns dos blocos padrão do WordPress.

Por exemplo, se você for para a página Aparência » Widgets e clicar em um bloco padrão do WordPress, verá opções para alterar as cores e a tipografia do bloco.

No entanto, nem todos os blocos vêm com essas opções de widget, especialmente se esses blocos não forem os padrão do WordPress. Felizmente, uma das vantagens de usar o editor de blocos para widgets é que você pode facilmente adicionar classes CSS personalizadas a cada bloco.

Tudo o que você precisa fazer é simplesmente clicar no widget onde deseja adicionar estilos personalizados.

Em seguida, você precisa rolar para baixo até a aba 'Avançado' no painel de Blocos. A partir daqui, você pode adicionar uma classe CSS personalizada.

Não se esqueça de salvar as configurações do seu widget clicando no botão 'Atualizar'.

Agora, você pode adicionar CSS personalizado ao seu tema do WordPress direcionando essa classe CSS específica.

Simplesmente vá para a página Aparência » Personalizar e mude para a aba CSS Adicional. Lá, você verá uma prévia ao vivo do seu site com uma caixa para adicionar suas regras de CSS.

Outro método eficaz para adicionar CSS personalizado é usando o WPCode.

Nós o testamos extensivamente e descobrimos que é uma das maneiras mais seguras de integrar código personalizado ao seu tema. Se você gerencia vários snippets de CSS, o WPCode facilita a organização e o rastreamento deles.

Para mais detalhes sobre seus recursos e benefícios, sinta-se à vontade para conferir nossa análise do WPCode.

Primeiro, certifique-se de instalar o plugin WPCode. Para instruções passo a passo, você pode ler nosso guia sobre como instalar um plugin do WordPress.

Em seguida, vá para Snippets de Código » + Adicionar Snippet e selecione ‘Adicionar Seu Código Personalizado (Novo Snippet)’. Em seguida, clique no botão ‘+ Adicionar Snippet Personalizado’.

Agora, dê um nome ao seu novo CSS personalizado. Pode ser algo simples como ‘Estilo de Widget Personalizado’.

Em seguida, altere o Tipo de Código para ‘Snippet CSS’.

Em seguida, adicione seu CSS personalizado no campo.

Aqui está um CSS básico que usamos:

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

Quando terminar, basta rolar para baixo até a seção Inserção. Certifique-se de que o Método de Inserção esteja definido como ‘Inserir Automaticamente’ e a Localização como ‘Cabeçalho do Site Inteiro’.

Depois disso, alterne o botão no canto superior direito até que diga ‘Ativo’ e clique em ‘Salvar Snippet’.

Após adicionar seu CSS personalizado, você pode visualizar seu site WordPress no celular ou desktop para vê-lo em ação.

Veja como o nosso fica em nosso site de demonstração WordPress:

Método 2: Estilize Widgets do WordPress com CSS Hero (Sem Código)

Um problema com o método acima é que você precisa escrever código CSS. No entanto, nem todos os usuários conhecem CSS ou simplesmente não querem escrever código por conta própria.

Nesse caso, você pode usar o CSS Hero. É um plugin de estilo personalizado para WordPress que permite adicionar CSS personalizado ao seu tema WordPress sem escrever nenhum código.

Você pode aprender mais sobre o plugin em nossa análise 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 WordPress.

Após a ativação, o plugin adicionará um novo item de menu à sua barra de administração do WordPress no topo.

Em seguida, você precisa visitar a página onde pode ver o widget que deseja estilizar e clicar no botão CSS Hero no topo.

Isso abrirá a página na interface do editor CSS Hero.

É um editor ao vivo onde você pode simplesmente apontar e clicar em qualquer item do seu site e alterar seu estilo.

Simplesmente passe o mouse sobre o widget que você deseja estilizar. Em seguida, clique para selecioná-lo.

Neste exemplo, selecionamos nosso widget de Pesquisa.

Depois disso, você pode usar o menu à esquerda para estilizar seu widget da maneira que desejar. Isso inclui opções de estilo avançadas como gradientes, tipografia, preenchimento, margens e bordas.

No exemplo abaixo, alteramos o tamanho da fonte do widget de Pesquisa do WordPress para que ele se destaque ainda mais.

Você também pode alterar elementos específicos do widget, se necessário.

Por exemplo, decidimos alterar o raio da borda do botão e dos campos de pesquisa. Dessa forma, eles ficam mais curvos e estilosos.

Quando terminar, não se esqueça de clicar no botão ‘Salvar’ para armazenar suas configurações.

Em seguida, vá em frente e visualize seu site para ver seu novo design do WordPress em ação.

Esperamos que este artigo tenha ajudado você a aprender como adicionar estilos personalizados a widgets do WordPress. Você também pode querer ver nossa seleção dos melhores construtores de página drag-and-drop para WordPress e nossa comparação de prós e contras entre temas gratuitos vs premium para 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.