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?

As principais razões para alterar as cores dos links no WordPress são para combinar com a identidade da sua marca e melhorar a legibilidade do seu conteúdo. Ao personalizar essas cores, você direciona a atenção dos seus visitantes para as partes mais importantes da sua página.

Aqui estão alguns benefícios específicos de personalizar as cores dos seus links:

• Melhor Acessibilidade: Aumentar o contraste de cores entre o texto e o fundo torna seu site mais fácil de ler para pessoas com deficiência visual.
• Consistência da Marca: Você pode alinhar seus links com seu logo e esquema de cores geral para um visual profissional.
• Taxas de Cliques Mais Altas: Usar uma cor distinta para links (como botões ou chamadas para ação) incentiva os visitantes a clicar, aumentando as conversões.

Dito isso, vamos ver como alterar a cor do link no seu site WordPress. Simplesmente use os links rápidos abaixo para pular direto para o método que você preferir:

• 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
• How to Change Link Color in WordPress With Code (All Themes)
• Tutorial em Vídeo
• Perguntas Frequentes Sobre Como Alterar a Cor do Link no WordPress

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 não possuem 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. Você deve escolher uma cor que combine com o design do seu site.

No entanto, também é importante garantir que haja alto contraste entre o fundo e a cor do link. Isso garante que seu site seja acessível e fácil de ler para todos.

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 específico que você deseja personalizar.

Em seguida, clique no ícone de seta na barra de ferramentas e selecione 'Realçar' no menu suspenso.

Em seguida, clique na aba 'Texto'. Agora você pode selecionar a cor para esse link específico.

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;
}

Observação: Este código CSS altera a cor do link para todo o seu site. Isso inclui menus de navegação, botões e links do rodapé.

No exemplo acima, o código hexadecimal # mudará a cor do link para laranja, então você precisará alterar #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 link ao passar o mouse, basta colar o seguinte trecho 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:

Perguntas Frequentes Sobre Como Alterar a Cor do Link no WordPress

Aqui estão algumas perguntas que nossos leitores frequentemente fizeram sobre como alterar as cores dos links em seus sites:

Posso alterar a cor de um hiperlink?

Sim, a maioria dos temas do WordPress permite que você altere as cores dos hiperlinks globalmente através das configurações de Aparência ou do Editor do Site. Você também pode alterar a cor de links individuais diretamente dentro do editor de posts, destacando o link e selecionando uma cor na barra de ferramentas.

Como personalizar um link no WordPress?

Você pode personalizar um link selecionando-o no editor de blocos e usando as opções da barra de ferramentas. Isso permite alterar o URL de destino, configurá-lo para abrir em uma nova aba ou ajustar as configurações de cor e estilo na barra lateral direita.

Como personalizo o link do meu URL?

Para alterar o texto do próprio URL (o slug), vá para as configurações de ‘Post’ na barra lateral direita e procure pela seção ‘URL’. Se você quiser alterar a aparência visual do link, como a fonte ou a cor, use as configurações de ‘Estilo’ no editor de blocos.

Para mais detalhes, veja nosso tutorial sobre como alterar os URLs do seu site WordPress.

Como alterar links no WordPress?

Simplesmente clique no texto do link existente dentro do editor de conteúdo e selecione o botão ‘Editar’ (ícone de lápis) na barra de ferramentas flutuante. A partir daí, você pode colar um novo URL ou modificar o texto que deseja exibir aos seus visitantes.

Como posso alterar o link da minha página?

Você pode alterar o link de uma página editando o slug do permalink na barra lateral de configurações da Página, na seção ‘URL’. Se a página já estiver publicada, recomendamos configurar um redirecionamento 301 para que os visitantes que usam o link antigo sejam enviados para a nova página correta.

Como alterar o ícone de link no WordPress?

O WordPress não tem uma configuração padrão para adicionar ou alterar ícones de link, então você geralmente precisará usar um plugin. Plugins como External Links podem adicionar automaticamente ícones a links de saída, ou você pode adicionar ícones manualmente usando FontAwesome e CSS personalizado.

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.