Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como alterar a cor do texto no WordPress (4 métodos fáceis)

Alterar a cor do texto no WordPress não é complicado. Você só precisa saber o lugar certo para fazer isso.

Na verdade, o processo em si é bastante simples, mas descobrimos que nem todo mundo sabe como fazê-lo de forma eficaz. Isso ocorre porque o processo pode variar dependendo de sua situação específica.

Por exemplo, se você estiver usando um tema clássico, talvez só tenha a opção de alterar a cor do texto de todo o site, e não de uma página específica. E, às vezes, a cor que você deseja usar nem mesmo é fornecida pelo seu tema.

Esses cenários podem fazer com que você se sinta preso ou inseguro sobre como continuar. Mas não se preocupe! Tendo passado mais de uma década no WordPress, vamos detalhar várias maneiras de alterar a cor do texto no WordPress, independentemente de seu tema ou de suas necessidades específicas.

How to change the text color in WordPress

Por que alterar a cor do texto no WordPress?

Há muitos motivos pelos quais você pode querer alterar a cor do texto no WordPress. Talvez você queira destacar uma chamada para ação em uma página de destino ou talvez queira usar subtítulos coloridos em seu site.

Às vezes, você pode até querer alterar a cor do texto em um site inteiro. Por exemplo, talvez seu tema do WordPress use uma cor de fonte cinza, mas você prefira usar preto para melhor contraste com a cor do plano de fundo.

Você também pode usar a cor para provocar uma emoção em seus visitantes. Por exemplo, muitas pessoas acham que o azul cria uma sensação de confiança e confiabilidade. Para saber mais, consulte nosso guia sobre como escolher um esquema de cores perfeito para seu site WordPress.

Dito isso, vamos ver como você pode alterar a cor do texto no WordPress. Basta usar os links abaixo para ir para o método que você preferir:

Dica de especialista: Está com dificuldades para obter o design ideal para seu site WordPress? Deixe nossa equipe do WPBeginner Pro Services transformar seu site para que ele corresponda exatamente à sua visão. Agende sua consulta gratuita hoje mesmo e veja como podemos ajudar!

Método 1: Como alterar a cor do texto no Block Editor

Se você quiser alterar apenas algumas palavras, um parágrafo ou um título em uma postagem, poderá usar o editor de conteúdo do WordPress. Esse método funciona independentemente de você usar um tema de bloco ou um tema clássico.

Para começar, abra o post ou a página em que você deseja alterar a cor do texto ou crie uma nova página.

Se ainda não o fez, digite o texto que deseja personalizar. Dependendo do texto, talvez seja necessário adicionar um Parágrafo, Título ou algum outro bloco que aceite texto. Para obter ajuda com isso, dê uma olhada em nosso guia sobre como usar o editor de blocos do WordPress.

Assim que tiver algum texto, você estará pronto para alterar sua cor.

Alteração da cor do texto de um bloco

Para este primeiro exemplo, vamos alterar a cor do texto de um bloco inteiro. Essa é uma boa maneira de destacar uma seção inteira de conteúdo, como um parágrafo inteiro.

Basta clicar no bloqueio e selecionar a guia “Bloquear” no menu à direita.

Changing the text color of a WordPress block

Depois de fazer isso, localize a seção “Color” (Cor) e clique em “Text” (Texto).

O editor visual agora mostrará algumas cores que complementam seu tema do WordPress. Você pode simplesmente clicar em qualquer cor para alterar todo o texto dentro desse bloco.

Choosing a color from your WordPress theme

Para usar uma cor diferente, basta clicar na caixa na parte superior da janela pop-up.

Isso abre um seletor no qual você pode escolher uma nova cor de fonte.

Customizing your text using the color picker

Outra opção é digitar um código hexadecimal, que é o código HTML de uma determinada cor. Isso é útil se você quiser usar uma cor muito específica, como o tom exato de vermelho do logotipo do seu site.

Se não tiver certeza de qual código hexadecimal usar, pode ser útil consultar um site como o HTML color codes (Códigos de cores HTML). Aqui, você pode explorar diferentes cores e obter seus códigos hexadecimais.

