Como Alterar a Cor de Fundo no WordPress (Guia para Iniciantes)

A cor de fundo do seu site define todo o clima para seus visitantes.

Talvez você queira algo limpo e profissional, acolhedor e convidativo, ou ousado e criativo – qualquer que seja a vibe que você busca, a cor de fundo certa pode fazer toda a diferença.

A boa notícia é que alterá-la não requer nenhuma habilidade técnica ou ferramentas caras. O WordPress possui recursos integrados que permitem personalizar cores com apenas alguns cliques.

Depois de ajudar muitos proprietários de sites a personalizar seus sites, descobrimos que a maioria das pessoas se surpreende com a simplicidade e a imediatidade do processo.

Vamos guiá-lo por três maneiras fáceis de atualizar a cor de fundo no WordPress, começando pela opção mais amigável para iniciantes e avançando para técnicas um pouco mais avançadas.

Por Que a Cor de Fundo do Seu WordPress Realmente Importa 🎨

Pense na cor de fundo do seu site como as paredes da sua casa digital. Embora o seu tema WordPress venha com uma cor padrão, escolher o fundo certo pode fazer uma grande diferença em quão acolhedor seu site parece para os visitantes.

Eis por que este elemento de design do WordPress é tão importante:

• Eles tornam seu conteúdo mais fácil de ler
• Eles ajudam informações importantes a se destacarem
• Eles definem o clima do seu site
• Eles podem fazer seu site parecer mais profissional

A cor de fundo certa pode ajudar a destacar seus botões importantes e aumentar suas conversões. Você também pode usar cores diferentes para organizar melhor seu conteúdo, como usar cores específicas para diferentes categorias de blog ou anúncios especiais.

E se você quiser tornar seu site ainda mais envolvente, pode até adicionar fundos de vídeo para capturar a atenção dos seus visitantes.

Dito isso, vamos dar uma olhada em como alterar a cor de fundo no WordPress. Mostraremos diferentes maneiras de personalizar a cor de fundo para que você possa pular para a seção de sua preferência:

• Como Alterar a Cor de Fundo no Personalizador de Temas do WordPress
• Como Alterar a Cor de Fundo no Editor de Site Completo (Método de 2024)
• Como Alterar a Cor de Fundo no WordPress com CSS
• Como Alterar Cores de Fundo Aleatoriamente no WordPress
• Como Alterar a Cor de Fundo para Posts Individuais
• Bonus Tip: Use a Page Builder for More Design Control
• Perguntas Frequentes: Alterando Cores de Fundo no WordPress

Como Alterar a Cor de Fundo no Personalizador de Temas do WordPress

Dependendo do seu tema, você pode ser capaz de alterar a cor de fundo usando o Personalizador de Temas do WordPress. Ele permite que você edite a aparência do seu site em tempo real e sem a necessidade de editar código.

Para acessar o Personalizador de Temas do WordPress, você pode fazer login no seu site e, em seguida, ir para Aparência » Personalizar.

Isso abrirá o Personalizador de Temas, onde você encontrará várias opções para modificar seu tema. Isso inclui menus, cores, página inicial, widgets, imagem de fundo e mais.

As opções específicas disponíveis dependerão de qual tema do WordPress seu site está usando. Para este tutorial, estamos usando o tema padrão Twenty Twenty-One.

Para alterar a cor de fundo do seu site, clique na aba de configurações 'Cores e Modo Escuro' no menu à sua esquerda.

Em seguida, você precisará clicar na opção 'Cor de Fundo' e escolher uma cor para o seu site.

Você pode usar a ferramenta de seleção de cores ou inserir um código de cor Hex para o seu fundo.

Quando terminar as alterações, não se esqueça de clicar no botão ‘Publicar’.

Agora você pode visitar seu site WordPress para ver a nova cor de fundo em ação.

Seu tema pode não ter essa opção disponível no Personalizador de Temas. Nesse caso, você pode tentar um dos métodos abaixo.

Como Alterar a Cor de Fundo no Editor de Site Completo (Método de 2024)

O editor de site completo (FSE) é uma plataforma de edição do WordPress para editar temas de blocos. Este editor torna super fácil alterar a cor de fundo do seu site. Vamos percorrer o processo juntos.

Comece indo para Aparência » Editor no seu painel do WordPress.

