Como formatar os links do seu e-mail marketing

Muitas vezes os links em azul (padrão) acabam com o layout de seu template, certo? Bom, com CSS é possível formatar os links e deixá-lo como deseja.

Você precisa entender pelo menos o básico de HTML, ok?

Geralmente os links ficam com essa aparência:

Link padrão

<a href="#">O link padrão</a>

Vamos aprender a deixar com a cor e o efeito que deseja, por exemplo:

Link personalizado

<a style="color: #ffffff;" href="#"><span style="color: #ffffff;">O link como deseja</span></a>


No código fonte de seu template, encontre as tags <a> que correspondem aos links e com o uso de CSS e das propriedades color e text-decoration, vamos deixá-los da forma que deseja.

Como pode ver, no exemplo acima, eu defini a cor branca para meu link.

Por que a tag definir a cor na tag <a> se já definimos na tag <font>?
Em alguns clientes de e-mail se definir apenas a cor na tag <font> todo o texto do link ficará com a cor que deseja, mas o sublinhado do link ficará em azul, como no exemplo abaixo:

Link sublinhado azul

Por esse motivo é importante definir tanto no style da tag <a> quanto na tag <font> ou <span>.

Por que não definir somente no style da tag <a> então?
Alguns clientes de e-mail não irão renderizar sua mensagem corretamente e seu link não ficará da forma que deseja. No caso é melhor colocar os dois, ok?

O que posso fazer em meus links?
Como sabe, não dá pra fazer tudo que se faz em um site no e-mail marketing, pois os clientes de e-mail não irão renderizar corretamente, mas até aí tudo bem, pois nem o IE, que é um navegador, renderiza os sites corretamente, por que seria fácil nos clientes de e-mail, não é mesmo?

Você pode deixar seu link mais bonito ou condizente com seu template, pelo menos, mudando a cor do texto, tirando o sublinhado do link, mudando o tipo de fonte, cor do fundo do link e outros… você pode testar.

Mudar a cor da fonte:

<a style="”color: #FF6600”;" href="”#”">link</a>

Tirar o sublinhado:

<a style="text-decoration: none;" href="#">link</a>

Você pode definir outros valores para a propriedade text-decoration, como, blink, linethrough e overline.

Cor do fundo do link:

<a style="background-color: #0066ff;" href="#">link</a>

Mudar tipo de fonte do link:

<a style="font-family: Verdana, Arial, Georgia;" href="#">link</a>

Cuidado ao definir fontes diferentes das padrões, como Arial, Times New Roman, Verdana, etc., pois os destinatários podem não ter a fonte instalada, ok?

Outras propriedades:
Você pode testar outras propriedades, mas tenha em mente que em um ou outro cliente de e-mail não irá funcionar.

Com essas informações agora você pode deixar os links de seu template mais bonitos.

Abraços e até a próxima!

Avalie este artigo:
ATUALIZAÇÕES GRÁTIS
Faça como os 12,610 leitores. Cadastre-se grátis!

Gostou? Compartilhe:

Ademir Diniz

Analista de Sistemas formado pelo ISES, especialista em E-mail Marketing e criador e mantenedor do blog sobre e-mail marketing www.EmailMarketing.eti.br

Deixe seu comentário!