Como criar modelos personalizados do Mailchimp que realmente funcionam perfeitamente

Publicados: 2021-06-22

Codificar cada e-mail do zero leva muito tempo, portanto, ter um modelo de e-mail reutilizável e testado e aprovado pode fazer maravilhas para a eficiência do seu fluxo de trabalho. Mas construir seu próprio modelo também pode ser uma aventura por si só - até mesmo para Mailchimp, o segundo provedor de serviço de e-mail (ESP) mais popular, de acordo com nosso relatório State of Email Service Providers.

Você pode ter uma maneira preferida de desenvolver e-mails, mas quando se trata de modelos personalizados para Mailchimp, é importante seguir algumas diretrizes muito específicas para garantir que você não perca horas fazendo seu modelo funcionar. E digo isto depois de eu próprio ter perdido muitas horas!

Enquanto eu o conduzo pela criação de um modelo personalizado do Mailchimp, esteja ciente de que a maneira como você estrutura o código, como você cria botões e até mesmo o tamanho de suas imagens, todos precisam ser tratados com um ponto de vista técnico do Mailchimp.

É por isso que colaboramos com Mailchimp e outros especialistas nesta postagem do blog para garantir que seus modelos Mailchimp funcionem perfeitamente.

A diferença entre os modelos pré-construídos do Mailchimp e os modelos personalizados

Mailchimp tem uma biblioteca substancial de modelos que você pode usar para criar e-mails. Cada um deles é editável em um editor de arrastar e soltar e vários módulos de e-mail para escolher para definir o seu conteúdo.

Então, por que criar um modelo personalizado?

Os modelos do Mailchimp são altamente editáveis para que qualquer marca possa usá-los com suas próprias cores e estilos. Isso pode tornar um desafio monitorar seu uso e para que a identidade de uma marca permaneça consistente de e-mail para e-mail. A criação de um modelo personalizado garante que muitos dos estilos que você constrói no modelo não sejam alterados.

Além disso, o ambiente de edição para modelos personalizados é diferente. Não há editor de arrastar e soltar. Em vez disso, crie módulos e elementos que podem ser duplicados, trocados ou removidos, dependendo da linguagem do modelo que você implementar. Essa é outra maneira de se proteger contra layouts e edições indesejados.

Como codificar um modelo Mailchimp personalizado

Pronto para criar seu próprio modelo de email Mailchimp? Continue lendo para obter dicas e truques de que você precisa para fazer isso da maneira certa.

Pense em seus objetivos e usuários finais

Antes de começar, é importante primeiro pensar sobre o objetivo do modelo e as pessoas que o usarão. Por exemplo, você pode precisar de um modelo com muitos detalhes e flexibilidade. Ou pode precisar ser simples e fácil para membros menos técnicos de sua equipe adotarem.

Joolz Joseph, consultor de marketing por e-mail e motivador de marketing, diz:

Joolz joseph

“Pergunte a si mesmo 'O que estamos tentando alcançar com isso?'

É um modelo abrangente que pode ser usado para vários tipos de e-mail, portanto, precisa de muita flexibilidade com diferentes bloqueios? Ou algo mais rígido, como um modelo promocional, uma série de integração ou um boletim informativo?

Há uma grande vantagem em um modelo com muitos blocos que podem ser adaptados, mas às vezes 2 ou 3 modelos mais curtos são mais fáceis de gerenciar para pessoas que podem estar sobrecarregadas com muitas opções.

Essa breve consideração no início permite que você crie seu modelo com o objetivo e o usuário final em mente.

Por exemplo, um modelo promocional precisa ser focado no objetivo principal e na frase de chamariz (CTA), enquanto um boletim informativo pode ter vários CTAs, todos diferentes.

Tudo isso precisa ser refletido no design do seu modelo. Isso também tornará mais fácil para alguém que está executando uma promoção incluir conteúdo relevante se suas opções forem limitadas!

Fazer um único modelo que captura todas as possibilidades pode resultar em um e-mail que está na marca, mas não tão eficaz quanto poderia ser, por isso vale a pena dar um passo atrás primeiro e olhar o que você deseja alcançar e que tipo de modelo (ou modelos) irá ajudá-lo da melhor maneira ”.

Obrigado, Joolz, pela dica! Depois de conhecer os objetivos do seu modelo, você pode começar a construir.

Incorpore seu estilo CSS

Uma das primeiras coisas que vale a pena mencionar é que o Mailchimp alinha seus estilos CSS incorporados automaticamente quando você salva seu modelo na plataforma. Assim, ao iniciar o trabalho de desenvolvimento, você pode achar mais fácil incorporar todos os seus estilos e limitar o inchaço do código.

Crie linhas de módulos

Conforme você estrutura seu código, pense nos blocos que gostaria que fossem editáveis, especialmente aqueles que deseja poder reordenar. Esses blocos devem ficar dentro de linhas, por exemplo:

