Usar o criador de campanhas HTML personalizado

Com a ActiveCampaign, você pode criar uma campanha que usa código HTML personalizado. Esta opção é melhor para aqueles que querem mais controle sobre seu design de email e estão confortáveis em usar HTML.

Neste artigo, você aprenderá como acessar o construtor de HTML e receber orientação sobre as melhores práticas de design.

Observação

Nossa equipe de Experiência do Cliente não pode solucionar problemas de código HTML personalizado

Criar uma campanha HTML personalizada

1. Acesse Campanhas e clique em "Criar uma campanha".
2. Na página Tipo de campanha:
   • Insira um nome para sua campanha
   • Selecione o tipo de campanha
   • Clique no botão "Avançar".
3. Na página Resumo da campanha, insira os detalhes da sua campanha. Observe que você pode pular esta etapa e começar a criar seu design. No entanto, você precisará fornecer detalhes da campanha antes de enviar seu email.
4. Clique na seta para baixo ao lado do botão "Criar com editor de emails". Selecione "Construtor de HTML".
5. Selecione um modelo (se aplicável) ou clique no botão "Começar do zero".
6. O construtor HTML será aberto. Adicione seu HTML personalizado ao construtor à esquerda. À medida que você adiciona código, você o verá renderizar na tela de visualização no painel direito.
7. 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 quer adicionar. Em seguida, siga as instruções para adicionar esse item.
8. Para mudar para o Editor Visual, clique no ícone do editor visual.
   
   
   
   
9. Clique no ícone Configuração (engrenagem) para atualizar sua linha de assunto, adicionar/atualizar texto de pré-cabeçalho, atualizar suas informações "De" e "Responder a" e testar seu email.
10. Clique no botão "Avançar". Você será redirecionado para a página "Resumo da campanha".
11. Uma vez que tudo parece bom, você pode clicar em "Enviar agora" para enviar a campanha, clique no botão "Agendar" para enviar em uma data e hora posteriores ou clique em "Salvar e sair" para voltar à campanha mais tarde.

Orientação de design de HTML

Abaixo está a orientação geral para o uso do construtor de HTML. Como lembrete, nossa equipe de Equipe de Experiência do Cliente não pode solucionar problemas ou criar qualquer código para o seu email.

Layout

• 650px ou menos de largura de design
  A regra geral para o tamanho do email é mantê-lo com 650px 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 melhores
  Com o design de email, simples é melhor. Se você tentar fazer um design complicado, encontrará muitos testes e depuração com problemas de cliente de email. Se você quiser concluir um design mais avançado, esteja pronto para usar muitas tabelas e reserve uma quantidade razoável de tempo para o teste.
• Usar tabelas HTML básicas 
  Você precisará usar tabelas HTML padrão para criar o layout geral. As técnicas de layout e flutuante CSS não serão renderizadas corretamente em todos os clientes de email.
• Tenha cuidado com o padding da célula 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. Seria melhor se você tentasse 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. (Mais informações)
• Evite usar colspans="" em suas tabelas
  Alguns clientes de email não oferecem suporte total a 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 integrado em seu HTML. 
• Não use classes CSS - sempre use CSS integrado 
  Muitos clientes de email não oferecem suporte a classes CSS. Em vez de declarar classes CSS, você deve usar CSS integrado. Um exemplo seria
  content
  em vez de
  content
   
• Não use atalhos CSS
  O CSS permite que você defina propriedades em grupos normalmente. Como style=" font: 12px, Arial" Em vez de agrupar esses atributos, você deve definir cada parte individualmente. Como style="font-size:12px; família de fontes:Arial"
• Evite usar opções de flutuação ou posição CSS
  Alguns clientes de email desconsiderarão as opçõesde flutuação e posição CSS. Em vez disso, tente usar tabelas.

Imagens e vídeo

• Usar URLs de origem de imagem absoluta 
  Em vez de incluir uma imagem como (), você deve incluir a URL absoluta no arquivo, como () 
• Sempre use tags alternativas () 
  A maioria dos clientes de email desabilita imagens por padrão. A menos que você tenha tags alternativas, seus inscritos verão apenas uma caixa em branco. Com uma tag alt, seus inscritos verão o texto que você colocou na tag. 
• Não incorporar vídeos ou Flash
  Incorporar vídeos diretamente ou piscar em seu email não é uma boa ideia. Muitos clientes de email não suportarão esse código, e muitos programas de detecção de spam e vírus sinalizarão seu email como spam / malicioso. Em vez de incorporar seu vídeo ou flash em seu email, faça uma captura de tela de como é o vídeo do flash player e incorpore-o. Você pode ter o vídeo ou flash aberto em seu navegador quando eles clicam nele. 
• GIFs animados não são totalmente suportados
  Pergunte a si mesmo se você precisa de uma animação em seu email. Enquanto a maioria dos clientes de email oferece suporte a GIFs animados, o Outlook 2007 não. Os clientes de email que não oferecem suporte a GIFs animados provavelmente mostrarão o primeiro quadro da sequência de animação. 
• Tenha cuidado com imagens editadas
  Se você tiver uma imagem muito editada e colocar em seu HTML usando células de tabela ou tags img uma ao lado da outra, você precisará testar por completo. Alguns clientes de email podem adicionar espaço extra entre suas imagens e fazer com que seu email pareça ruim.
• Evite usar imagens para ajudar com seu layout Algumas pessoas usam imagens de 1 ou 2 pixels para ajudar a alinhar itens em seu layout
  . Alguns clientes de email ou filtros pensarão que é uma potencial imagem de rastreamento de leitura ou abertura e penalizarão o email.
• Teste seu email com imagens desativadas
  Como a maioria dos clientes de email mostra emails com imagens desativadas por padrão, você deve verificar a aparência do seu email com as imagens desativadas.
• Observe os tamanhos dos seus arquivos
  Assim como acontece com o web design tradicional, você quer estar ciente dos tamanhos dos arquivos de imagem para o seu email. Por favor, tente mantê-los baixos para se certificar de que eles vão baixar rapidamente para seus inscritos.

Fundo

• As imagens de plano de fundo não são totalmente suportadas
  Se você usar uma imagem de plano de fundo, lembre-se de que alguns clientes de email não as mostrarão. Se você ainda quer usar uma imagem de plano de fundo, use as opções de plano de fundo HTML em vez de usar CSS para declarar um plano de fundo.
• Cores de fundo de corpo inteiro 
  Muitos clientes de email (como o Gmail) não mostram uma cor de plano de fundo definida para o corpo principal (tag ). Se você estiver definindo uma cor de plano de fundo na tag body, também deverá ter uma div de encapsulamento com uma cor de plano de fundo que envolva seu conteúdo. Dessa forma, mesmo que a cor de fundo do corpo não seja suportada, você terá algo semelhante.

Diverso

• Não coloque nada acima da tag aberta
  Os itens colocados acima da tag body provavelmente serão descartados.
• Não inclua javascript
  É provável que seja removido na maioria dos clientes de email. Os filtros de spam podem detectá-lo como código malicioso.
• Evite o Microsoft Office
  O HTML gerado quase garantirá problemas. Além disso, quando você copia e cola do Office, você estará colando em sua formatação e provavelmente terá problemas de design.