Quando você tiver um código, cole-o ou digite-o na caixa “Hex”.

Customizing text using a hex code

Se você mudar de ideia e quiser restaurar a cor padrão do texto, basta clicar no botão pontilhado no menu à direita.

As opções que você vê variam dependendo se você também alterou a cor de fundo do bloco, portanto, pode ser necessário clicar em “Text” (Texto) ou “Reset all” (Redefinir tudo).

Restoring the theme's default text color

Alteração da cor do texto de uma palavra ou frase

Às vezes, você pode querer mudar apenas a cor de uma determinada palavra, frase ou sentença, como a chamada para ação em sua página de captura.

Para fazer isso, basta destacar a palavra ou frase que você deseja alterar no editor de blocos do WordPress. Em seguida, clique na pequena seta para baixo na barra de ferramentas do editor de conteúdo e clique em ‘Highlight’.

Changing the text color for specific words in WordPress

Isso abre uma janela pop-up mostrando algumas cores que ficarão bem com seu tema atual.

Você também pode escolher uma cor manualmente ou até mesmo usar um código hexadecimal seguindo o mesmo processo descrito acima.

How to change the text color in WordPress

Dica profissional: Deseja alterar a cor de seus links? Confira nosso guia para iniciantes sobre como alterar a cor do link no WordPress.

Método 2: Como alterar a cor do texto no personalizador de temas (somente temas clássicos)

A cor pode chamar a atenção para o conteúdo mais importante de uma página, mas muitas cores diferentes podem ser excessivas. Com isso em mente, normalmente você deve usar a mesma cor de texto na maior parte do seu site WordPress.

Alterar cada página e post manualmente usando o editor de blocos levaria muito tempo, portanto, recomendamos alterar o próprio tema usando o personalizador de temas.

Observação: se o personalizador de tema não estiver presente, é mais provável que você esteja usando um tema de bloco e pode pular para o método 3.

Para começar, acesse Appearance ” Customize.

The WordPress theme customizer

Agora você precisa localizar as configurações de texto do tema. Cada tema é diferente, mas normalmente você precisará procurar a opção “Typography” (Tipografia).

Em nossas imagens, estamos usando o OceanWP.

The theme customizer Typography settings

Vá em frente e clique em “Typography” (Tipografia) ou em uma configuração semelhante. Nesse ponto, você normalmente verá todos os diferentes tipos de texto usados no tema, como Título 1 e Título da página.

Para alterar o texto dentro de seus posts e páginas, clique na seção “Body” (Corpo) ou similar.

Changing the body text color using the WordPress theme customizer

Para personalizar a cor do texto, localize a seção “Font Color” (Cor da fonte).

Em seguida, clique em “Select Color” (Selecionar cor).

The font color selector

Isso abrirá o seletor. Você pode usar uma das cores prontas, escolher uma nova cor usando as configurações ou digitar um código hexadecimal.

Se você quiser restaurar a cor padrão do tema em qualquer momento, basta clicar em “Default” (Padrão).

The color picker settings in the theme customizer

Você também pode usar essas configurações para alterar o tamanho da fonte, o estilo, o espaçamento entre letras e muito mais.

Quando estiver satisfeito com a aparência do texto, clique no botão “Publish” (Publicar) na parte superior da tela.

Método 3: Como alterar a cor do texto no Full Site Editor (somente temas de blocos)

Se você estiver usando um tema baseado em blocos, como o ThemeIsle Hestia Pro ou o Twenty Twenty-Three, o processo de alteração da cor do texto do tema será um pouco diferente.

Para personalizar o texto usando o Full Site Editor, vá para Themes “ Editor.

Selecting the Full-Site Editor from the WordPress admin panel

Agora, você verá vários menus para personalizar a aparência do seu site.

Aqui, você deseja selecionar “Styles” (Estilos). Essa seção define as cores globais, a tipografia e o layout do seu site.

Choosing Styles in the Full Site Editor

Na próxima tela, você verá algumas combinações de estilos para escolher. Se quiser mudar completamente a aparência do tema do bloco, basta escolher uma das opções disponíveis.