<!--modules that can be re-ordered-->
<!--module 1-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 1-->
<!--module 2-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 2-->

Depois de fechar a tabela pai, você não poderá reordenar suas linhas após este ponto.

Considere as limitações do botão

Existem muitas maneiras de codificar um botão. No entanto, é apenas o botão preenchido que funcionará em seu modelo personalizado do Mailchimp. Isso ocorre porque muitos estilos aplicados às marcas âncora dos botões editáveis são removidos automaticamente. O formato do código VML e quaisquer extensões que você colocar em sua tag âncora também podem ser ajustados.

O método de botão preenchido significa que apenas o texto do botão será clicável, pois você precisa aplicar o preenchimento e outro estilo de botão a uma célula da tabela pai. A extensa documentação do Mailchimp fornece mais detalhes sobre o código do botão (e outras limitações de e-mail HTML, se você estiver curioso).

Use imagens de tamanho exato para marcadores de posição editáveis

Assim como os botões, as imagens perdem um pouco de código quando são editadas. Desta vez, são os atributos HTML que definem a largura e a altura que são removidos. O Outlook depende deles, e o ambiente de edição do Mailchimp também renderizará o tamanho real da imagem até que você coloque esses atributos de volta no editor.

Isso torna um pouco complicado usar imagens de retina, também conhecidas como imagens com o dobro do tamanho, para serem reduzidas no e-mail.

Eu recomendo o uso de imagens 1x para quaisquer marcadores de posição que você codificar em seu modelo. Então, quando o modelo for usado para uma campanha, troque o seu placeholder por uma imagem 2x (imagem retina), definindo a largura e a altura na guia de configurações do editor de imagens.

Aplicar a linguagem de template do Mailchimp

Para definir áreas editáveis em seu modelo, você precisa implementar a linguagem de modelo do Mailchimp. Há uma ampla documentação disponível que descreve as coisas que você precisa incluir, dependendo do tipo de modelo que você criar.

Para modelos altamente personalizáveis que podem ser usados por várias marcas, você pode tornar os estilos CSS editáveis. Para fazer isso, siga o guia do Mailchimp sobre estilos editáveis.

Para os fins deste passo a passo, veremos como criar um modelo que limita a capacidade de edição apenas ao conteúdo. E para fazer isso, precisamos adicionar a seguinte linguagem aos elementos HTML no modelo:

mc: edit é usado para fornecer uma ação de edição de conteúdo para um elemento específico em um modelo. Certifique-se de usar um nome exclusivo para cada instância em seu modelo.

mc: hideable é usado para fornecer uma ação ocultar / mostrar para um elemento específico dentro de um modelo.

mc: label é uma tag opcional usada para nomear uma seção editável dentro do aplicativo.

mc: repeatable é usado para fornecer uma ação de duplicação para um elemento específico dentro de um modelo.

mc: variant é usado para fornecer uma maneira de alternar entre blocos discretos de HTML.

Para obter informações mais detalhadas sobre a linguagem de modelo do Mailchimp, este é o meu documento preferido.

Incluir tags de mesclagem Mailchimp

Existem muitas tags de mesclagem que você pode utilizar em modelos e campanhas. As tags que recomendo aplicar são:

* | MC_PREVIEW_TEXT | *
Adicione esta tag de mesclagem de texto de visualização à sua construção para garantir que, durante a configuração da campanha, o conteúdo adicionado ao campo de texto de visualização seja injetado no e-mail. O hack de texto de visualização que geralmente adicionamos aos emails Litmus para criar espaços em branco depois que nosso texto de visualização não funciona no Mailchimp. Não temas. Mailchimp documentou a maneira ideal de fazer isso para modelos personalizados.

* | UNSUB | *
No cabeçalho e / ou rodapé do seu modelo, adicione esta tag de mesclagem ao seu link de cancelamento de inscrição para garantir que as pessoas possam sair da sua lista, se assim o desejarem. Além disso, é um requisito legal, então você definitivamente não quer se esquecer disso.

* | UPDATE_PROFILE | *
Dê aos assinantes a oportunidade de atualizar suas informações ou gerenciar suas preferências.

* | ARQUIVO | *
Adicione esta tag de mesclagem a um link 'visualizar online' para oferecer às pessoas a oportunidade de visualizar seu e-mail em seus navegadores da web.

Como adicionar seu modelo ao Mailchimp

Agora que codificou seu modelo, você está pronto para colocá-lo para funcionar.

Vá para 'Campanhas> Modelos de e-mail' e clique no botão 'Criar modelo' para importar o seu modelo.

A maneira mais fácil de trazer seu modelo para o Mailchimp é enviar um zip contendo seu HTML e imagens, pois o Mailchimp gerenciará os caminhos das imagens para você.

Mailchimp: selecione um ponto de partida para o seu modelo

