CSS em e-mail HTML
Este artigo fornece dicas básicas para usar CSS em e-mails HTML.
Realize seu trabalho de forma profissional
De treinamentos a marketing completo, nossa comunidade de parceiros pode ajudar você a fazer as coisas acontecerem.
Usar o CSS Inliner
Copie o URL do artigo
Copiado
Para obter os melhores resultados ao trabalhar com CSS no e-mail em HTML, mantenha o código simples e embutido no CSS. A ferramenta Automatic CSS Inliner do Mailchimp converte estilos do código colado para embutido, assim você não precisa programar manualmente.
Neste artigo, você aprenderá como ativar o Automatic CSS Inliner em um modelo Code Your Own (Programe você mesmo) e quais seletores são aceitos.
Ativar o Inliner
Para ativar o CSS Inliner, siga estas etapas.
- Na seção Content (Conteúdo) do Construtor de campanhas, clique em Design Email (Criar e-mail).
- Na etapa Template (Modelo), clique na guia Code Your Own (Programe você mesmo) e selecione Paste in code (Colar no código).
- Na etapa Design, cole seu código HTML.
- Clique na guia Settings (Configurações).
- Marque a caixa ao lado de Automatic CSS Inliner (CSS Inliner automático).
Seletores suportados pelo CSS Inliner
O Automatic CSS Inliner permite incluir um estilo CSS sofisticado no seu e-mail em HTML, incluindo atributos, pseudo-classes, descendentes e muito mais. Estes são os seletores aceitos pelo Inliner.
- nome da etiqueta
- classe
- tem atributo
- o valor do atributo é igual a
- o valor do atributo é um dos
- o valor do atributo contém
- valor do hífen do atributo
- o valor do atributo começa com
- o valor do atributo termina com
- primeiro filho de pseudo-classes
- último filho
- único filho
- vazio
- não
- enésimo filho
- filho
- descendente
- irmão
Depois de ativar o Inliner e o restante do seu código estiver pronto, continue configurando sua campanha.
Nota
- Quando você habilitar a opção Inliner, a alteração no código não será imediatamente visível. Depois que a sua mensagem for enviada para a fila, os estilos serão convertidos antes que ela seja entregue para o seu público. No entanto, quando você habilitar o Inliner, será possível visualizar a campanha em um visualizador lado a lado. Lá, você poderá verificar se as alterações não terão nenhum efeito indesejado antes de enviar.
- O Inliner não corrige problemas de compatibilidade de CSS, apenas os que são seguros para uso em e-mails em massa em primeiro lugar. Por exemplo, você não deve usar marcas DIV para posicionar o seu conteúdo.
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.
Relacionados
Sobre e-mails em HTML
Saiba sobre e-mails em HTML e obtenha dicas sobre como criar seu e-mail em HTML.