Agora, você verá um botão ‘Estilos’ em uma das opções do menu.

Clique nele.

Agora, clique no botão de edição com o lápis.

Isso o levará à interface de edição.

Agora, você notará um painel útil no lado direito da sua tela. Este é o seu centro de controle de design, onde você pode alterar cores, fontes e muito mais.

Para alterar a cor de fundo, basta clicar em ‘Cores’ no painel Estilos.

Em seguida, clique em ‘Fundo’.

Agora você pode escolher entre uma cor sólida ou criar um gradiente. Sinta-se à vontade para escolher o que combina com seu estilo. Quando estiver satisfeito com sua escolha, clique em ‘Salvar’ e pronto!

Como Alterar a Cor de Fundo no WordPress com CSS

Você está se perguntando como alterar a cor de fundo usando CSS?

Outra maneira de alterar a cor de fundo do seu site WordPress é adicionando CSS personalizado no Personalizador de Temas do WordPress.

Para começar, vá para Aparência » Personalizar e depois vá para a aba ‘CSS Adicional’.

Em seguida, você pode inserir o seguinte código:

body { background-color: #FFFFFF; } 

Tudo o que você precisa fazer é substituir o código da cor de fundo pelo código da cor que você deseja usar em seu site. Em seguida, prossiga e insira o código na guia CSS Adicional.

Quando terminar, não se esqueça de clicar no botão ‘Publicar’. Agora você pode visitar seu site para ver a nova cor de fundo.

Para mais detalhes, consulte nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress.

Como Alterar Cores de Fundo Aleatoriamente no WordPress

Agora, você está procurando uma maneira de alterar aleatoriamente a cor de fundo no WordPress?

Você pode adicionar um efeito suave de mudança de cor de fundo para transitar automaticamente entre diferentes cores de fundo. O efeito passa por várias cores até atingir a cor final.

Para adicionar o efeito, você precisará adicionar código ao seu site WordPress. Vamos guiá-lo pelo processo abaixo.

A primeira coisa que você precisará fazer é descobrir a classe CSS da área onde você gostaria de adicionar o efeito suave de mudança de cor de fundo.

Você pode fazer isso usando a ferramenta Inspecionar em seu navegador. Tudo o que você precisa fazer é mover o mouse para a área que deseja alterar a cor e clicar com o botão direito para selecionar a ferramenta Inspecionar.

Depois disso, você precisará anotar a classe CSS que deseja segmentar. Por exemplo, na captura de tela acima, queremos segmentar a área com a classe CSS ‘page-header’.

Em seguida, você precisa abrir um editor de texto simples em seu computador, como um bloco de notas, e criar um novo arquivo. Você terá que salvar o arquivo como ‘wpb-background-tutorial.js’ em sua área de trabalho.

Uma vez feito isso, você pode adicionar o seguinte código ao arquivo JS que você acabou de criar:

jQuery(function($){ $('.page-header').each(function(){ var $this = $(this), colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331']; setInterval(function(){ var color = colors.shift(); colors.push(color); $this.animate({backgroundColor: color}, 2000); },4000); }); }); 

Se você estudar o código, notará que usamos a classe CSS ‘page-header’, pois é a área que queremos segmentar em nosso site.

Você também verá que usamos quatro cores usando o código hexadecimal. Você pode adicionar quantas cores quiser para o seu plano de fundo. Tudo o que você precisa fazer é inserir os códigos de cores no trecho e separá-los usando uma vírgula e aspas simples, como as outras cores.

Agora que seu arquivo JS está pronto, você precisará carregá-lo na pasta JS do seu tema WordPress. A maneira mais fácil de fazer isso é com um cliente de protocolo de transferência de arquivos (FTP), que permite gerenciar arquivos diretamente no seu servidor web.

Para este tutorial, usaremos o FileZilla. É um cliente FTP gratuito e simples para Windows, Mac e Linux. Na verdade, é uma ferramenta comum que testamos para gerenciar arquivos de sites.

Para começar, você precisará fazer login no servidor FTP do seu site. Você pode encontrar as credenciais de login no e-mail do seu provedor de hospedagem ou no painel cPanel da sua conta de hospedagem.

Depois de fazer login, você verá uma lista de pastas e arquivos do seu site na coluna 'Site remoto'. Navegue até a pasta JS no tema do seu site.

Se o seu tema não tiver uma pasta js, você pode criar uma.

Simplesmente clique com o botão direito na pasta do seu tema no cliente FTP e clique na opção 'Criar diretório'.

Em seguida, você precisará abrir a localização do seu arquivo JS na coluna 'Site local'.

Em seguida, clique com o botão direito no arquivo e clique na opção 'Upload' para adicionar o arquivo ao seu tema.

Para mais detalhes, você pode seguir nosso tutorial sobre como usar FTP para fazer upload de arquivos para o WordPress.

Em seguida, você precisará inserir o seguinte código no arquivo funtions.php do seu tema. Este código carrega corretamente o arquivo JavaScript e o script jQuery dependente que você precisa para que este código funcione:

function wpb_bg_color_scripts() { wp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); 

Recomendamos o uso do plugin gratuito WPCode para adicionar o código com segurança ao seu site. Para mais detalhes, veja nosso guia sobre como colar snippets da web no WordPress.

Agora você pode visitar seu site para ver as cores que mudam aleatoriamente em ação na área que você segmentou.

Como Alterar a Cor de Fundo para Posts Individuais

Você também pode alterar a cor de fundo de cada post individual do blog no WordPress em vez de usar uma única cor em todo o seu site usando CSS personalizado.

Ele permite que você altere a aparência de posts específicos e personalize seus fundos. Por exemplo, você pode personalizar o estilo de cada post com base nos autores ou mostrar uma cor de fundo diferente para o seu post mais comentado.

Você pode até mesmo alterar a cor de fundo de posts em uma categoria específica. Por exemplo, posts de notícias podem ter cores de fundo diferentes em comparação com tutoriais.

A primeira coisa que você precisará fazer é encontrar a classe do ID do post no CSS do seu tema. Você pode fazer isso visualizando qualquer post do blog e, em seguida, clicando com o botão direito para usar a ferramenta Inspecionar no seu navegador.

Aqui está um exemplo de como ficaria:

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized"> 

Uma vez que você tenha o ID do seu post, você pode alterar a cor de fundo de um post individual usando o seguinte CSS personalizado. Basta substituir o ID do post para corresponder ao seu e o código de cor de fundo que você deseja.

.post-104 { background-color: #D7DEB5; color:#FFFFFF; } 

Para adicionar o CSS personalizado, você pode usar o Personalizador de Temas do WordPress. Primeiro, certifique-se de que você está logado no seu site WordPress. Em seguida, visite sua postagem de blog e clique na opção 'Personalizar' no topo.

Depois disso, vá para a aba CSS Adicional no menu à sua esquerda.

Em seguida, insira o CSS personalizado.

Assim que terminar, clique no botão 'Publicar'.

Agora você pode visitar sua postagem de blog para ver a nova cor de fundo.

Se você quiser alterar a cor de fundo com base no autor, comentários ou categoria, confira nosso tutorial detalhado sobre como estilizar cada postagem do WordPress de forma diferente.

Dica Bônus: Use um Construtor de Páginas para Mais Controle de Design

Alterar cores de fundo é apenas o começo. Se você quiser ter controle total sobre o design do seu site, um construtor de páginas pode abrir muitas outras possibilidades.

Na WPBeginner, recomendamos SeedProd porque é o construtor de páginas mais popular e fácil de usar para WordPress. Nossas marcas parceiras também o usaram para projetar seus sites, incluindo WPForms, Duplicator e Charitable.

Ele oferece controle total de design e permite que você:

• Crie qualquer página sem codificação
• Personalize cores, layouts e espaçamento
• Crie páginas com aparência profissional em minutos
• Faça suas páginas ficarem ótimas em todos os dispositivos

Testamos completamente a ferramenta em nosso ambiente de demonstração e a achamos super intuitiva e fácil de usar. Para saber mais sobre nossa experiência, você pode ver nossa análise do SeedProd.

Começar é fácil – basta instalar e ativar o SeedProd usando nosso guia simples de instalação de plugins do WordPress.

Observação: Você pode começar com a versão gratuita, mas o SeedProd Pro oferece acesso a mais modelos e opções de design, se você precisar deles.

Assim que o plugin estiver ativo, você será solicitado a inserir sua chave de licença. Você pode encontrar a chave na área da sua conta SeedProd. Após inserir a chave, clique no botão ‘Verificar Chave’.

Em seguida, você pode ir para SeedProd » Páginas.

A partir daqui, clique no botão ‘Adicionar Nova Landing Page’.

Depois disso, você precisará selecionar um tema para sua landing page. O SeedProd oferece muitos modelos de landing page bonitos para começar.

Você também pode usar um modelo em branco para começar do zero. No entanto, sugerimos usar um modelo, pois é uma maneira mais fácil e rápida de criar uma landing page.

Ao selecionar um modelo, você será solicitado a inserir um Nome de Página e escolher uma URL.

Depois disso, basta clicar no botão ‘Salvar e Começar a Editar a Página’.

Na próxima tela, você verá o construtor de páginas do SeedProd. Aqui você pode usar o construtor de arrastar e soltar para adicionar blocos do menu à sua esquerda. Você pode adicionar um título, vídeo, imagem, botão, etc.

Ao rolar para baixo, há mais blocos na seção Avançado. Por exemplo, você pode adicionar um contador regressivo para criar urgência, exibir perfis sociais para aumentar seguidores, adicionar um formulário de opção para coletar leads e muito mais.

Usando o construtor de arrastar e soltar, é fácil alterar a posição de cada bloco em sua página de destino. Você pode até mesmo alterar o layout, tamanho, cor e fonte do texto.

Para alterar a cor de fundo de sua página de destino, basta selecionar qualquer seção da página. Agora você verá opções no menu à sua esquerda para editar o estilo de fundo, a cor e adicionar uma imagem.

Depois de terminar de editar sua página de destino, não se esqueça de clicar no botão 'Salvar' no topo.

Em seguida, você pode ir para a aba 'Conectar' e integrar a página com diferentes serviços de marketing por e-mail. Por exemplo, você pode se conectar ao Constant Contact, Brevo (anteriormente Sendinblue) e outros.

Depois disso, prossiga e clique na aba 'Configurações da Página'.

Aqui, você pode alterar o Status da Página de Rascunho para Publicar para colocar sua página no ar.

Além disso, você também pode alterar as configurações de SEO da página, visualizar as análises, adicionar código personalizado em Scripts e inserir um domínio personalizado.

Quando terminar, você pode sair do construtor de páginas SeedProd e visitar sua landing page personalizada.

Tutorial em Vídeo

Perguntas Frequentes: Alterando Cores de Fundo no WordPress

Aqui estão algumas perguntas frequentemente feitas por nossos leitores sobre como alterar as cores de fundo no WordPress:

Posso usar uma imagem como fundo em vez de uma cor?

Sim, você absolutamente pode. A maioria dos temas do WordPress que permitem alterar a cor de fundo também têm uma opção para fazer upload de uma imagem de fundo.

Normalmente, você pode encontrar essa configuração no Personalizador de Temas (Aparência » Personalizar) em uma aba como "Imagem de Fundo". A partir daí, você pode fazer upload de um arquivo do seu computador.

Alterar a cor de fundo afetará a velocidade do meu site?

Uma cor de fundo sólida praticamente não tem impacto na velocidade do seu site, tornando-a uma vitória de desempenho segura e fácil.

No entanto, usar uma imagem de fundo grande e não otimizada pode diminuir significativamente o tempo de carregamento da sua página. Se você usar uma imagem, sempre recomendamos comprimi-la primeiro.

Para mais dicas, consulte nosso guia sobre como otimizar imagens para a web sem perder qualidade.

Como encontro o código hexadecimal correto para a cor da minha marca?

Um código hexadecimal é um código de seis dígitos que representa uma cor específica (por exemplo, #FFFFFF para branco puro). O melhor lugar para encontrar o código hexadecimal da sua marca é no guia de estilo oficial da sua empresa.

Se você não tiver um, pode usar uma ferramenta online gratuita como HTML Color Codes. O seletor de cores deles permite que você encontre o código hexadecimal exato para qualquer tom que desejar.

Esperamos que este artigo tenha ajudado você a aprender como alterar a cor de fundo no WordPress. Você também pode querer conferir nosso guia sobre como converter Figma para WordPress e nossa comparação do melhor software de design web.

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