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 diferentes maneiras fáceis de atualizar a cor de fundo no WordPress, começando pela opção mais amigável para iniciantes e passando 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

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 (Temas de Blocos)

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

Você deseja adicionar um efeito suave de mudança de cor de fundo ao seu site? Este efeito transita automaticamente por diferentes cores, o que pode ser ótimo para destacar uma seção específica ou chamar a atenção.

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

Gostaria de dar a um post de blog específico um visual único? Você pode alterar a cor de fundo de posts individuais usando CSS personalizado. Isso permite destacar anúncios especiais, categorizar conteúdo por cor ou simplesmente ser criativo com seu design.

Primeiro, você precisa encontrar a classe específica do ID do post no CSS do seu tema. Simplesmente visualize o post do blog que você deseja personalizar, clique com o botão direito em qualquer lugar da página e selecione a ferramenta ‘Inspecionar’.

Procure pela tag <article> ou pela tag <body> no código fonte. Você verá uma classe que se parece com post-104 ou postid-104.

Assim que tiver o ID do seu post, você pode usar o seguinte trecho de CSS personalizado. Certifique-se de substituir o ID do post e o código de cor pelos seus próprios detalhes:

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

Para adicionar este código, vá em Aparência » Personalizar e cole-o na aba ‘CSS Adicional’.

Assim que clicar em ‘Publicar’, a cor de fundo mudará apenas para aquele post de blog específico.

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 Sobre a Alteração de 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.