Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como adicionar estilos personalizados aos widgets do WordPress (2 maneiras)

A personalização dos widgets é uma maneira eficiente de aprimorar a aparência do site, manter a consistência da marca e chamar a atenção para informações importantes.

No entanto, muitos usuários do WordPress consideram a estilização de widgets um desafio, especialmente se não se sentirem à vontade com CSS. Mas não se preocupe, pois estamos aqui para ajudar.

Neste artigo, mostraremos dois métodos fáceis para adicionar estilos personalizados aos widgets do WordPress sem danificar seu website. Se você se sente confortável com um pouco de CSS ou prefere uma solução sem código, nós o ajudamos.

Adding custom styles to WordPress widgets

Mostraremos a você duas maneiras de adicionar estilos personalizados aos widgets do WordPress. Você pode usar esses links rápidos para ir para a que funciona melhor para você:

Observação: Este artigo é destinado a usuários de temas clássicos. Se você usar um tema de bloco, não verá as páginas Widgets ou Theme Customizer em seu administrador. Você terá de usar blocos e o editor de site completo para personalizar seu tema.

Para obter mais informações, consulte nosso guia para iniciantes sobre edição completa de sites no WordPress.

Método 1: Adicionar estilos personalizados aos widgets do WordPress com o Block Editor (básico)

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

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

The default WordPress widget styling options

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

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

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

Adding custom CSS class to widgets in Block Editor

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.

Add CSS rules

Outra maneira de adicionar CSS personalizado é com o WPCode. Recomendamos usá-lo se você já tiver muitos códigos CSS personalizados em seu tema e quiser diferenciar e rastrear facilmente todos os snippets.

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

Em seguida, vá para Code Snippets “ + Add Snippet e selecione ‘Add Your Custom Code (New Snippet)’. Em seguida, clique no botão “+ Add Custom Snippet”.

Adding a new custom code snippet in WPCode

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 “CSS Snippet”.

Custom CSS to style WordPress widgets

Em seguida, adicione seu CSS personalizado no campo.

Aqui estão alguns CSS básicos que usamos:

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

Depois disso, role a tela para baixo até a seção Inserção. Certifique-se de que o método de inserção esteja definido como “Auto Insert” e o local seja “Site Wide Header”.

Depois disso, alterne o botão no canto superior direito até que ele diga “Active” (Ativo) e clique em “Save Snippet” (Salvar snippet).

Choosing Site Wide Header as the code location in WPCode

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

Veja como é o nosso:

Block widget with custom style preview

Método 2: Aplicação de estilos personalizados a widgets do WordPress com CSS Hero (mais personalizável)

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

Você pode saber mais sobre o plug-in em nossa análise do CSS Hero.

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.

Opening CSS Hero in WordPress

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.

CSS Hero interface

Basta passar o mouse sobre o widget que deseja estilizar. Em seguida, clique para selecioná-lo.

Neste exemplo, selecionamos nosso widget Search.

Clicking on a search widget in CSS Hero

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.

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

Changing a search widget's typography in CSS Hero

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 parecem mais curvos e elegantes.

Changing a search widget's border radius in CSS Hero

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

Em seguida, vá em frente e visualize seu site para ver as alterações em ação.

Clicking the Save button in CSS Hero

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 melhores construtores de páginas de arrastar e soltar para WordPress e nossa comparação de prós e contras entre temas gratuitos e premium para WordPress.

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.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

20 ComentáriosDeixe uma resposta

  1. Ankush

    The Plugin was really Great but I had a problem…

    It doesn’t work when i add custom css….

    May be plugin css is overriding my code but.. that really sad…

    Hey Wpbeginner.com Team.. Please leave me a reply,]

    I You can tell me how to fix it…

  2. Rachael

    I love this plugin but every time I activate it, I have trouble with the gallery widget. It works fine with the plugin deactivated, but if I turn on the plugin, the gallery widget won’t save any images. All of the other widgets work fine. Does anyone else have this issue?

  3. Regina

    Does how to instructional above also also include the ability to customize the font of the widget titles?
    Thanks!

  4. terry

    Finally, after failing at trying to decode the jargon I get on inspect, this article told me exactly what I needed.

    Thanks

  5. Alex

    I don’t have any classes on widgets.

  6. irfan

    There is extra white space while creating extra widget area for header. Kindly tell us , how to remove this

  7. Thomas

    Hi, I tried to do it manually, inspected the element and its class but it did not work.

    I am trying to change the style of a WPform.

    Could you help me?

  8. daniel

    i have added a widget area to my header using the functions.php and header.php files. i can see the widget ive added on my site but i want to put it next to the menu, any idea how to do this please? i want it to sit to the right hand side of the menu.

  9. Deniz Kumru

    It’s my first wordpress theme.I was nervous till found your article.It’s done thank you :)

  10. ivan

    Why does my layout under widget styles only shows the padding option, without the bottom margin, gutter & row layout option.

  11. Rimi

    hallo
    I can not make any changes because it is inactive
    Being processed plugin / css / plugin-front.css (inactive),How can I activate pleas

  12. Grace

    Hello, my theme doesn’t have a right sidebar, it came with just a footer widget area, can I use the custom css to add a right sidebar? Please help me, thanks

    • WPBeginner Support

      No, you will first need to define a widget ready area. Your theme may already have an option to use a sidebar layout. If it doesn’t, then we would recommend you to ask the theme author for support. On the other hand, if you feel confident in your coding skills, then go a head.

      Administrador

  13. Mr.T

    I want to change them manually. Am I right that by using widget-number class you actually can’t move them up or down in the widgets area, because their id will change, or it works differently?

  14. Correen K

    I was looking for something like this to add some style to my sidebar and stumbled upon the Flexible Posts Widget plugin. I think it’s always nice to have options ;)

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.