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.
Observação: Se não conseguir ver o Customize no menu Appearance, dê uma olhada em nosso artigo sobre como corrigir a falta do personalizador de temas no administrador do WordPress ou use o plug-in WPCode para adicionar seu CSS personalizado.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ankush says
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…
Rachael says
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?
Regina says
Does how to instructional above also also include the ability to customize the font of the widget titles?
Thanks!
terry says
Finally, after failing at trying to decode the jargon I get on inspect, this article told me exactly what I needed.
Thanks
Alex says
I don’t have any classes on widgets.
irfan says
There is extra white space while creating extra widget area for header. Kindly tell us , how to remove this
Thomas says
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?
WPBeginner Support says
Hey Thomas,
Please take a look at this guide on how to add custom css to WPForms.
Administrador
daniel says
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.
WPBeginner Support says
Hey Daniel,
You’ll need to use place the widget code before your menu and then add custom CSS to position it.
Administrador
Deniz Kumru says
It’s my first wordpress theme.I was nervous till found your article.It’s done thank you
ivan says
Why does my layout under widget styles only shows the padding option, without the bottom margin, gutter & row layout option.
Rimi says
hallo
I can not make any changes because it is inactive
Being processed plugin / css / plugin-front.css (inactive),How can I activate pleas
Grace says
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 says
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
Mr.T says
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?
Erick says
I have the same question
Correen K says
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
Abhishek Prakash says
Will using these many CSS not impact the page speed?
WPBeginner Staff says
Not if you do it right.