As cores desempenham um papel importante em tornar seu site visualmente atraente e estabelecer a identidade da sua marca. Felizmente, o WordPress torna super fácil personalizar cores em todo o seu site.
Isso é essencial para criar um visual único e fornecer consistência e clareza.
Usamos com sucesso a cor para construir uma forte identidade de marca em nossos sites. Por exemplo, a cor laranja se tornou uma parte definidora da marca WPBeginner. Ela torna nosso site memorável para os leitores, ao mesmo tempo em que cria um design esteticamente agradável.
Este uso cuidadoso da cor ajuda a garantir que nossa marca seja facilmente reconhecível, melhorando a experiência do usuário e a fidelidade à marca.
Neste artigo, mostraremos como personalizar facilmente cores em seu site WordPress, incluindo cores de fundo, cabeçalho, texto e links.
O Que é Teoria das Cores?
Antes de começar a personalizar cores em seu site WordPress, é importante entender a teoria das cores.
Teoria das cores é o estudo das cores e como elas funcionam juntas. Ela ajuda os designers a criar combinações de cores que se complementam.
Ao projetar um site, você precisa escolher cores que combinem bem. Isso tornará seu site mais atraente para seus visitantes, o que pode melhorar a experiência do usuário e aumentar o engajamento.
Cores diferentes podem provocar diferentes emoções e sentimentos nas pessoas, e a teoria das cores pode ajudá-lo a escolher a combinação certa para o seu site.
Por exemplo, o vermelho é frequentemente usado para representar comida e restaurantes. Por outro lado, o azul é geralmente usado em sites bancários e financeiros.
Isso ocorre porque o vermelho pode criar sentimentos de calor, energia e paixão, enquanto o azul significa confiança, segurança e calma.
Além de complementar cores, você também pode usar o contraste de cores para chamar a atenção para áreas importantes do seu blog WordPress.
Isso permite que você torne seu conteúdo mais legível, estabeleça uma forte identidade de marca e crie um clima específico no site.
O que são temas WordPress e você pode mudar as cores do tema?
Temas WordPress controlam como seu site aparece para o usuário. Um tema WordPress típico é um conjunto de modelos pré-projetados que você instala em seu site para alterar sua aparência e layout.
Os temas tornam seu site mais atraente, fácil de usar e aumentam o engajamento.
Você também pode criar seus próprios temas do zero usando plugins como SeedProd e o Thrive Theme Builder.
Com o WordPress, você pode personalizar facilmente temas e alterar suas cores de fundo, fontes, botões e links.
No entanto, lembre-se de que alguns temas vêm com opções de cores pré-definidas, enquanto outros oferecem mais flexibilidade para você escolher as suas.
Dito isso, vamos ver como você pode personalizar facilmente as cores no WordPress. Você pode usar os links rápidos abaixo para pular para as diferentes partes do nosso tutorial:
- Como personalizar cores no WordPress
- Como mudar a cor de fundo no WordPress
- Como mudar a cor do cabeçalho no WordPress
- Como Alterar a Cor do Texto no WordPress
- Como Alterar a Cor de Seleção do Texto no WordPress
- Como Alterar a Cor do Link no WordPress
- Como Alterar o Esquema de Cores do Administrador no WordPress
Como personalizar cores no WordPress
Você pode personalizar cores no WordPress usando vários métodos diferentes, incluindo o personalizador de temas, o editor de site completo, CSS personalizado, plugins de construtor de páginas e muito mais.
Alterar Cores Usando o Personalizador de Temas
É super fácil alterar cores usando o personalizador de temas do WordPress integrado.
Primeiro, visite a página Aparência » Personalizar na barra lateral de administração.
Observação: Se você não encontrar a aba ‘Personalizar’ no seu painel do WordPress, isso significa que você está usando um tema de blocos. Role para baixo até a próxima seção deste tutorial para descobrir como alterar cores em um tema de blocos.
Para este tutorial, usaremos o tema padrão Twenty Twenty-One.
Lembre-se de que o personalizador de temas pode parecer diferente dependendo do tema que você está usando atualmente.
Por exemplo, o tema Twenty Twenty-One vem com um painel ‘Cores e Modo Escuro’ que permite aos usuários selecionar uma cor de fundo e personalizar o modo escuro.
Após abrir o painel, basta clicar na opção ‘Selecionar Cor’. Isso abrirá o Seletor de Cores, onde você pode escolher sua cor de fundo preferida.
Quando terminar, não se esqueça de clicar no botão ‘Publicar’ no topo para salvar suas alterações e torná-las visíveis em seu site.
Alterar Cores no Editor de Site Completo
Se você estiver usando um tema baseado em blocos, você não terá acesso ao personalizador de temas. No entanto, você pode usar o editor de site completo (FSE) para alterar cores em seu site.
Primeiro, vá para a tela Aparência » Editor na barra lateral de administração para abrir o editor completo do site. Agora, você precisa clicar no ícone 'Estilos' no canto superior direito da tela.
Isso abrirá a coluna 'Estilos', onde você deve clicar no painel 'Cores'.
Você pode alterar as cores de fundo, texto, links, títulos e botões do tema a partir daqui.
Quando terminar, clique no botão 'Salvar' para armazenar suas configurações.
Alterar Cores Usando CSS Personalizado
CSS é uma linguagem de programação que você pode usar para alterar a aparência visual do seu site, incluindo suas cores. Você pode salvar CSS personalizado nas configurações do seu tema para aplicar suas personalizações em todo o seu site.
No entanto, o código CSS personalizado não será mais aplicado se você mudar de tema no seu site ou atualizar o seu tema existente.
É por isso que recomendamos o uso de WPCode, que é o melhor plugin de snippets de código WordPress do mercado. É a maneira mais fácil de adicionar código CSS personalizado e permitirá que você personalize cores com segurança no seu site WordPress.
Primeiro, você precisará instalar e ativar o plugin WPCode. Para mais instruções, consulte nosso guia para iniciantes sobre como instalar um plugin WordPress.
Observação: Existe também uma versão gratuita do WPCode que você pode usar. No entanto, recomendamos a atualização para um plano pago para desbloquear todo o potencial do plugin.
Após a ativação, visite a página Code Snippets » + Add Snippet na barra lateral de administração do WordPress.
Aqui, basta clicar no botão ‘Use Snippet’ na opção ‘Add Your Custom Code (New Snippet)’.
Uma vez na página ‘Create Custom Snippet’, você pode começar digitando um nome para o seu código.
Depois disso, basta selecionar ‘CSS Snippet’ como o ‘Code Type’ no menu suspenso.
Para esta seção, estamos adicionando código CSS personalizado que altera a cor do texto no site:
p { color:#990000; }
Simplesmente adicione o código CSS personalizado na caixa ‘Code Preview’.
Depois de fazer isso, role para baixo até a seção ‘Insertion’.
Aqui, você pode escolher a opção ‘Inserir Automaticamente’ se desejar que o código seja executado automaticamente após a ativação.
Você também pode adicionar um shortcode a páginas ou posts específicos do WordPress.
Quando terminar, role de volta para o topo da página e alterne o switch ‘Inativo’ para ‘Ativo’.
Finalmente, você precisa clicar no botão ‘Salvar Snippet’ para aplicar o código CSS ao seu site.
Alterar Cores Usando SeedProd
Você também pode personalizar cores usando o plugin SeedProd.
É o melhor construtor de páginas WordPress do mercado, e permite que você crie temas do zero sem usar nenhum código.
Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, você pode ler nosso guia para iniciantes sobre como instalar um plugin WordPress.
Após a ativação, vá para a página SeedProd » Theme Builder na barra lateral de administração do WordPress.
A partir daqui, clique no botão ‘Theme Template Kits’ na parte superior.
Nota: Se você quiser criar seu próprio tema do zero, precisará clicar no botão ‘+ Add New Theme Template’.
Isso o levará para a página ‘Theme Template Kit Chooser’. Aqui, você pode escolher entre qualquer um dos modelos de tema pré-fabricados oferecidos pelo SeedProd.
Para mais detalhes, veja nosso tutorial sobre como criar facilmente um tema do WordPress sem nenhum código.
Após escolher um tema, você será redirecionado para a página ‘Modelos de Tema’.
Aqui, alterne o controle ‘Ativar Tema SeedProd’ para ‘Sim’ para ativar o tema.
Agora, clique no link ‘Editar Design’ em qualquer página de tema para abrir o editor de arrastar e soltar.
Uma vez lá, clique no ícone de engrenagem na parte inferior da coluna esquerda.
Isso o levará às configurações de ‘CSS Global’.
A partir daqui, você pode personalizar as cores do fundo do seu site, texto, botões, links e muito mais.
Quando estiver satisfeito com suas escolhas, clique no botão ‘Salvar’ para armazenar suas configurações.
Como mudar a cor de fundo no WordPress
Todos os temas do WordPress vêm com uma cor de fundo padrão. No entanto, você pode alterá-la facilmente para personalizar seu site e melhorar sua legibilidade.
Se você estiver usando um tema de blocos, precisará alterar a cor de fundo usando o editor de site completo.
Primeiro, você deve visitar a tela Aparência » Editor no painel do WordPress.
Isso iniciará o editor de site completo, onde você deve clicar no ícone ‘Estilos’ no canto superior direito da tela.
Depois disso, basta clicar no painel ‘Cores’ para abrir configurações adicionais
Neste painel, você pode gerenciar a cor padrão de diferentes elementos do seu site.
Aqui, você precisa clicar na opção ‘Fundo’ na seção ‘Elementos’.
Uma vez que este painel tenha sido expandido, você pode escolher a cor de fundo do seu site a partir daqui.
Todos os temas do WordPress oferecem um número de cores de site padrão das quais você pode escolher.
No entanto, se você quiser usar uma cor personalizada, precisará clicar na ferramenta Cor Personalizada. Isso abrirá o Seletor de Cores, onde você pode selecionar uma cor de sua escolha.
Você também pode usar cores gradientes para o plano de fundo do seu site.
Para fazer isso, primeiro você terá que mudar para a aba ‘Gradiente’ no topo.
Em seguida, você pode escolher um gradiente padrão do tema ou selecionar suas próprias cores gradientes com a ajuda da ferramenta Seletor de Cores.
Assim que terminar, não se esqueça de clicar no botão ‘Salvar’ para armazenar suas configurações.
Você também pode alterar o plano de fundo do seu site usando o personalizador de temas, SeedProd e CSS personalizado.
Para instruções mais detalhadas, você pode consultar nosso guia para iniciantes sobre como alterar a cor de fundo no WordPress.
Como mudar a cor do cabeçalho no WordPress
Muitos temas do WordPress vêm com um cabeçalho integrado na parte superior da página. Geralmente contém links importantes da página, ícones sociais, CTAs e mais.
Se você estiver usando um tema de blocos, poderá personalizar facilmente o cabeçalho do WordPress usando o editor de site completo.
Primeiro, você precisa visitar a tela Aparência » Editor na barra lateral de administração para iniciar o editor de site completo. Uma vez lá, clique duas vezes no modelo ‘Cabeçalho’ no topo para selecioná-lo.
Isso abrirá as configurações do cabeçalho no painel de blocos à direita. Aqui, você terá que rolar para baixo até a seção ‘Cor’ e clicar na opção ‘Plano de Fundo’.
Isso abrirá um pop-up onde você pode escolher uma cor padrão para o seu cabeçalho.
Você também pode selecionar uma cor personalizada abrindo a ferramenta Seletor de Cores.
Para personalizar seu cabeçalho usando um gradiente de cores, você precisa mudar para a aba ‘Gradiente’.
Depois disso, você pode escolher uma opção de gradiente padrão ou personalizar a sua usando o Seletor de Cores.
Finalmente, clique no botão ‘Salvar’ para armazenar suas configurações.
Se você deseja alterar a cor do cabeçalho usando o personalizador de temas ou CSS adicional, talvez queira ler nosso guia para iniciantes sobre como personalizar o cabeçalho do seu WordPress.
Como Alterar a Cor do Texto no WordPress
Alterar a cor do texto pode ajudar a melhorar a legibilidade do seu blog WordPress.
Se você estiver usando um tema de blocos, precisará alterar a cor do texto usando o editor de site completo.
Você pode começar visitando a tela Aparência » Editor na área de administração do WordPress. Isso abrirá o editor de site completo, onde você deve clicar no ícone 'Estilos' no canto superior direito.
Em seguida, clique no painel 'Cores' para acessar as configurações adicionais.
Uma vez lá, prossiga e clique na opção 'Texto' na seção 'Elementos'.
Assim que as configurações de cor do texto forem abertas, você poderá ver uma série de cores de texto na seção 'Padrão'.
Alternativamente, você também pode usar uma cor de texto personalizada clicando na ferramenta Cor Personalizada e abrindo o Seletor de Cores.
Depois de fazer sua escolha, basta clicar no botão 'Salvar' para armazenar as alterações.
Dica Bônus: Você pode usar a ferramenta WebAIM Contrast Checker para verificar se a cor de fundo e a cor do texto funcionam juntas. A ferramenta pode ajudá-lo a melhorar a legibilidade do texto em seu site.
Para personalizar a cor do texto usando CSS, o personalizador de temas ou o SeedProd, talvez você queira ver nosso guia passo a passo sobre como alterar a cor do texto no WordPress.
Como Alterar a Cor de Seleção do Texto no WordPress
Quando um visitante seleciona texto em seu site, ele mostrará uma cor de fundo. A cor padrão é azul.
No entanto, às vezes, a cor pode não combinar bem com o seu tema do WordPress e você pode querer alterá-la.
Adicionar código CSS aos arquivos do seu tema pode facilmente mudar a cor de seleção do texto. No entanto, lembre-se de que mudar para outro tema ou atualizar o seu tema atual fará com que o código CSS desapareça.
É por isso que recomendamos o uso do WPCode, que é o melhor plugin de snippets de código para WordPress do mercado.
Primeiro, você precisa instalar e ativar o plugin WPCode. Para mais instruções, consulte nosso guia sobre como instalar um plugin do WordPress.
Após a ativação, acesse a página Code Snippets » + Add Snippets na barra lateral de administração.
Em seguida, basta clicar no botão ‘Use Snippet’ na opção ‘Add Your Custom Code (New Snippet)’.
Uma vez na página ‘Create Custom Snippet’, você pode começar digitando um nome para o seu trecho de código.
Depois disso, escolha ‘CSS Snippet’ como o ‘Code Type’ no menu suspenso à direita.
Agora, copie e cole o seguinte código CSS na caixa ‘Code Preview’:
::-moz-selection {
background-color: #ff6200;
color: #fff;
}
::selection {
background-color: #ff6200;
color: #fff;
}
Você pode alterar a cor de seleção de texto substituindo o código hexadecimal ao lado de background-color no trecho de CSS.
Depois de adicionar o código, role para baixo até a seção ‘Insertion’.
Aqui, escolha o método ‘Auto Insert’ para executar o código automaticamente após a ativação.
Depois disso, volte para o topo e alterne o switch ‘Inactive’ para ‘Active’.
Finalmente, clique no botão ‘Save Snippet’ para salvar suas alterações.
Agora, você pode visitar seu site para verificar a cor de seleção de texto.
Você também pode alterar a cor de seleção de texto usando o personalizador de temas ou um plugin. Para mais detalhes, consulte nosso tutorial sobre como alterar a cor de seleção de texto padrão no WordPress.
Como Alterar a Cor do Link no WordPress
Você pode facilmente alterar a cor do link no WordPress usando o editor de site completo ou CSS personalizado.
Se você estiver usando um tema de bloco, acesse a tela Aparência » Editor na barra lateral do administrador.
Ao abrir o editor de site completo, clique no ícone ‘Estilos’ no canto superior direito.
Em seguida, clique no painel ‘Cores’ na coluna da direita para ver configurações adicionais.
Uma vez lá, basta clicar na aba ‘Links’.
Isso abrirá as configurações de cor do link, e você verá várias cores de link padrão exibidas na coluna da direita.
No entanto, você também pode usar uma cor de link personalizada clicando na ferramenta Cor Personalizada para abrir o Seletor de Cores.
Você também pode alterar a cor do link ao passar o mouse usando o FSE. Isso significa que a cor do link mudará quando alguém passar o mouse sobre ele.
Primeiro, você precisará mudar para a aba ‘Hover’ na parte superior.
Uma vez lá, você pode escolher uma cor padrão ou personalizada para alterar a cor do link ao passar o mouse.
Finalmente, clique no botão ‘Salvar’ para armazenar suas configurações.
Para instruções mais detalhadas, você pode consultar nosso guia para iniciantes sobre como alterar a cor do link no WordPress.
Como Alterar o Esquema de Cores do Administrador no WordPress
Você também pode alterar o esquema de cores do administrador no WordPress, se desejar. Este método pode ser útil se você quiser que o painel de administração combine com a marca do seu site ou use suas cores favoritas.
No entanto, lembre-se de que alterar o esquema de cores do painel do WordPress não afetará a parte visível do seu site.
Para alterar o esquema de cores do administrador, basta visitar a página Usuários » Perfil no painel do WordPress.
Aqui, você verá vários esquemas de cores ao lado da opção ‘Esquema de Cores do Administrador’.
Escolha o que você preferir e, em seguida, clique no botão ‘Atualizar Perfil’ na parte inferior da página para salvar suas alterações.
Para instruções mais detalhadas, consulte nosso guia para iniciantes sobre como alterar o esquema de cores do administrador no WordPress.
Esperamos que este artigo tenha ajudado você a aprender como personalizar cores em seu site WordPress. Você também pode querer ver nosso artigo sobre como escolher um esquema de cores perfeito para o seu site WordPress e nosso guia definitivo sobre elementos de design do WordPress.
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.
Ralph
Eu adoro que o WordPress nos dê tanta liberdade. Isso torna cada site único e especial. Este guia é muito bom, e aprendi uma coisa nova sobre como mudar a cor de seleção de texto. Foi fácil, e agora meu site parece ainda melhor!
Minha opinião: Eu não confiaria na teoria das cores. Muitas pessoas a entendem errado. Sim, cores específicas têm seus próprios significados, mas quando você tem 2 cores, esses significados não se somam tão facilmente. Elas têm novas conotações que têm significados completamente diferentes. Eu sei disso por trabalhar profissionalmente na criação de imagens de marca.
WPBeginner Support
Com o passar do tempo, algumas cores podem mudar de significado, mas conhecer a teoria das cores ainda é útil para os proprietários de sites.
Admin
Jiří Vaněk
As cores desempenham um papel muito importante na web. Inicialmente, meus primeiros sites eram em tons de cinza ou geralmente em cores escuras, mas não tiveram sucesso. Então, tentei brincar com cores, e o feedback foi imediato. O que pessoalmente me ajudou foi focar em blogs que eu pessoalmente gostava e me inspirar neles. Além disso, eu aconselharia que existem extensões de navegador disponíveis que mostram os códigos hexadecimais de cores individuais em um site. Se você gostar de uma cor específica, pode facilmente encontrar seu código hexadecimal e usá-lo você mesmo.
Oyatogun Oluwaseun Samuel
Obrigado por compartilhar sua visão sobre isso, como desenvolvedor web e também artista gráfico, sempre soube que projetar qualquer coisa em tons de cinza não trará o resultado ideal. Para que alguém chame a atenção do usuário, é importante considerar a cultura e a tradição dos usuários de seus designs. Como na minha cultura o vermelho sempre significa perigo, enquanto em outras regiões significa algo muito importante ou algo a ser notado. Então, como você já disse, a cor desempenha um papel muito importante no design, mas deve ser colocada no contexto da cultura e tradição dos usuários.
Jiří Vaněk
Sim, já aprendi essa lição e você está absolutamente certo. O problema surge quando você está criando um site para usuários de todo o mundo, que é o meu caso. Tenho um blog que escrevo na minha língua nativa, mas todos os artigos (que são de natureza técnica) também são traduzidos para o inglês. De acordo com o Google Analytics, os visitantes vêm de todo o mundo, da Ásia à Europa e América. É por isso que me concentrei em sites grandes com tráfego semelhante e tentei encontrar elementos comuns. Acho que finalmente consegui com base no feedback que recebi, mas como mencionei, demorou muito para chegar lá, e as primeiras versões do blog não eram boas em termos de design de cores.