Depois de nomear o modelo e navegar até o arquivo zip, o modelo será aberto no editor de modelos. Aqui, você pode fazer ajustes, acessar o estúdio de conteúdo, onde as imagens e outros ativos são armazenados, e testar a renderização do modelo.

Quando terminar neste editor, você pode salvar e fechar, e seu modelo está pronto para uso.

Certifique-se de que seu modelo funciona no Mailchimp

Existem muitos erros comuns de HTML, então é uma boa ideia ver como é a experiência de edição no Mailchimp antes de enviá-lo para sua equipe, clientes ou outras pessoas. Para fazer isso, vá para 'Criar' no menu principal, selecione 'e-mail' e continue com uma 'campanha normal'.

Você pode adicionar alguns detalhes da campanha, como uma linha de assunto e um texto de visualização. Isso lhe dará a oportunidade de verificar se sua tag de mesclagem e o código de texto de visualização foram implementados corretamente.

Ao clicar em 'Design e-mail', você poderá selecionar o modelo que deseja usar. Encontre seu modelo personalizado na guia 'Modelos salvos'.

Selecione um modelo no Mailchimp

Depois de selecionar seu modelo, você será levado ao ambiente de edição do Mailchimp, onde poderá testar todas as suas seções editáveis.

Para editar um elemento editável, basta clicar nele e um painel de edição aparecerá no lado direito.

Editando um elemento em seu modelo Mailchimp

Algo a se observar : às vezes, reorganizar meus blocos de conteúdo não funciona, então se você não conseguir ver o ícone com uma seta para cima e para baixo ao clicar em um bloco, tente duplicar o bloco que deseja reordenar. Você pode excluir o bloco extra indesejado depois de arrastar o bloco que deseja mover para seu novo local.

Reorganizando blocos em seu modelo Mailchimp

Não se esqueça de testar a renderização de e-mail

Como sempre, é muito importante ver como diferentes clientes de e-mail estão processando seu modelo, especialmente depois que ele foi usado para criar uma campanha de e-mail.

É por meio desses testes que identifiquei problemas com meus modelos e descobri algumas das peculiaridades de remoção de código do Mailchimp. Você pode testar facilmente os editores de campanha e de modelo acessando 'Visualizar' e 'Enviar um e-mail de teste' para sua caixa de entrada ou seu endereço de teste Litmus para testes completos e automatizados de pré-envio.

Litmus e Mailchimp também se integram de várias maneiras para ajudá-lo a testar seus e-mails da maneira mais completa e eficiente possível. Vá para 'Entrar no modo de visualização' e selecione a guia 'Caixa de entrada' para executar o teste de e-mail baseado no Litmus nas visualizações da caixa de entrada no Mailchimp. Com um plano Litmus Plus ou Enterprise, você ganha acesso a testes adicionais e integrações que economizam tempo, incluindo a capacidade de testar elementos pré-envio cruciais conforme você constrói com a extensão Litmus no Chrome e sincroniza e-mails entre Litmus e Mailchimp.

Obtenha modelos personalizados prontos para uso

Se você estiver procurando por modelos editáveis do Mailchimp que você possa usar imediatamente, estamos sempre à sua disposição.

Modelo gratuito do Mailchimp desenvolvido para Litmus

Para ajudá-lo a começar, criamos um modelo personalizado Mailchimp otimizado para o modo escuro. Possui linhas repetíveis, um bloco de conteúdo variável e um botão amigável ao Mailchimp.

Baixe nosso template Mailchimp →

modelo de email Mailchimp grátis por Litmus

Pegue o seu template gratuito do Mailchimp criado pelo Litmus (arquivo .zip). Em seguida, explore o código para ver como aplicamos o código de modelo do Mailchimp para fazer uma versão mini de nossos modelos de e-mail gratuitos do Amor do assinante editável no Mailchimp.

Modelos de e-mail criados por parceiros Mailchimp

Para ainda mais opções, verifique o Mailchimp Marketplace com lindos modelos de e-mail desenvolvidos por Mailchimp Service Partners.

Modelos Mailchimp no Mailchimp Marketplace

Você pode pesquisar modelos de e-mail com base em seu objetivo de marketing, seja para atrair novos assinantes ou para promover um novo produto. Selecione e adquira o modelo perfeito para você e comece a personalizá-lo para combinar com sua marca. Nenhuma instalação ou codificação necessária.

Seu modelo Mailchimp personalizado perfeito está ao seu alcance

Quer você codifique seu próprio modelo editável ou personalize o de outra pessoa, você está no caminho certo para um processo de criação de e-mail mais eficiente - e em que pode confiar para criar e-mails da marca sem erros.

gráfico de e-mail com uma marca de seleção verde e um rosto sorridente

Certifique-se de que seu modelo Mailchimp esteja ótimo

Visualize seus e-mails em mais de 90 clientes de e-mail, aplicativos e dispositivos com Litmus para garantir uma experiência do assinante livre de erros e na marca. Toda vez.

Faça uma avaliação gratuita do Litmus →