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

Como os widgets do WordPress agora usam o editor de blocos, você tem algumas maneiras diferentes de alterar sua aparência, dependendo do nível de controle que você precisa.

Vamos percorrer as opções integradas primeiro e, em seguida, mostraremos como adicionar estilos totalmente personalizados:

1. Usando Configurações Padrão de Blocos

Antes de adicionar código personalizado, vale a pena verificar se o bloco já possui as configurações que você precisa.

Se você for para a página Aparência » Widgets e clicar em um bloco específico, muitas vezes verá opções no painel de configurações do bloco para alterar cores e tipografia.

2. Adicionando uma Classe CSS Personalizada

Se as configurações padrão não forem suficientes, você pode adicionar uma "classe" específica ao widget. Isso funciona como uma etiqueta de nome que permite que você direcione apenas esse widget com seu código personalizado.

Basta clicar no widget onde você deseja adicionar estilos personalizados. Em seguida, role para baixo até a aba ‘Avançado’ no painel de Bloco. A partir daqui, você pode adicionar uma classe de CSS personalizado.

Para este tutorial, digite latest-articles no campo. Certifique-se de não adicionar um ponto (.) no início do nome da classe.

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

3. Aplicando Seus Estilos Personalizados

Agora que você deu um nome de classe ao seu widget, precisa adicionar o código que diz ao WordPress como estilizar. Existem duas maneiras de fazer isso:

Opção 1: Usando o Personalizador do Tema

Esta é a maneira mais rápida de adicionar código se você quiser apenas testá-lo.

Basta ir para a página Aparência » Personalizar e mudar 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.

Opção 2: Usando o WPCode (Recomendado)

Recomendamos o uso do WPCode porque ele salva seus estilos personalizados mesmo que você mude de tema mais tarde. É também a maneira mais segura de adicionar snippets de código ao WordPress.

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 ao 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)

Escrever código CSS manualmente pode ser complicado para iniciantes. Um pequeno erro pode quebrar o layout do seu site, e aprender a sintaxe leva tempo.

Se você não quiser lidar com código, pode usar o CSS Hero. É um plugin de estilização visual que permite personalizar seus widgets com uma interface simples de apontar e clicar.

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.

Perguntas Frequentes Sobre Opções de Estilização no WordPress

Aqui estão algumas perguntas que nossos leitores fizeram com frequência sobre como estilizar diferentes elementos no WordPress:

Como adiciono widgets personalizados no WordPress?

Para adicionar um widget personalizado, vá para Aparência » Widgets no seu painel e clique no botão de adicionar bloco com o sinal de mais (+). Você pode então selecionar qualquer bloco disponível, como texto, imagens ou posts recentes, e colocá-lo na sua barra lateral ou área de rodapé.

Como adicionar estilos no WordPress?

A maneira mais segura de adicionar estilos é usando a aba CSS Adicional no Personalizador de Temas ou um plugin como o WPCode. Esses métodos permitem adicionar código CSS personalizado sem modificar os arquivos principais do seu tema, garantindo que suas alterações não sejam perdidas durante as atualizações.

Você pode personalizar um widget?

Sim, você pode personalizar quase todos os aspectos de um widget. Widgets modernos do WordPress têm configurações integradas para cores de fundo e tipografia. Para um controle mais avançado, você pode atribuir uma classe CSS específica ao widget e estilizá-lo manualmente com código.

Como criar um widget de menu personalizado no WordPress?

Você pode adicionar um menu personalizado usando o bloco Menu de Navegação na sua área de widgets. Primeiro, crie seu menu específico em Aparência » Menus, depois simplesmente selecione esse menu nas opções suspensas dentro das configurações do bloco Menu de Navegação.

Como criar um widget personalizado?

Se você precisar de funcionalidades específicas que não são encontradas nos blocos padrão, você pode criar um widget personalizado escrevendo um plugin ou usando uma ferramenta como o WPCode. No entanto, se você simplesmente deseja um *design* personalizado, geralmente pode conseguir isso agrupando blocos existentes e aplicando estilos CSS personalizados.

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.