Como Alterar a Cor do Link no WordPress (Guia para Iniciantes)

‘Como faço para que meus links se destaquem?’ Essa é uma pergunta que ouvimos regularmente de nossos leitores do WPBeginner.

Embora possa parecer um detalhe pequeno, as cores dos links desempenham um papel importante na usabilidade e nas taxas de conversão do seu site. É por isso que usamos a cor laranja para links no WPBeginner.

A boa notícia é que mudar as cores dos links no WordPress se tornou muito mais fácil do que costumava ser. Você não precisa ser um especialista em CSS ou contratar um desenvolvedor – agora existem soluções simples que qualquer pessoa pode usar, independentemente de suas habilidades técnicas.

Neste guia, vamos guiá-lo pelos passos exatos para alterar as cores dos seus links no WordPress.

Por que mudar a cor do link no WordPress?

Quando você adiciona um link no WordPress, seu tema determinará automaticamente a cor desse link. Às vezes, as cores padrão do seu tema WordPress serão exatamente o que você deseja, mas você pode precisar de mais controle sobre a aparência dos links.

Por exemplo, você pode querer mudar a cor do link para combinar com sua marca ou logotipo personalizado. Ou você pode querer aumentar o contraste da cor para tornar seu site mais acessível a leitores com visão limitada.

Dito isso, vamos ver como mudar a cor do link no seu site WordPress, não importa qual tema você esteja usando. Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar:

• Como mudar a cor do link em temas clássicos do WordPress
• Como mudar a cor do link em temas de blocos do WordPress
• Como Alterar Cores Individuais de Links no Editor de Blocos
• Como Alterar a Cor do Link no WordPress Com Código (Todos os Temas)
• Tutorial em Vídeo

Como mudar a cor do link em temas clássicos do WordPress

Alguns temas clássicos têm opções integradas para alterar as cores dos links, mas você precisará verificar as configurações do seu tema específico primeiro.

Para ver se o seu tema tem essa opção, vá para Aparência » Personalizador. Em seguida, procure por uma configuração que diga 'Cores' ou algo semelhante. No tema Sydney, está rotulado simplesmente como 'Cores'.

Em seguida, encontre uma configuração que permita alterar as cores dos links.

O Sydney torna isso simples com opções de 'Cor do Link' para os estados padrão e de passagem do mouse.

A cor de passagem do mouse do link é aquela que aparece quando um visitante passa o mouse sobre um link, então é uma ótima maneira de chamar a atenção deles e melhorar sua taxa de cliques.

Você pode então clicar em 'Publicar' para salvar suas alterações.

Lembre-se de que alguns temas, como o Neve, não têm configurações diretas de cor de link. Em vez disso, a cor do link pode estar vinculada às cores primárias ou secundárias do seu tema globalmente.

Se o seu tema não oferecer personalização direta da cor do link, não se preocupe! Você pode ir para o quarto método, onde mostraremos como alterar a cor do seu link usando código.

Como mudar a cor do link em temas de blocos do WordPress

Se você usar um tema de bloco, então você precisará usar o editor de site completo para personalizar as cores dos seus links.

Vá para Aparência » Editor no seu painel do WordPress.

Você verá todos os menus para personalizar a aparência do seu site.

Aqui, clique em ‘Estilos’.

Você verá os estilos padrão do seu tema exibidos.

Procure e clique no botão de lápis 'Editar' para começar a personalizar.

O editor de site completo será aberto com uma barra lateral para editar os estilos do seu tema.

Clique em 'Cores' nesta barra lateral para acessar as opções de personalização de cores.

Encontre a opção Link e clique nela para revelar as configurações de cor para os estados padrão e de passagem do mouse. Certifique-se de fazer suas seleções de cores para combinar com o design do seu site.

Assim que estiver satisfeito com suas alterações, basta clicar em ‘Salvar’ para torná-las ativas em seu site.

Como Alterar Cores Individuais de Links no Editor de Blocos

Às vezes, você pode querer alterar a cor de links individuais. Por exemplo, você pode querer chamar a atenção do visitante para a chamada para ação em uma página de destino.

Para fazer isso, basta destacar o link que você deseja personalizar. Em seguida, clique no ícone de seta na mini barra de ferramentas e selecione ‘Realçar’.

