Home » WordPress » Como mudar a cor de fundo no WordPress

Como mudar a cor de fundo no WordPress

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:

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.

how to edit wordpress website colors

Quando o Editor de Site Completo abrir, olhe no canto superior direito da página – você encontrará o ícone Estilos. Clique nele.

how to change wordpress webste colors in full site editor

Clique em Cores no menu Estilos.

how to change colors in wordpress

Agora clique em Background.

how to change background in full site editor

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.

background color change in wordpress

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.

how to change background color in wordpress full site editor

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.

how to set gradient color in wordpress full site editor

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.

wordpress where to change background color

Aqui está um exemplo do tema Twenty Twenty-One. Clique na aba Cores & Modo Escuro.

how to change background color in classic wordpress themes

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.

how to change colors in wordpress

Best WordPress hosting 2024

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.

wordpress add css background color

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.

wordpress how to change background color

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.

where to find post or page id in wordpress

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/:

wordpress how to setup gradient color background

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.

Fathom analytics