Como adicionar estilos personalizados aos widgets do WordPress

Deseja adicionar estilos personalizados aos widgets do WordPress?

O estilo dos widgets permite manter a consistência da marca e destacar informações importantes para os usuários.

Neste artigo, mostraremos como adicionar facilmente estilos personalizados aos widgets do WordPress sem danificar seu site.

Mostraremos a você três maneiras de adicionar estilos personalizados aos widgets do WordPress. Você pode escolher a que funciona melhor para você.

• Adição de estilos personalizados a widgets do WordPress usando o Block Editor
• Adição de estilos personalizados a widgets clássicos no WordPress
• Como adicionar estilos personalizados a widgets do WordPress usando o CSS Hero (sem código)

Antes de começarmos, este artigo requer algum conhecimento de CSS para que você possa estilizar os widgets. Você também precisará adicionar CSS personalizado ao seu tema do WordPress.

Se preferir um método sem código em vez de CSS, você pode pular para o método 3.

Vamos começar.

Adição de estilos personalizados aos widgets do WordPress usando o Block Editor

Os widgets do WordPress agora usam o editor de blocos para adicionar widgets e blocos a áreas e barras laterais prontas para widgets.

Uma das vantagens de usar o editor de blocos para widgets é que você pode adicionar facilmente classes CSS personalizadas a cada bloco.

Basta acessar a página Appearance ” Widgets e clicar no widget ao qual você deseja adicionar estilos personalizados.

Em seguida, você precisa rolar para baixo até a guia Advanced (Avançado) no painel Block (Bloco). A partir daqui, você pode adicionar uma classe CSS personalizada.

Não se esqueça de salvar suas alterações clicando no botão Update (Atualizar).

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

Basta acessar a página Appearance ” Personalizar e alternar para a guia CSS adicional. Lá, você verá uma visualização ao vivo do seu site com uma caixa para adicionar suas regras de CSS.

Aqui estão algumas CSS básicas que usamos.

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

Depois de adicionar seu CSS personalizado, você pode visualizar seu site para vê-lo em ação.

O problema com o uso dos widgets do editor de blocos é encontrar o bloco certo para o alvo.

Uma solução mais fácil seria adicionar blocos em um bloco Group para estilizá-los juntos com facilidade. Você pode ler mais sobre o agrupamento de blocos em nosso guia sobre como usar o editor de blocos do WordPress.

Adição de estilos personalizados a widgets clássicos no WordPress

Esse método é para você se usar os widgets clássicos mais antigos em seu site do WordPress.

Para esse método, você precisa instalar e ativar o plug-in Widget Options. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

O Widget Options é um plug-in avançado que adiciona opções extras aos seus widgets do WordPress. Isso inclui a capacidade de mostrar e ocultar widgets com base no dispositivo do usuário, na função e em outras condições.

O plug-in também adiciona uma opção para adicionar classes CSS personalizadas aos widgets do WordPress.

Basta acessar a página Appearance ” Widgets e clicar no widget ao qual você deseja adicionar o estilo personalizado.

Nas configurações do Widget, você verá uma ampla gama de opções. A partir daí, você precisa clicar no ícone de engrenagem para adicionar sua classe CSS personalizada.

Quando terminar, não se esqueça de clicar no botão Save (Salvar) para armazenar as configurações do widget.

Agora você pode adicionar regras CSS personalizadas ao seu tema usando a classe CSS que acabou de inserir. Por exemplo, usamos o seguinte CSS em nosso site de teste.

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

Esta é a aparência em nosso site de teste.

Aplicação de estilos personalizados a widgets do WordPress com o CSS Hero

Um problema com os dois métodos 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. Ele é um plugin de estilo personalizado do WordPress que permite adicionar CSS personalizado ao seu tema do WordPress sem escrever nenhum código.

Primeiro, você precisa instalar e ativar o plug-in CSS Hero. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, o plug-in adicionará um novo item de menu à barra de ferramentas de administração do WordPress, na parte superior.

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

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

É um editor em tempo real no qual você pode simplesmente apontar e clicar em qualquer item do seu site e alterar seu estilo.

Basta passar o mouse sobre o widget que deseja estilizar e clicar para selecioná-lo.

Depois disso, você pode usar o menu à esquerda para estilizar o widget da maneira que desejar.

Isso inclui opções avançadas de estilo, como gradientes, tipografia, preenchimento, margens e bordas.

Quando terminar, não se esqueça de usar o botão Save (Salvar) para armazenar suas configurações.

Agora você pode visualizar seu site para ver as alterações em ação.

Esperamos que este artigo tenha ajudado você a aprender como adicionar estilos personalizados aos widgets do WordPress. Talvez você também queira ver nossa seleção dos widgets mais úteis do WordPress para todos os sites ou ver nosso guia sobre como criar um tema personalizado do WordPress do zero sem escrever código.

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