Agora você pode selecionar ‘Fundo’ ou ‘Texto’, dependendo da alteração que deseja fazer.

Com isso feito, prossiga e selecione a cor que deseja usar.

Para personalizar mais links, basta repetir essas etapas.

Quando estiver satisfeito com a aparência dos links, clique em ‘Salvar’ para tornar suas alterações ativas.

Como Alterar a Cor do Link no WordPress Com Código (Todos os Temas)

Se o seu tema não oferecer a opção de alterar a cor do seu link, a maneira mais fácil é adicionar CSS personalizado ao seu site WordPress.

Frequentemente, você encontrará trechos de código em tutoriais do WordPress com instruções para adicioná-los ao arquivo functions.php do seu tema.

O maior problema é que até mesmo um pequeno erro no trecho de código personalizado pode quebrar seu site WordPress e torná-lo inacessível. Você também perderá todas as suas personalizações na próxima vez que atualizar seu tema do WordPress.

É aí que WPCode entra em cena.

Após testes completos, concluímos que é a maneira mais segura e fácil de adicionar código personalizado ao seu site. Para mais detalhes, veja nossa análise do WPCode.

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

Ao ativar, acesse Snippets de Código » Adicionar Snippet.

Aqui, basta passar o mouse sobre ‘Adicionar seu código personalizado (Novo Snippet)’.

Em seguida, clique no botão ‘+ Adicionar Snippet Personalizado’ quando ele aparecer.

Em seguida, você precisa selecionar ‘Snippet CSS’ como o tipo de código na lista de opções exibidas na tela.

Depois disso, 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.

Agora você pode prosseguir e adicionar um snippet CSS personalizado à caixa de código. Vamos ver alguns dos diferentes snippets que você pode usar.

Altere a Cor do Link em Todo o Seu Site WordPress

Para começar, você pode querer personalizar a cor geral do link. Esta é a cor que os visitantes verão antes de clicar em um link.

Para fazer isso, basta adicionar o seguinte snippet à caixa de código do WPCode:

a {
     color: #FFA500;
}

No exemplo acima, o código hexadecimal # mudará a cor do link para laranja, então você precisará mudar#FFA500 para a cor que deseja usar.

Se você não tem certeza de qual código hexadecimal usar, pode explorar diferentes cores e obter seus códigos no site HTML Color Codes.

Quando você estiver satisfeito com a aparência do seu código, clique no alternador ‘Inactive’ para que ele mostre ‘Active’ em vez disso. Por fim, clique em ‘Save Snippet’ para tornar o snippet CSS ativo.

Agora, se você visitar seu site WordPress, verá a nova cor do link em ação.

Altere a Cor do Hover do Link no WordPress

Para alterar a cor do hover do link, basta colar o seguinte snippet no editor do WPCode:

a:hover {
     color: #FF0000;
     text-decoration: underline;
}

O código acima alterará a cor do link para vermelho e sublinhará o texto quando os visitantes passarem o mouse sobre ele. Como antes, você pode alterar o código hexadecimal #FF0000 para qualquer cor que desejar usar.

Quando estiver pronto para publicar, você pode publicar o snippet de código seguindo o mesmo processo descrito acima.

Alterar a Cor do Link Após Visita no WordPress

Em seguida, você pode querer alterar a cor do link após um usuário clicar nele. Isso pode ajudar os visitantes a se localizarem em seu blog WordPress, mostrando quais links eles já clicaram.

Você pode usar o código CSS abaixo para alterar a cor do link visitado:

a:visited {
     color: #0000FF;
}

Como sempre, certifique-se de alterar o código hexadecimal azul #0000FF para a cor que você deseja usar em seus links.

Com isso feito, clique no alternador 'Inativo' para que ele mude para 'Ativo'. Em seguida, basta clicar em 'Salvar Snippet' para tornar o código ativo em seu site, blog ou loja online.

Tutorial em Vídeo

Se você não gosta de seguir instruções escritas, pode conferir nosso tutorial em vídeo:

Esperamos que este artigo tenha ajudado você a aprender como alterar a cor do link no WordPress. Você também pode querer ver nosso guia sobre como alterar a cor do texto no WordPress ou nosso guia definitivo sobre os elementos de design mais eficazes para um site 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.