Deseja dar ao seu site WordPress um novo visual sem gastar horas em alterações complexas de design?
Criamos sites WordPress desde 2008. E podemos dizer com certeza que alterar a cor de fundo do seu site é uma das maneiras mais rápidas de transformar a aparência do seu site.
No entanto, com todos os diferentes temas e editores do WordPress disponíveis, encontrar o método certo pode ser uma tarefa árdua para os iniciantes.
Neste guia fácil de seguir, mostraremos exatamente como alterar a cor de fundo do WordPress, independentemente do tema ou do construtor de páginas que você estiver usando.
Por que a cor do plano de fundo do WordPress é realmente importante 🎨
Pense na cor do plano de fundo de seu site como as paredes de sua casa digital. Embora o tema do WordPress venha com uma cor padrão, a escolha do plano de fundo correto pode fazer uma grande diferença na sensação de acolhimento do site para os visitantes.
Veja por que esse elemento de design do WordPress é tão importante:
- Eles facilitam a leitura de seu conteúdo
- Elas ajudam a destacar informações importantes
- Eles definem o clima de seu site
- Eles podem fazer com que seu site pareça mais profissional
A cor de fundo correta pode ajudar a destacar seus botões importantes e aumentar suas conversões. Você também pode usar cores diferentes para organizar melhor o conteúdo, como usar cores específicas para diferentes categorias de blog ou anúncios especiais.
E se quiser tornar seu site ainda mais atraente, você pode até adicionar fundos de vídeo para chamar a atenção dos visitantes.
Dito isso, vamos dar uma olhada em como alterar a cor do plano de fundo no WordPress. Mostraremos diferentes maneiras de personalizar a cor do plano de fundo para que você possa ir para a seção que preferir:
- How to Change Background Color in WordPress Theme Customizer
- How to Change Background Color in Full Site Editor (2024 Method)
- How to Change Background Color in WordPress With CSS
- How to Randomly Change Background Colors in WordPress
- How to Change Background Color for Individual Posts
- Bonus Tip: Use a Page Builder for More Design Control
Como alterar a cor do plano de fundo no personalizador de temas do WordPress
Dependendo do seu tema, você poderá alterar a cor do plano de fundo usando o WordPress Theme Customizer. Ele permite que você edite a aparência do seu site em tempo real e sem a necessidade de editar o código.
Para acessar o Personalizador de Tema do WordPress, faça login no seu site e vá para Appearance ” Customize (Aparência ” Personalizar).
Isso abrirá o Theme Customizer, onde você encontrará várias opções para modificar o tema. Isso inclui os menus, as cores, a página inicial, os widgets, a imagem de fundo e muito mais.
As opções específicas disponíveis dependerão do tema do WordPress que seu site estiver usando. Para este tutorial, estamos usando o tema padrão Twenty Twenty-One.
Para alterar a cor de fundo do seu site, clique na guia de configurações “Cores e modo escuro” no menu à esquerda.
Em seguida, você precisará clicar na opção “Background Color” (Cor de fundo) e escolher uma cor para seu site.
Você pode usar a ferramenta de seleção de cores ou inserir um código de cor Hexadecimal para o plano de fundo.
Quando terminar de fazer as alterações, não se esqueça de clicar no botão “Publicar”.
Agora você pode visitar seu site do WordPress para ver a nova cor de fundo em ação.
Seu tema pode não ter essa opção disponível no Theme Customizer. Nesse caso, você pode tentar um dos métodos abaixo.
Como alterar a cor de fundo no Full Site Editor (Método 2024)
O editor de site completo (FSE) é uma plataforma de edição do WordPress para editar temas de blocos. Esse editor facilita muito a alteração da cor de fundo do seu site. Vamos examinar o processo juntos.
Comece acessando Appearance ” Editor em seu painel do WordPress.
Agora, você verá um botão “Styles” (Estilos) em uma das opções do menu.
Clique nele.
Agora, clique no botão de edição do lápis.
Isso o levará à interface de edição.
Agora, você notará um painel prático no lado direito da tela. Esse é o centro de controle do design, onde é possível alterar cores, fontes e muito mais.
Para alterar a cor do plano de fundo, basta clicar em “Colors” (Cores) no painel Styles (Estilos).
Em seguida, clique em “Background”.
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 “Save” (Salvar) e pronto!
Como alterar a cor do plano de fundo no WordPress com CSS
Você está se perguntando como alterar a cor do plano de fundo usando CSS?
Outra maneira de alterar a cor de fundo do seu site WordPress é adicionar CSS personalizado no Personalizador de Tema do WordPress.
Para começar, vá até Appearance ” Customize e, em seguida, acesse a guia “Additional CSS”.
Em seguida, você pode inserir o seguinte código:
1 2 3 | body { background-color: #FFFFFF;} |
Tudo o que você precisa fazer é substituir o código da cor de fundo pelo código da cor que deseja usar em seu site. Em seguida, insira o código na guia Additional CSS.
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 obter mais detalhes, consulte nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress.
Como alterar aleatoriamente as cores de fundo no WordPress
Agora, você está procurando uma maneira de alterar aleatoriamente a cor do plano de fundo no WordPress?
Você pode adicionar um efeito de mudança de cor de fundo suave para fazer a transição entre diferentes cores de fundo automaticamente. 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 orientá-lo no processo abaixo.
A primeira coisa que você precisa fazer é descobrir a classe CSS da área em que deseja adicionar o efeito de alteração suave da cor de fundo.
Você pode fazer isso usando a ferramenta Inspecionar em seu navegador. Basta levar o mouse até a área que deseja alterar a cor e clicar com o botão direito do mouse para selecionar a ferramenta Inspecionar.
Depois disso, você precisará escrever a classe CSS que deseja direcionar. Por exemplo, na captura de tela acima, queremos direcionar a área com uma classe CSS “page-header”.
Em seguida, abra um editor de texto simples em seu computador, como o bloco de notas, e crie um novo arquivo. Você precisará salvar o arquivo como “wpb-background-tutorial.js” em sua área de trabalho.
Feito isso, você pode adicionar o seguinte código ao arquivo JS que acabou de criar:
1 2 3 4 5 6 7 8 9 10 11 12 | 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, perceberá que usamos a classe CSS “page-header”, pois essa é a área que queremos segmentar em nosso site.
Você também verá que usamos quatro cores usando o código de cores hexadecimais. Você pode adicionar quantas cores quiser ao seu plano de fundo. Tudo o que você precisa fazer é inserir os códigos de cores no snippet e separá-los usando 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 do WordPress usando um serviço de protocolo de transferência de arquivos (FTP).
Para este tutorial, estamos usando o FileZilla. Ele é um cliente FTP gratuito para Windows, Mac e Linux, e é muito fácil de usar.
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 do 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”. Vá em frente e navegue até a pasta JS no tema de seu site.
Se o seu tema não tiver uma pasta js, você poderá criar uma.
Basta clicar com o botão direito do mouse na pasta do seu tema no cliente FTP e clicar na opção “Criar diretório”.
Em seguida, você precisará abrir o local do seu arquivo JS na coluna “Local site”.
Em seguida, clique com o botão direito do mouse no arquivo e clique na opção “Upload” para adicionar o arquivo ao seu tema.
Para obter mais detalhes, você pode seguir nosso tutorial sobre como usar o 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. Esse código carrega corretamente o arquivo JavaScript e o script jQuery dependente que você precisa para que esse código funcione:
1 2 3 4 | 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 usar o plug-in gratuito WPCode para adicionar o código com segurança ao seu site. Para obter mais detalhes, consulte 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 de publicações individuais
Você também pode alterar a cor de fundo de cada postagem individual do blog no WordPress em vez de usar uma única cor em todo o site usando CSS personalizado.
Ele permite que você altere a aparência de publicações específicas e personalize seus planos de fundo. Por exemplo, você pode personalizar o estilo de cada publicação com base nos autores ou mostrar uma cor de fundo diferente para a publicação mais comentada.
Você pode até mesmo alterar a cor de fundo das postagens em uma determinada categoria. Por exemplo, as postagens de notícias podem ter cores de fundo diferentes das dos tutoriais.
A primeira coisa que você precisa fazer é localizar a classe de ID da postagem no CSS do seu tema. Você pode fazer isso visualizando qualquer post do blog e clicando com o botão direito do mouse para usar a ferramenta Inspect no navegador.
Aqui está um exemplo de como seria:
1 | <article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized"> |
Depois de obter o ID da postagem, você pode alterar a cor de fundo de uma postagem individual usando o CSS personalizado a seguir. Basta substituir o ID da postagem para que corresponda ao seu e o código da cor de fundo que você deseja.
1 2 3 4 | .post-104 {background-color: #D7DEB5;color:#FFFFFF;} |
Para adicionar o CSS personalizado, você pode usar o WordPress Theme Customizer. Primeiro, verifique se você está conectado ao site do WordPress. Em seguida, visite a postagem do seu blog e clique na opção “Personalizar” na parte superior.
Depois disso, vá até a guia Additional CSS no menu à esquerda.
Em seguida, insira o CSS personalizado.
Quando isso for feito, clique no botão “Publicar”.
Agora você pode visitar sua postagem no blog para ver a nova cor de fundo.
Se você quiser alterar a cor do plano de fundo com base no autor, nos comentários ou na categoria, consulte nosso tutorial detalhado sobre como estilizar cada postagem do WordPress de forma diferente.
Dica bônus: Use um construtor de páginas para ter mais controle do design
Alterar as cores de fundo é apenas o começo. Se quiser ter controle total sobre o design do seu site, um construtor de páginas pode abrir muitas outras possibilidades.
Gostamos de usar o SeedProd, o construtor de páginas mais popular para WordPress, porque ele permite que você:
- Projete qualquer página sem codificação
- Personalize cores, layouts e espaçamento
- Crie páginas com aparência profissional em minutos
- Faça com que suas páginas tenham uma ótima aparência em todos os dispositivos
Começar é fácil – basta instalar e ativar o SeedProd usando nosso guia simples de instalação de plug-ins do WordPress.
Observação: Você pode começar com a versão gratuita, mas o SeedProd Pro lhe dá acesso a mais modelos e opções de design, se necessário.
Quando o plug-in estiver ativo, você será solicitado a inserir sua chave de licença. Você pode encontrar a chave na área de sua conta SeedProd. Depois de inserir a chave, clique no botão “Verify Key” (Verificar chave).
Em seguida, você pode ir para SeedProd ” Páginas.
A partir daí, clique no botão “Add New Landing Page” (Adicionar nova página de destino).
Depois disso, você precisará selecionar um tema para sua página de destino. O SeedProd oferece muitos modelos bonitos de página de destino para você começar.
Você também pode usar um modelo em branco para começar do zero. No entanto, sugerimos o uso de 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 um URL.
Depois disso, basta clicar no botão “Save and Start Editing the Page” (Salvar e começar a editar a página).
Na próxima tela, você verá o construtor de páginas 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 a tela para baixo, há mais blocos na seção Advanced. Por exemplo, você pode adicionar um cronômetro de contagem regressiva para criar urgência, mostrar perfis sociais para aumentar os 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, o tamanho, a cor e a fonte do texto.
Para alterar a cor de fundo da sua landing page, basta selecionar qualquer seção da página. Agora você verá opções no menu à esquerda para editar o estilo e a cor do plano de fundo e adicionar uma imagem.
Quando terminar de editar sua página de destino, não se esqueça de clicar no botão “Salvar” na parte superior.
Em seguida, você pode ir até a guia “Connect” (Conectar) e integrar a página a diferentes serviços de marketing por e-mail. Por exemplo, você pode se conectar ao Constant Contact, Brevo (anteriormente Sendinblue) e outros.
Depois disso, vá em frente e clique na guia “Configurações da página”.
Aqui, você pode alterar o status da página de Rascunho para Publicar para tornar sua página ativa.
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ê poderá sair do construtor de páginas SeedProd e visitar sua página de destino personalizada.
Tutorial em vídeo
Esperamos que este artigo tenha ajudado você a aprender como alterar a cor do plano de fundo no WordPress. Talvez você também queira conferir nosso guia sobre como converter o Figma em WordPress e nossa comparação dos melhores softwares de web design.
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.
Have a question or suggestion? Please leave a comment to start the discussion.