Com a ActiveCampaign, você pode criar uma campanha que usa código HTML personalizado. Essa opção é melhor para quem quer ter mais controle sobre o design do email e para quem sabe usar o HTML.
Neste artigo, você aprenderá a acessar o criador de HTML e receberá orientações sobre as práticas recomendadas de design.
Você sabia que o novo Editor de emails permite alternar facilmente entre seu HTML/CSS e a funcionalidade de arrastar e soltar? Saiba como usar o HTML com o editor de emails.
Observação
Nossa equipe de experiência do cliente não pode ajudar a solucionar problemas de código HTML personalizado
Criar uma campanha HTML personalizada
- Vá para Campanhas e clique em "Criar uma campanha".
- Na página Tipo de campanha:
- Forneça um nome para a campanha
- Selecione o tipo de campanha
- Clique no botão "Avançar"
- Na página Resumo da campanha, forneça os detalhes da campanha Observe que você pode pular essa etapa e começar a criar seu design. No entanto, será necessário fornecer os detalhes da campanha antes de enviar o email.
- Clique na seta para baixo ao lado do botão "Criar com o editor de emails". Selecione "Criador de HTML".
- Selecione um modelo (se aplicável) ou clique no botão "Começar do zero".
- O criador de HTML será aberto. Adicione seu HTML personalizado ao criador à esquerda. Ao adicionar o código, você o verá renderizado na tela de visualização no painel direito.
- Para inserir conteúdo personalizado, conteúdo condicional, uma imagem, um feed RSS ou conteúdo de uma URL, clique na opção "Inserir" e selecione o item que você quer adicionar. Em seguida, siga as instruções para adicionar esse item.
- Para alternar para o Editor visual, clique no ícone do editor visual.
- Clique no ícone de Configuração (engrenagem) para atualizar o assunto, adicionar/atualizar o texto do pré-cabeçalho, atualizar suas informações "De" e "Responder a" e testar seu email.
- Clique no botão "Avançar". Você será redirecionado de volta para a página Resumo da campanha.
- Quando tudo estiver certo, você pode clicar em "Enviar agora" para enviar a campanha, clicar no botão "Agendar" para enviar em uma data e hora posteriores ou clicar em "Salvar e sair" para voltar à campanha mais tarde.
Orientação de design de HTML
Abaixo estão as orientações gerais para usar o criador de HTML. Lembre-se de que nossa equipe de experiência do cliente não pode ajudar a solucionar problemas ou criar códigos para o seu email.
Layout
-
650 px ou menos de largura de design
A regra geral para o tamanho do email é o manter com 650 px ou menos de largura. Isso permite que o email seja exibido corretamente na maioria dos clientes e configurações de email. -
Layouts simples são os melhores
Para edição de emails, quanto mais simples, melhor. Se você tentar fazer um design complicado, terá que fazer muitos testes e depurar problemas com o cliente de email. Para fazer um design mais avançado, será necessário usar muitas tabelas e reservar uma quantidade considerável de tempo para testes. -
Usar tabelas HTML básicas
Será necessário usar tabelas HTML padrão para criar o layout geral. As técnicas de layout e flutuação CSS não serão renderizadas corretamente em todos os clientes de email. -
Cuidado com o padding das células da tabela
O Outlook aplicará o padding de qualquer célula em uma linha a todas as células da linha. Isso pode resultar em algumas alterações visuais que você não quer. O melhor seria aplicar o mesmo padding para todas as células em uma linha ou colocar uma div ou tabela interna (que tenha padding) dentro da célula que você gostaria que tivesse padding (mais informações). -
Evite usar colspans="" em suas tabelas
Alguns clientes de email não oferecem suporte completo para colspans e outros podem ter problemas de exibição para as outras células.
CSS
-
Não use folhas de estilo externas
Elas só funcionarão em alguns clientes de email, e você deve incluir todo o seu CSS usando CSS em linha no HTML. -
Não use classes de CSS; sempre use CSS em linha
Muitos clientes de email não oferecem suporte para classes de CSS. Em vez de declarar classes de CSS, você deve usar CSS em linha. Um exemplo seria <div style="color:#cccccc;">content</div> instead of <div class="cssclassa">content</div> -
Não use atalhos de CSS
CSS permite que você defina propriedades em grupos normalmente. Por exemplo, style=" font: 12px, Arial". Em vez de agrupar esses atributos, você deve definir cada parte individualmente. Por exemplo, style="font-size:12px; font-family:Arial" -
Evite usar as opções de flutuação ou posição de CSS
Alguns clientes de email desconsideram as opções de flutuação e posição de CSS. Em vez disso, use tabelas.
Imagens e vídeos
-
Usar URLs de origem de imagem absolutos
Em vez de incluir uma imagem, como (<img src= "img.gif">), você deve incluir a URL absoluta do arquivo, como (<img src= "http://site.com/img.gif">) -
Sempre use tags de texto alternativo (<img src="http://site.com/img.gif" alt="Company ABC">)
A maioria dos clientes de email desabilita as imagens por padrão. A menos que você tenha tags de texto alternativo, os inscritos verão apenas uma caixa em branco. Com a tag, os inscritos verão o texto que você colocou na tag. -
Não incorpore vídeos ou flash
Incorporar vídeos ou flash diretamente no email não é uma boa ideia. Muitos clientes de email não oferecem suporte a esse código, e muitos programas de detecção de vírus e de spam sinalizarão o email como spam/malicioso. Em vez de incorporar o vídeo ou o flash no email, faça uma captura de tela da aparência do vídeo ou do flash player e a incorpore. Você pode fazer com que o vídeo ou o flash seja aberto no navegador dos usuários após clicarem nele. -
GIFs animados não são totalmente compatíveis
Reflita se é mesmo necessário ter uma animação em seu email. Embora a maioria dos clientes de email ofereça suporte a GIFs animados, o Outlook 2007 não oferece. Os clientes de email que não oferecem suporte a GIFs animados provavelmente mostrarão o primeiro quadro de sua sequência de animação. -
Tenha cuidado com imagens emendadas
Se uma imagem maior emendada for colocada no HTML usando células de tabela ou tags img uma ao lado da outra, será necessário fazer um teste completo. Alguns clientes de email podem adicionar espaço extra entre as imagens e fazer com que o email tenha uma aparência ruim. -
Evite usar imagens para ajudar em seu layout
Algumas pessoas usam imagens de 1 ou 2 pixels para ajudar a alinhar os itens em seu layout. Alguns clientes ou filtros de email pensarão que se trata de uma possível imagem de rastreamento de leitura ou abertura e penalizarão o email. -
Teste seu email com as imagens desativadas
Como a maioria dos clientes mostra emails com imagens desativadas por padrão, você deve verificar a aparência do email com as imagens desativadas. -
Cuidado com o tamanho dos arquivos
Assim como no design tradicional da Web, você deve estar ciente do tamanho dos arquivos de imagem para o email. Use tamanhos pequenos para garantir que os arquivos sejam baixados rapidamente para os inscritos.
Fundo
-
As imagens de fundo não são totalmente compatíveis
Se você usar uma imagem de fundo, considere que alguns clientes de email não as exibirão. Se você ainda quiser usar uma imagem de fundo, use as opções de fundo do HTML em vez de usar CSS para definir um fundo. -
Cores de fundo do corpo inteiro
Muitos clientes de email (como o Gmail) não mostram uma cor de fundo que você definiu para o corpo principal (tag <body>). Se estiver definindo uma cor de fundo na tag body, você também deverá ter uma div de wrapping com uma cor de fundo que envolva o conteúdo. Dessa forma, mesmo que a cor de fundo do corpo não seja compatível, você terá algo semelhante.
Diversos
-
Não coloque nada acima da tag de abertura <body>
Qualquer coisa que você colocar acima da tag body provavelmente será removida e não será usada. -
Não inclua javascript
É provável que ele seja removido na maioria dos clientes de email e detectado como código malicioso pelos filtros de spam. -
Evite o Microsoft Office
É quase garantido que o HTML gerado terá problemas. Além disso, ao copiar e colar do Office, você estará colando a formatação e provavelmente terá problemas de design.