Mas, para fins de demonstração, vamos clicar no botão de lápis “Editar estilos”.

Clicking Edit Styles in Full Site Editor

Agora você chegará ao Full Site Editor e a guia Styles estará aberta.

Vamos clicar em “Colors” (Cores).

Selecting Colors in the Full Site Editor

A barra lateral mostrará alguns elementos cujas configurações de cores podem ser alteradas, como texto, links, legendas, botões e cabeçalhos.

Cada um deles terá configurações de cores diferentes, portanto, não deixe de explorá-los para ver o que eles podem fazer.

Elements whose color you can change in the WordPress Full Site Editor

Vamos usar um exemplo clicando em “Heading” (Título).

Para alterar a cor do cabeçalho, você pode selecionar uma das cores predefinidas do tema ou usar uma cor personalizada clicando no seletor de cores.

How to change the heading text color in the WordPress Full Site Editor

Quando estiver satisfeito com a aparência das cores do texto, basta clicar no botão “Save” (Salvar). Todas as alterações feitas serão aplicadas em todas as suas páginas e postagens.

Para obter mais informações, consulte nosso guia para iniciantes sobre a edição completa do site no WordPress.

Método 4: Como alterar a cor do texto com o código CSS (mais personalizável)

Dependendo do seu tema, talvez não seja possível alterar o texto em todo o site usando os menus do personalizador. Uma opção é alterar cada parte do texto manualmente usando um dos métodos deste post. No entanto, isso exigiria muito tempo e esforço.

A boa notícia é que você pode personalizar o texto em um site inteiro adicionando CSS personalizado. Melhor ainda, esse método permite que você defina cores diferentes para tipos específicos de texto, como Heading 1 (h1) ou texto de parágrafo (p).

Como a edição e a personalização do tema do WordPress podem mudar de tema para tema, recomendamos o uso do WPCode para adicionar CSS personalizado ao seu site.

O WPCode é o melhor plug-in de snippets de código usado por mais de 1 milhão de sites do WordPress. Ele facilita a adição de CSS, PHP, HTML e outros elementos personalizados sem a necessidade de editar nenhum arquivo principal do WordPress.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in gratuito WPCode. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, vá para Code Snippets ” Add Snippet.

How to add custom CSS to your site using WPCode

Aqui, você verá todos os snippets de WPCode prontos que podem ser adicionados ao seu site.

Basta passar o mouse sobre “Add Your Custom Code” e selecionar “Use snippet” quando ele aparecer.

Adding a custom snippet to WordPress

Para começar, digite um título para o snippet de código personalizado. Pode ser qualquer coisa que ajude você a identificar o snippet no painel do WordPress.

Depois disso, abra a lista suspensa “Code Type” (Tipo de código) e selecione “CSS Snippet”.

Adding custom CSS to WordPress

Em seguida, você pode adicionar o CSS personalizado ao pequeno editor de código. Você precisará digitar o seletor do tipo de texto que está personalizando, seguido do código hexadecimal da cor que deseja usar.

Por exemplo, você pode alterar a cor do texto do parágrafo adicionando o seguinte:

