Introdução à linguagem de modelos de e-mail do Mailchimp
Use a linguagem de modelos do Mailchimp para criar o seu próprio modelo de e-mail. Aprenda a criar seções, usar etiquetas de mesclagem, testar o seu modelo e muito mais.
Realize seu trabalho de forma profissional
De treinamentos a marketing completo, nossa comunidade de parceiros pode ajudar você a fazer as coisas acontecerem.
Nota
As opções de modelo neste artigo estão disponíveis apenas para o Criador Clássico de e-mail. Para saber mais sobre modelos no Novo Criador de e-mails, confira Criar um e-mail no Novo Criador.
Ao codificar modelos personalizados com a linguagem de modelos do Mailchimp, use nossas convenções de nomes recomendadas para identificar quais áreas do seu modelo você gostaria de ser editável na seção Design do Construtor de campanhas. Recomendamos limitar o número de espaços editáveis para manter seu código limpo. É importante criar um nome exclusivo para cada valor de atributo e ser consistente para que você não perca seu conteúdo caso alterne modelos ao criar suas campanhas.
O formato geral do atributo para criar áreas de conteúdo editável é: mc:edit="section"
Crie valores de atributo exclusivos e adicione aos elementos cujo conteúdo deve ser editável. Esta seção contém nomes de código de algumas áreas de conteúdo comuns que você pode incluir no código do seu modelo:
No exemplo a seguir, uma seção do corpo editável é criada usando o atributo mc:edit="body".
<td class="defaultText" mc:edit="body">
<h2 class="title">Título principal</h2>
<p>Cópia de amostra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis.</p>
<h3 class="subTitle">Subtítulo</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</td>
Para criar áreas de imagem editáveis, adicione o atributo a um elemento de imagem. Evite criar imagens editáveis em áreas de conteúdo editável para manter seu código limpo.
No exemplo a seguir, o atributo é adicionado a um elemento de imagem.
<img mc:edit="postcard" style="max-width:600px;" />
Adicione o atributo mc:allowtext ao elemento de imagem da sua imagem de cabeçalho para permitir a inserção de texto em vez de uma imagem.
No exemplo a seguir, o atributo é adicionado a um elemento de imagem que é tornado editável com o atributo mc:edit="section".
<img mc:edit="header_image" mc:allowdesigner mc:allowtext />
Adicione o atributo mc:repeatable a qualquer área que inclua um atributo mc:edit para criar um bloco de conteúdo que possa ser adicionado repetidamente a um modelo. As áreas de conteúdo repetível ficam ocultas por padrão; portanto, elas só aparecem em um modelo se você as adicionar no Construtor de campanhas.
No exemplo a seguir, o atributo mc:repeatable é adicionado a uma área de conteúdo editável com o atributo mc:edit.
<div class="article" mc:repeatable>
<h3 mc:edit="article_title">Título</h3>
<p mc:edit="article_content">Conteúdo</p>
</div>
Cada instância do mc:repeatable cria um elemento-pai. Quando um bloco for repetido, o novo bloco será um filho desse pai. Os blocos filhos só podem ser reorganizados se estiverem associados ao mesmo elemento-pai. Por exemplo, se você tiver duas seções mc:repeatable em seu modelo, um bloco repetido da primeira instância não poderá ser reorganizado para aparecer entre os blocos repetidos associados à segunda instância.
Para mover blocos mais livremente, você deve criar várias instâncias do atributo mc:variant definido pelo mesmo nome mc:repeatable. Isso criará um elemento-pai mc:repeatable, para que todos os blocos repetidos sejam filhos do mesmo elemento-pai.
No exemplo a seguir, vários atributos mc:variant são usados com o mesmo nome mc:repeatable.
<table mc:repeatable="content" mc:variant="variant_1">
<tr><td mc:edit="section_1">
Conteúdo da variante 1
</td></tr>
</table>
<table mc:repeatable="content" mc:variant="variant_2">
<tr><td mc:edit="section_2">
Conteúdo da variante 2
</td></tr>
</table>
<table mc:repeatable="content" mc:variant="variant_3">
<tr><td mc:edit="section_3">
Conteúdo da variante 3
</td></tr>
</table>
Adicione o atributo mc:hideable a uma área de conteúdo para permitir alternar o bloco entre oculto e visível ao criar suas campanhas. O atributo mc:hideable não pode ser usado em conjunto com o atributo mc:repeatable.
No exemplo a seguir, o atributo mc:hideable é adicionado a uma área de conteúdo tornada editável com o atributo mc:edit.
<div mc:edit="content" mc:hideable>
</div>
Inclua o atributo mc:variant="somename" em uma área de conteúdo para permitir que você alterne entre vários layouts para esse bloco de conteúdo no Construtor de campanhas. O atributo mc:variant requer um nome de atributo e deve ser usado em conjunto com mc:repeatable.
No exemplo a seguir, o atributo mc:variant é adicionado a uma área de conteúdo que também usa o atributo mc:repeatable. Nesse caso, o nome do atributo é "conteúdo com a imagem esquerda."
<div mc:repeatable="product" mc:variant="content with left image"> </div>
Nota
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.
Use a linguagem de modelos do Mailchimp para criar o seu próprio modelo de e-mail. Aprenda a criar seções, usar etiquetas de mesclagem, testar o seu modelo e muito mais.
Com o Mailchimp, você pode importar, reutilizar e compartilhar os seus modelos de HTML personalizados. Saiba como importar arquivos ZIP ou HTML.
Se você programa o seu próprio modelo de e-mail, pode usar a linguagem de modelos do Mailchimp para adicionar blocos de conteúdo replicáveis e variáveis ao seu layout. Saiba quando e como usar cada tipo de bloco.
These cookies are strictly necessary to provide you with the services and features available through our site. Because these cookies are strictly necessary to deliver the site, you cannot refuse them without impacting how the site functions.
These cookies are used to enhance the functionality and performance of the site. They help us to customize the site and application for you in order to enhance your experience. While these cookies are not needed for a basic website experience, certain functionalities such as personalization and video would become unavailable.
These cookies are used to make advertising messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.
These cookies collect information to help us understand how the site is being used or how effective our marketing campaigns are. They help us to know which pages are the most and least popular and to see how visitors move around the site. These cookies may be set by us or by third-party providers whose services we have added to our pages.