Deseja mudar a cor de fundo em seu site WordPress? Há várias maneiras de fazer isso. Aqui está tudo o que você precisa saber sobre como adicionar ou mudar as cores de fundo no WordPress.
O que você vai aprender neste tutorial:
- como mudar a cor de fundo no WordPress usando temas de edição de site completo
- como mudar a cor de fundo do site WordPress usando temas clássicos do WordPress
- como mudar a cor de fundo no WordPress usando CSS (funciona com qualquer tema)
- como mudar somente a cor de fundo da página inicial no WordPress
- como mudar a cor de fundo somente em páginas ou posts específicos do WordPress (funciona com qualquer tema)
- como definir cores gradientes no WordPress usando CSS
Vamos começar com a definição da cor de fundo nos temas de Edição de Site Completo (FSE).
Como mudar a cor de fundo nos temas de Edição de Site Completo do WordPress
Os mais recentes temas padrão do WordPress como Twenty Twenty-Three são temas de edição completa do site. Quase todos os elementos do tema podem ser configurados usando o Editor de temas incorporado. Ele permite que você mude a cor de fundo do site também.
Primeiro clique em Appearance >> Editor no menu de administração.
Quando o Editor de Site Completo abrir, olhe no canto superior direito da página – você encontrará o ícone Estilos. Clique nele.
Clique em Cores no menu Estilos.
Agora clique em Background.
Quando estiver na seção Background, você encontrará poucas opções. Você pode selecionar Cor sólida, ou Gradiente.
Se você quiser usar cor sólida, você pode selecionar qualquer cor de cores predefinidas abaixo, ou clicar em código de cor (FFFFFF no exemplo) para selecionar qualquer cor que você quiser.
O WordPress literalmente permite selecionar qualquer cor que você desejar para o fundo usando o seletor de cores incorporado. Selecione qualquer cor desejada, e você verá como fica ao vivo – não há necessidade de salvar e atualizar a página toda vez.
Se você quiser usar fundo gradiente no WordPress, ele lhe permite selecionar fundo entre poucos fundos predefinidos. Ou novamente, você pode construir qualquer cor de fundo com gradiente que desejar usando o seletor de cores incorporado.
Basta não esquecer de clicar no botão Salvar para salvar as mudanças se você quiser que o fundo seja aplicado ao seu site.
Como mudar a cor de fundo nos temas clássicos do WordPress
Muitos temas do WordPress têm configurações no Customizer de temas para definir a cor de fundo.
Se seu tema WordPress tem este recurso, você o encontrará Appearance >> Ferramenta Personalizar. Você também pode acessar a mesma ferramenta enquanto estiver visualizando seu site como visitante – basta clicar em Personalizar link no topo da página.
Aqui está um exemplo do tema Twenty Twenty-One. Clique na aba Cores & Modo Escuro.
Você pode selecionar a partir de cores predefinidas na parte inferior da aba, ou selecionar qualquer cor que você queira a partir do seletor de cores.
Todas as mudanças de cor que você fizer serão visíveis imediatamente. Apenas não se esqueça de salvar as mudanças para atualizar a cor de fundo em seu site WordPress.
Como mudar a cor de fundo usando o código CSS
Alguns temas do WordPress podem não ter ferramentas para mudar a cor de fundo. E isso não é grande coisa na verdade – não é tão difícil mudar a cor de fundo usando o código CSS. Funciona com QUALQUER tema do WordPress.
Para adicionar código CSS ao WordPress você precisa abrir o Customizer usando o link Customize Appearance >> Customize, ou a partir do menu superior enquanto navega no site como um visitante.
No lado esquerdo, você verá o menu Customizer. Abra a aba CSS adicional.
Uma vez aberta a aba, digite este código na caixa CSS Adicional:
body {
background-color: pink;
}O resultado aparecerá imediatamente enquanto você estiver inserindo o código.
Talvez você queira escolher cores mais específicas para seu fundo em vez de nomes de cores principais. Isso também é fácil de fazer – você pode substituir o nome da cor pelo seu código HEX.
HEX é um código de 6 símbolos (com # na frente) que pode representar qualquer cor que você desejar. Por exemplo, #FF0000 significa vermelho, #FFFFFFFFFF é branco, #000000 é preto, e assim por diante. Você pode obter o código HEX para qualquer cor que quiser usando os coletores de cores on-line (como https://htmlcolorcodes.com/ ).
Então, como você define a cor de fundo usando o código HEX? Facilmente. Aqui está o exemplo da imagem acima que deve ser inserida na aba Additional CSS:
body {
background-color: #d1e4dd;
}Como mudar a cor de fundo da página inicial no WordPress
Mudar apenas a cor de fundo da página inicial no WordPress não é nada complicado. Todos os temas WordPress devidamente construídos usam classes corporais. Toda página inicial tem uma classe chamada home.
Portanto, tudo que você precisa fazer para mudar apenas a cor de fundo da página inicial está neste exemplo:
body.home {
background-color: #d1e4dd;
}Não se esqueça de mudar o código de cor (d1e4dd) com a cor HEX que você deseja.
Como mudar a cor de fundo somente para um post ou página específica no WordPress
Para mudar apenas uma página específica ou postar cor de fundo no WordPress, você precisa conhecer alguns truques fáceis.
Primeiro – você precisa saber a identificação daquela página ou postagem específica do WordPress. Para descobrir a página chich tem qual ID você precisa ir para Páginas >> Todas as Páginas no painel de administração do WordPress. Tente editar qualquer página que você quiser, e veja o link da página na URL do navegador. A parte que mostra ?post=[NÚMERO] diz o ID da página. No exemplo, você vê que o ID da página é 2.
A mesma regra se aplica se você quiser saber o ID da página post. Você só precisa abrir qualquer post(Posts >> Todos os posts), e procurar o ID do post no URL.
Para definir o fundo somente para página específica, você precisará inserir este código na guia CSS adicional (classe: page-id-[PAGE ID que você descobriu na URL]):
body.page-id-2 {
background-color: #d1e4dd;
}A definição de fundo para uma página específica tem uma pequena diferença no código (classe: postid-[POST ID] ):
body.postid-2 {
background-color: #d1e4dd;
}É isso – agora você sabe como adicionar cor de fundo personalizada apenas a posts ou páginas específicas no WordPress.
Como definir cor de fundo com gradiente nos temas clássicos do WordPress
Definir cores de fundo gradientes em temas WordPress clássicos é tão fácil quanto definir uma cor sólida. Você só precisa da ajuda de geradores de gradiente CSS online. Por exemplo – este https://cssgradient.io/:
Você pode mudar as cores como quiser, e a ferramenta irá gerar um código de gradiente de fundo personalizado. Tudo o que você precisa fazer é inseri-lo no WordPress da mesma maneira que você inseriu cores sólidas – usando Personalizar >> CSS adicional:
body {
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}É isso – seu fundo com gradiente de fundo WordPress está pronto!
Autor da imagem postada – David Pisnoy.