p { color:#990000; }

Se você quiser usar uma cor diferente para os cabeçalhos do seu site, precisará usar os seletores h1, h2, h3 ou similares.

Você pode ver isso na imagem abaixo.

Changing the text color using custom code

Se você não tiver certeza do código hexadecimal a ser usado, poderá usar um site como o HTML color codes (Códigos de cores HTML).

Quando estiver satisfeito com o snippet, vá até a seção “Inserção”. O WPCode pode adicionar o CSS em diferentes locais, como depois de cada publicação, somente no frontend ou somente no admin.

Para alterar o texto em todo o seu blog do WordPress, clique em “Auto Insert” (Inserção automática) se ainda não estiver selecionado. Em seguida, abra o menu suspenso “Location” e escolha “Site Wide Header”.

How to add custom CSS across your entire website

Depois de fazer isso, role até a parte superior da tela e clique no botão de alternância “Inactive” (Inativo) para que ele mude para “Active” (Ativo).

Por fim, clique em “Save Snippet” (Salvar snippet) para ativar o snippet de CSS.

How to change the text color using WPCode

Agora, se você visitar seu site, verá o texto personalizado ao vivo.

Se você quiser usar uma cor de texto diferente em qualquer ponto ou apenas adicionar mais CSS a esse snippet, basta acessar Code Snippets Code Snippets. Aqui, passe o mouse sobre o snippet que acabou de criar e clique em “Editar” quando ele aparecer.

Editing a code snippet in WordPress

Agora, você pode editar o snippet de código para usar a nova cor e, em seguida, clicar em “Save Snippet” (Salvar snippet) para ativar a alteração em seu site.

Além da cor do texto, você também pode usar o WPCode para alterar a cor padrão ao selecionar um texto ou ativar destaques de texto em uma página e postar conteúdo.

Na maioria das vezes, você deseja que suas páginas de destino tenham uma aparência diferente do restante do site. Isso faz com que elas se destaquem, o que pode gerar mais conversões.

Isso é especialmente importante se você tiver várias páginas de destino, como uma para uma lista de espera viral e outra para uma campanha de anúncios do Google. Cada uma dessas páginas pode precisar de seu próprio design e esquema de cores exclusivos para atingir com eficácia diferentes públicos ou canais de marketing.

Se você quiser criar uma página de destino ou de vendas, recomendamos o uso do SeedProd. De todos os construtores de páginas que testamos, ele é o melhor do mercado e tem um construtor de páginas de arrastar e soltar fácil de usar.

O SeedProd vem com mais de 90 blocos que você pode simplesmente arrastar e soltar em seu layout. Em seguida, você pode ajustar esses blocos de várias maneiras diferentes, inclusive alterando a cor do texto.

Se você estiver usando uma página personalizada para obter mais conversões, o SeedProd funciona com muitas ferramentas populares de terceiros que você já pode estar usando para gerenciar conversões.

Isso inclui os principais serviços de marketing por e-mail, WooCommerce, Google Analytics e muito mais.

Primeiro, você precisa instalar e ativar o SeedProd. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Observação: Há também uma versão gratuita do SeedProd que permite a criação de páginas personalizadas. No entanto, para este guia, usaremos o SeedProd Pro, pois ele tem muito mais modelos e blocos avançados.

Após a ativação do plug-in, o SeedProd solicitará sua chave de licença.

Adding the license key to SeedProd

Você pode encontrar essas informações em sua conta no site da SeedProd. Depois de inserir a chave de licença, clique no botão “Verify Key” (Verificar chave).

Em seguida, você precisa acessar SeedProd ” Pages e clicar no botão “Add New Landing Page” (Adicionar nova página de destino).

How to create a new landing page in SeedProd

Depois disso, é hora de escolher um modelo. O SeedProd tem mais de 300 modelos criados profissionalmente que você pode personalizar com suas próprias imagens, textos, cores e muito mais.

Para selecionar um modelo, basta passar o mouse sobre ele e clicar no ícone “Marca de seleção”.

Choosing a SeedProd template

Estamos usando o modelo “Juicy Sales Page” em todas as nossas imagens, mas você pode usar qualquer design.

Em seguida, digite um nome para a página personalizada. O SeedProd criará automaticamente um URL com base no título da página, mas você pode alterar esse URL para o que quiser.

Quando estiver satisfeito com as informações inseridas, clique no botão “Save and Start Editing the Page” (Salvar e começar a editar a página).

Adding relevant keywords to a page URL

Em seguida, você será levado ao construtor de páginas de arrastar e soltar do SeedProd, onde poderá personalizar seu modelo.

O editor do SeedProd mostra uma visualização ao vivo de seu design à direita e algumas configurações de bloco à esquerda.

The SeedProd drag and drop page builder

O menu do lado esquerdo também tem blocos que você pode arrastar para o layout.

Por exemplo, você pode arrastar e soltar blocos padrão, como botões e imagens, ou usar blocos avançados, como cronômetros de contagem regressiva, depoimentos rotativos, botões de compartilhamento social e muito mais.

Adding a social sharing block to a custom page

O SeedProd também vem com “Seções”, que são coleções de blocos que costumam ser usados juntos. Por exemplo, o SeedProd tem um cabeçalho, imagem de herói, chamada para ação, depoimentos, formulário de contato, perguntas frequentes, recursos, seções de rodapé e muito mais. Isso pode ajudá-lo a criar rapidamente uma página com design profissional.

Para examinar as diferentes seções, basta clicar na guia “Seções”. Para visualizar qualquer seção, passe o mouse sobre ela e clique no ícone da lupa.

The SeedProd ready-made sections

Para adicionar a seção ao seu design, basta clicar em ‘Choose This Section’.

Isso adicionará a seção à parte inferior da página.

Adding a ready-made section to your website

Você pode mover seções e blocos pelo layout usando o recurso de arrastar e soltar.

Para personalizar um bloco, basta clicar para selecioná-lo em seu layout. O menu do lado esquerdo mostrará todas as configurações que você pode usar para configurar esse bloco.

Customizing SeedProd blocks on a landing page

Para alterar a cor do texto, basta clicar em qualquer bloco que tenha texto.

No menu à esquerda, selecione a guia “Advanced” (Avançado). Em “Styles” (Estilos), clique em “Color” (Cor).

Changing the text color using SeedProd

Isso abre uma janela pop-up na qual você pode escolher uma nova cor de texto.

Outra opção é digitar um código hexadecimal no campo “Hex”.

Customizing the text color using a page builder plugin

Agora você pode alterar a cor do texto de qualquer outro bloco simplesmente seguindo o mesmo processo descrito acima.

Quando você estiver satisfeito com a aparência da página, é hora de publicá-la clicando no botão “Save” (Salvar). Em seguida, selecione “Publicar”.

Publishing a page with custom text colors

Se você visitar sua loja on-line, blog ou site, verá a nova página em ação, completa com suas cores de texto personalizadas.

Esperamos que este tutorial tenha ajudado você a aprender como alterar a cor do texto no WordPress. Talvez você também queira conferir nosso tutorial sobre como adicionar um redimensionador de fontes no WordPress e maneiras de criar um site WordPress compatível com dispositivos móveis.

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.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

15 ComentáriosDeixe uma resposta

  1. Jim Toth

    This tutorial was of no help to me. M y headings still have no colour other than white.

    • WPBeginner Support

      If none of the recommendations from our article were able to assist you, we would recommend reaching out to the support for your specific theme to see if they have a recommendation in case their CSS is overriding that you add.

      Administrador

    • Jiří Vaněk

      If you use some kind of pagebuilder, there should be a problem too. For exhample Elementor could overwrite your CSS on its own. So if you have Elementor, Oxygen, Divi builder or anything like this, try to look on collor setings here too.

  2. Simba

    What is the color of wpbeginner h2 text?

  3. Lara

    Thank you! This was a great quick fix for an only semi-literate in the technical stuff.

    • WPBeginner Support

      You’re welcome :)

      Administrador

  4. Kayla

    Do you have any insight into how to change the background color of just part of a sentence?

    Thank you for all of your help. I’ve learned an immense amount from the content you share.

    • WPBeginner Support

      You would want to use the CSS method and instead of color:, use background-color:

      Administrador

  5. Ekta

    The 2nd method worked very well for me. Had spent quite some time on the net looking for how to change the color of the widget title and this took only a minute. Thanks a lot.

    • WPBeginner Support

      You’re welcome, glad our guide helped :)

      Administrador

  6. Bob Wood

    I still cannot change the color of a single word.
    I pull down options on single word –
    Inline code
    Inline image
    justify
    strikethrough
    underline

    • WPBeginner Support

      For a single word, you would need to use CSS for the moment.

      Administrador

  7. Tunde Sanusi (Tuham)

    Users can only do this in the Block Editor!
    That’s why I’ve been recommending people to start learning about the Block Editor

    • WPBeginner Support

      The CSS method would still work for those still on the Classic editor

      Administrador

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.