Como alterar a cor do link no WordPress (guia do iniciante)

Você quer aprender como mudar a cor do link no WordPress?

Alterar a cor do link oferece mais controle sobre o design do seu site e pode facilitar a navegação dos visitantes.

Neste artigo, mostraremos como alterar a cor do link no WordPress, passo a passo.

Por que mudar a cor do link no WordPress?

Quando você adiciona um link no WordPress, seu tema determinará automaticamente a cor do link.

Às vezes, as opções de cores padrão do tema do WordPress serão exatamente o que você deseja, mas outras vezes, você desejará ter mais controle sobre a aparência dos links.

Por exemplo, você pode querer alterar a cor de seus links para combinar com a marca ou logotipo de sua empresa. Ou você pode querer aumentar o contraste da cor para melhorar a acessibilidade da web para leitores com visão limitada.

Alguns temas permitem que você altere a cor do link diretamente do painel de opções do seu tema ou do personalizador de tema do WordPress, portanto, certifique-se de revisar a documentação do seu tema antes de alterar a cor do link com CSS.

Dito isso, vamos dar uma olhada em algumas maneiras de alterar a cor do link em seu site WordPress.

Método 1. Altere a cor do link no WordPress editando CSS

Uma maneira de alterar a cor do link no WordPress é adicionando código CSS personalizado.

A primeira coisa a fazer é navegar até o painel de administração do WordPress e ir para Aparência »Personalizar e clique na opção de menu ‘CSS Adicional’.

Personalizador WordPress para CSS adicional

Isso o levará a uma tela onde você pode adicionar seu código CSS personalizado no lado esquerdo da página.

Você adicionará os snippets CSS dos exemplos abaixo a esta seção do seu editor.

Adicionar tela de código CSS adicional

Primeiro, vamos personalizar a cor geral do link. Esta é a cor que seus visitantes verão, caso nunca tenham clicado no link antes.

Leia Também:  Baixe 10 plug-ins grátis para acelerar seu site WordPress

Você pode usar o seguinte código CSS como exemplo.

a {
     color: #FFA500;
}

Isso mudará a cor padrão do link para laranja. Certifique-se de mudar o #FFA500 cor para a cor que você deseja usar.

Alterar a cor de rolagem do link no WordPress

A próxima coisa que vamos mudar é a cor de rolagem do link. Dessa forma, quando um usuário passa o mouse sobre um link, ele muda de cor para chamar sua atenção.

Você pode usar o seguinte código CSS como exemplo.

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

O código acima mudará a cor do link para vermelho e sublinhará o texto quando os visitantes passarem o mouse sobre ele. Certifique-se de mudar o #FF0000 cor que você preferir.

Usamos o efeito de rolagem de sublinhado do link aqui no Offweb em nossos links.

Alterar a cor do link após a visita no WordPress

Outra coisa que você pode querer mudar é a cor do link depois que um usuário clica em um link. Isso pode ajudar os visitantes a navegar facilmente em seu blog do WordPress e ver em quais links eles já clicaram.

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

a:visited {
     color: #0000FF;
}

Certifique-se de mudar o azul #0000FF cor para a cor que você escolher.

É assim que todo o código CSS acima será exibido no personalizador do WordPress.

Código de personalização WordPress

Depois de fazer suas alterações, clique no botão “Publicar” para que sejam publicadas.

O código CSS acima mudará a cor de todos os links em seu site.

Se você deseja apenas personalizar os links encontrados em suas postagens e páginas, pode usar o exemplo de código abaixo.

.entry-content a {
     color: #FFA500;
}

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

.entry-content a:visited {
     color: #0000FF;
}

Este código faz o mesmo que os exemplos de código anteriores, mas .entry-content ele apenas direciona links dentro de seu conteúdo.

Leia Também:  Como criar um link curto no WordPress (a maneira mais fácil)

Altere a cor dos links de navegação no WordPress

Um último estilo de link que também pode ser personalizado são os links do menu de navegação.

Personalize os links do menu de navegação

Para obter mais detalhes, consulte nosso guia sobre como projetar menus de navegação do WordPress.

Se não quiser adicionar código diretamente ao seu tema WordPress, você pode usar um plugin CSS para adicionar código ao seu site.

Dessa forma, suas alterações de CSS serão aplicadas mesmo se você decidir alterar o tema do WordPress.

A primeira coisa a fazer é instalar e ativar o CSS e JS personalizados simples plugue. Para obter mais detalhes, verifique nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, basta ir para CSS e JS personalizados »Adicionar CSS personalizado no painel de administração do WordPress.

Aqui você pode adicionar o mesmo código CSS acima.

Adicionar código CSS personalizado com plugin

Assim que terminar de adicionar o código, certifique-se de clicar no botão ‘Publicar’ ou ‘Atualizar’.

Método 2. Altere a cor do link sem editar CSS

Se você não se sente confortável para editar arquivos CSS, este método é para você.

Em vez de adicionar o código CSS diretamente ao seu site, você pode usar um plug-in de estilo CSS para editar visualmente o seu site sem escrever nenhum código.

Recomendamos o uso do plugin CSS Hero. É muito amigável para iniciantes e permite que você personalize visualmente seu site de forma semelhante a um construtor de páginas de arrastar e soltar.

Assim que o plug-in estiver instalado, você precisa clicar no botão ‘Continuar com a ativação do produto’ acima da lista de plug-ins para ativá-lo e conectar sua conta.

Ativar CSS Hero

Isso o levará a uma tela onde você pode inserir seu nome de usuário e senha.

Tudo que você precisa fazer é seguir as instruções na tela e você retornará ao seu site depois que sua conta for verificada.

Leia Também:  Como criar um link curto no WordPress (a maneira mais fácil)

Em seguida, clique no botão ‘Personalizar com CSS Hero’ na parte superior da barra de ferramentas de administração do WordPress.

Personalize com CSS Hero

Isso abrirá seu site com CSS Hero rodando em cima dele. CSS Hero usa o que é chamado de editor O que você vê é o que você obtém (WYSIWYG).

Basta clicar em qualquer item da página e uma barra de ferramentas aparecerá permitindo que você faça personalizações.

Em seguida, clique em um dos links do seu site. Começaremos com um dos links da postagem do blog.

Clique no link do site

Depois disso, selecione o item de menu ‘Tipografia’ e você pode escolher uma nova cor para o seu link.

Você pode escolher uma nova cor da lista ou adicionar seu próprio código de cor.

Selecione a opção de fonte

Altere a cor do menu de navegação do WordPress

Você pode então alterar a cor dos links do menu de navegação do WordPress.

Passe o mouse sobre o menu de navegação e clique em um dos itens do menu.

Clique no link do menu de navegação

Em seguida, selecione a opção ‘Tipografia’ e você pode personalizar a cor diretamente abaixo.

Você notará que, ao alterar a cor do link do menu, as alterações são imediatamente exibidas na visualização.

Personalize a cor do menu CSS Hero

Assim que terminar de alterar as cores do link, você deve clicar no botão “Salvar e publicar” para que as alterações sejam ativadas.

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 escolher o melhor software de design de web ou nossa lista de plug-ins WordPress obrigatórios.

Se você gostou deste artigo, por favor, assine nosso Canal do Youtube para tutoriais em vídeo do WordPress. Você também pode nos encontrar em Twitter Y Facebook.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: