Ir para conteúdo principal

Realize seu trabalho de forma profissional

De treinamentos a marketing completo, nossa comunidade de parceiros pode ajudar você a fazer as coisas acontecerem.

Contrate profissionalmente

CSS em e-mail HTML

Copie o URL do artigo
Copiado

Nota

As informações neste artigo se aplicam apenas ao criador clássico. Para saber como usar o novo criador, confira Criar um e-mail no novo criador.

O CSS funciona em e-mails HTML, mas de forma limitada. Em geral, um CSS bem simples será sempre melhor para o código dos e-mails.

Abaixo, você encontra as nossas recomendações de como usar o CSS em e-mails HTML e algumas informações para ajudar a solucionar problemas relacionados ao CSS.

Dicas gerais e solução de problemas de CSS

Abaixo você encontra algumas orientações gerais para ajudá-lo a obter os melhores resultados com os códigos CSS das suas campanhas. Lembre-se que, embora o CSS funcione com e-mails HTML, ele é mais imprevisível.

  • Programe um código simples.
    O código para e-mails HTML é diferente do código de um website. Quanto mais simples o código, menor a chance de errar.
  • Use CSS apenas para elementos gerais de estilo.
    Você vai obter resultados melhores se usar CSS para elementos gerais, como fontes ou cores.
  • Use CSS embutido
    Como os aplicativos de e-mail baseados no navegador como o Gmail retiram as marcas e por padrão, use sempre CSS embutido em vez de CSS incorporado.

Transforme o CSS incorporado em embutido

É altamente recomendável que você aproveite a nossa ferramenta CSS Inliner para ajudar a embutir automaticamente o seu CSS incorporado.

Se decidir embutir manualmente o seu CSS, as cores de plano de fundo ou configurações de devem ser tratadas com wrapper

de 100% de largura em torno do e-mail.

O seu CSS deve ficar como o do exemplo a seguir.

<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #BBBBBB;">

 seu conteúdo aqui...

 </span>

Nota

Às vezes, o serviço de e-mail de um assinante pode retirar as linhas de código iniciadas com pontos, o que pode arruinar o seu CSS. Se você estiver inserindo o CSS manualmente, adicione um espaço no início de todas as linhas iniciadas por um ponto.

Servicio técnico

Está com alguma dúvida?

Os usuários de planos pagos podem fazer login para acessar o suporte via e-mail e chat.

Este artigo foi útil?

Relacionados

Usar o CSS Inliner

O CSS Inliner do Mailchimp converte o estilo colado em CSS embutido, poupando o seu tempo. Aprenda a ativar o CSS Inliner e os seletores de CSS compatíveis.

Limitações dos e-mails em HTML

Programar um e-mail em HTML não é muito diferente de como era programar um site no fim da década de 90. Saiba mais sobre as limitações dos e-mail e como evitá-las.