Mais em Mailee.me: Recursos | Preços | Cadastro

Como criar templates

Este guia é voltado para pessoas que desejam saber como criar seus próprios templates para usar no Mailee.me. Ele cobre funcionalidades que vão do nível básico ao avançado, e, ao final dele, você deverá saber como:

Antes de começar:

Como criar templates é escrito de forma simples, para que você consiga montar um template partindo do zero.
No entanto, ele assume que você possui conhecimento básico de HTML e CSS. Para saber mais sobre HTML e CSS acesse os links indicados no final desse artigo.

O que é um template de email

O template de email é um documento padrão contendo uma pré-formatação de estilos e layout, sendo a base para geração de uma mensagem.

O uso de templates de email é aconselhado para campanhas de email que devem ter o mesmo layout, porém contendo informações diferentes.

1 Configurando seu template

Templates criados para o Mailee.me precisam obedecer a certas regras. São elas:

  • Todo conteúdo salvo em codificação UTF-8
  • Arquivo zip com os arquivos

1.1 Configurando o conteúdo como UTF-8

Todos templates criados para o Mailee.me precisam conter o elemento <meta> com os seguintes atributos:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

1.2 Codificação

Todos os arquivos colocados no Mailee.me devem ser salvos como UTF-8. Confira como configurar seus arquivos HTML:

1.2.1 no Bloco de Notas (Windows)
  1. Selecione o menu “Arquivo”
  2. Selecione “Salvar como…”
  3. Escolha a opção UTF-8 na Codificação (encoding), conforme imagem:

Codificação UTF-8 no Bloco de Notas

1.2.2 no TextEdit (Mac)
  1. Acesse as preferências do TextEdit (CMD + ,)
  2. Escolha a tab “Abrir e Salvar (Open and Save)”
  3. Lá configure as preferências para edição de arquivos HTML, conforme a imagem:

Codificação UTF-8 no TextEdit

1.2.3 no GEdit (Sistemas operacionais Linux baseados em Gnome)
  1. Selecione o menu “Arquivo”
  2. Selecione “Salvar como…”
  3. Configure a codificação conforme imagem:

Codificação UTF-8 no GEdit

1.3 Título

Você pode decidir qual será o nome de seu template pelo nome do arquivo zip.

Para saber mais sobre upload de templates, clique aqui.

Após carregado no Mailee.me, você poderá editar o nome de seu template a qualquer momento, bastando entrar em Templates, e, no template que desejar renomear, escolher a ação “editar”. O nome do template poderá ser alterado no local indicado pela imagem abaixo:

Alterando títulos de templates no Mailee.me

2 Áreas editáveis em templates do Mailee.me

2.1 Tornando áreas de texto editáveis

Imagine que você precisa permitir que o conteúdo de texto, dentro de um elemento <p>…</p>, seja editado, e seu HTML é algo assim:

<p> Desejo tornar essa informação editável. </p>

Nesse caso, você simplesmente precisará adicionar uma class=“edit” ao seu elemento <p>…</p>

<p class="edit"> Essa informação poderá ser editada! </p>

A class=“edit” não precisa, obrigatoriamente, ser aplicada em elementos de bloco display:block;, e pode ser adicionada em elementos display:inline;, conforme exemplo abaixo:

<p> Você também pode definir que <span class="edit">apenas uma pequena porção de texto</span> seja editável. </p>

Não use elementos com class=“edit”, dentro de outros elementos com class=“edit”.

2.2 Possibilitando a troca de uma imagem no template

Para que uma imagem possa ser substituida em seu template, basta adicionar a class=“edit”.

<img src="sua_imagem.jpg" class="edit" … />

2.3 Definindo um tamanho para as imagens

Se você quiser restringir o tamanho de uma imagem basta informá-lo, imediatamente após o atributo de classe “edit”, conforme exemplo abaixo:

<img src="sua_imagem.jpg" class="edit 100x100" … />

O formato deve seguir largura x altura, sendo que os valores colocados são interpretados em pixels por padrão, e o tamanho definido como o máximo para a imagem no seu layout.

Você também poderá usar valores com os seguintes operadores:

! Ignora a proporção da imagem durante o redimensionamento
% Interpreta os valores como percentual
> Redimensiona a imagem para o tamanho estabelecido somente se a imagem for menor
< Redimensiona a imagem para o tamanho estabelecido somente se a imagem for maior

Para mais informações sobre redimensionamento das imagens usando o ImageMagik, acesse imagemagick.org/Magick/Geometry.html

3 Blocos de repetição

Blocos de repetição servem para criação de templates onde é necessário repetir o layout, alterando conteúdos.

3.1 Definindo um bloco de repetição

Para criar um bloco de repetição em seu template basta adicionar uma <div> com a class=“repeat”, um id que represente o nome do bloco para indexação e um title que será usado para o botão adicionar na edição de mensagens.

Consideremos o seguinte cenário, onde terei um bloco de repetição de notícias:

<div> <h1> Seu título aqui </h1> <img src='sua_imagem.jpg' /> <p> Conteúdo de seus textos aqui… </p> </div>

Para tornar essa <div> um bloco de repetição de notícias, basta adicionar um atributo de class, um de id e outro de title, assim:

<div id="news" class="repeat" title="notícias"> <h1 class="title"> Seu título aqui </h1> <img src='sua_imagem.jpg' /> <p> Conteúdo de seus textos aqui… </p> </div>

Dessa forma, o Mailee.me interpretará tudo que estiver dentro dessa <div id=“news” class=“repeat” title=“notícias”> como um bloco de repetição. O título para o bloco de repetição será indicado pelo atributo class=“title” no seu elemento de título <h#>.

Dentro dos blocos de repetição não será necessário definir class=“edit” nos elementos, pois no bloco de repetição todos elementos são editáveis por padrão.

Recapitulando:
class=“repeat” torna um elemento <div> em um bloco de repetição
id=“seu_id_unico” define o conteúdo do bloco e aponta para um índice
title=“seu_titulo” indica o conteúdo para o botão

3.2 Definindo uma lista de índice para os itens no bloco de repetição

Você pode incluir em sua mensagem uma lista de índice contendo as informações nos títulos dos blocos repetíveis.

Para adicionar ao seu template uma lista de índice, será necessário copiar a informação do atributo id de seu bloco de repetição. Vamos utilizar como exemplo o seguinte bloco de repetição:

<div id="news" class="repeat" title="notícias"> <h1 class="title"> Seu título aqui </h1> <img src='sua_imagem.jpg' /> <p> Conteúdo de seus textos aqui… </p> </div>

Nesse caso, a informação do atributo id é “news” e seu título é definido pelo elemento <h1 class=“title”>.

Para criar a lista de índice para esse bloco de repetição, basta adicionar a informação “news” na classe de um elemento <ul class=“index”>, da seguinte forma:

<ul class="index news"> <li> </li> </ul>

Dessa forma, o Mailee.me irá interpretar o elemento <ul class=“index news”> como sendo a lista de índice para o bloco de repetição de notícias e cada elemento <h1 class=“title”> será automaticamente adicionado nessa lista. No final, seu código deverá conter informações similares às apresentadas abaixo:

<ul class="index news"> <li> </li> </ul> <div id="news" class="repeat" title="notícias"> <h1 class="title"> Seu título aqui </h1> <img src='sua_imagem.jpg' /> <p> Conteúdo de seus textos aqui… </p> </div>

Você pode inserir estilos inline em sua lista de índice e eles serão mantidos na repetição, conforme exemplo abaixo:

<ul class="index news"> <li style="list-style:none; font-size:14px;"> <a href="#" style="color:green; text-decoration:underline;">Título do bloco repetível</a> </li> </ul>

Neste caso, o Mailee.me manterá os estilos dos elementos <li> e do <a>.

4 Links dinâmicos do Mailee.me

4.1 O que são links dinâmicos?

O Mailee.me gera links dinâmicos, facilitando algumas tarefas comuns em email marketing.

Você pode adicionar facilmente um link para descadastramento (unsubscribe), atendendo a um requisito básico para boas práticas de email marketing, um link para visualização na web, para usuários que tenham dificuldade para visualizar a mensagem em seu cliente de email, um link para encaminhar a mensagem (forward), fornecendo ao usuário a possibilidade de enviar suas mensagens para amigos e um link para adicionar à lista de contatos (whitelist), que levará a uma página com os passos necessários para o usuário adicionar o seu email na lista de contatos.

4.2 Link para descadastramento (unsubscribe)

O link de descadastramento ou unsubscribe é essencial em email marketing. Ele serve para que o contato que quiser deixar de receber suas mensagens, seja por desinteresse, ou qualquer outro motivo, possa ser efetivamente descadastrado de sua lista.

O Mailee.me oferece uma solução simples, e para inserir esse link em seus templates basta colocar neles o seguinte código:

<p> Para deixar de receber a nossa campanha, <a href="#" class="unsubscribe">clique aqui</a>. </p>

O Mailee.me irá trocar automaticamente o destino no atributo href=“#” pela URL que realiza o descadastro do contato.

Caso seu template não possua um link de descadastro ele será automaticamente adicionado pelo Mailee.me.

Você também poderá utilizar um atributo id=“unsubscribe”, porém, lembre-se que ao usar o atributo id=“unsubscribe” ele só poderá ser utilizado uma vez por template, e, portanto, não é indicado caso você precise colocar mais de um link unsubscribe em seu template.

O descadastramento também pode ser realizado pela integração de formulário de descadastro. Saiba mais em Integração por formulário.

O link para visualização na web ou weblink é indicado para garantir que usuários que tenham problemas de visualização de suas mensagens no formato HTML possam visualizar a mensagem no navegador, como uma página de web.

Para inserir um weblink em sua mensagem, utilize o seguinte código:

<p> Para visualizar nossa campanha em seu navegador, <a href="#" class="weblink">clique aqui</a>. </p>

O Mailee.me irá trocar automaticamente o destino no atributo href=“#” pela URL de visualização na web da mensagem.

Você também poderá utilizar um id=“weblink”, id=“web-link”, id=“web_link”, class=“web-link” ou class=“web_link”. Lembre-se que o atributo de id é único, e só poderá ser utilizado uma vez por HTML, e, portanto, não é indicado caso você precise colocar mais de um link weblink em seu template.

4.4 Encaminhar a mensagem (forward)

Com o link de encaminhar a mensagem ou forward você permite que seus contatos possam encaminhar a mensagem para seus amigos, o que poderá gerar novos contatos e aumentar sua lista.

Para inserir um link forward em seus templates, basta adicionar o seguinte código:

<p> Para encaminhar essa mensagem para seus amigos, <a href="#" class="forward">clique aqui</a>. </p>

O Mailee.me irá trocar automaticamente o destino no atributo href=“#” pela URL de encaminhar para amigos.

Se você desejar, poderá utilizar um id=“forward”, porém lembre-se que o atributo id é único, e só poderá ser utilizado uma vez por HTML, e, portanto, não é recomendado caso você precise colocar mais de um link de forward em seu template.

4.5 Adicionando à lista de contatos (whitelist)

Com o link para adicionar à lista de contatos ou whitelist você permite que os usuários saibam como proceder para que sua mensagem chegue com segurança às suas caixas de entrada.

Para inserir um link whitelist em seus templates, basta adicionar o seguinte código:

<p> Para que nossa mensagem chegue corretamente em sua caixa de entrada, adicione nosso email na sua lista de contatos <a href="#" class="whitelist" >seguindo nossas instruções</a>. </p>

O Mailee.me irá trocar o atributo href="" com a URL de destino para as instruções de whitelist.

Se você desejar poderá utilizar um id=“whitelist”, porém lembre-se que o atributo id é único e só poderá ser utilizado uma vez por HTML, sendo portanto pouco indicado caso você precise colocar mais de um link whitelist em seu template.

5 Personalização de mensagens no Mailee.me

5.1 Informações de campos dos contatos

Você pode usar campos dos contatos para personalizar suas mensagens do Mailee.me.

Para, por exemplo, montar uma frase como:

<p>Bom dia Nome do Contato!</p> <p>Confira as ofertas que selecionamos para você.</p>

Basta inserir um elemento <span></span> com o atributo class=“contact INFORMAÇÃO”, onde INFORMAÇÃO, deverá ser a tag do campo desejado. Nesse caso, queremos o Nome do Contato, que, em nossa lista está identificado pela tag “name”. Nosso código HTML fica da seguinte forma:

<p>Bom dia <span class="contact name"></span>!</p> <p>Confira as ofertas que selecionamos para você.</p>

Você pode deixar vazio o conteúdo da <span class=“contact name”></span>, e o Mailee.me irá inserir automaticamente a informação contida na tag “name” do contato de sua lista, e, como fallback (caso o contato não tenha nenhuma informação para a tag “name”) exibirá o texto “Bom dia! Confira as ofertas selecionadas para você.”.

Evite preencher com textos de fallback como Fulano, pois, no caso do contato em sua lista não conter nenhuma informação para a tag “name”, ele receberá a mensagem como “Bom dia Fulano!”.

Confira a lista completa de campos:

Campo Descrição
class=“contact id” Identificador do contato no Mailee.me
class=“contact name” Nome do contato
class=“contact contact_status_id” Identificador do status do contato
class=“contact internal_id” Identificador do contato no seu sistema
class=“contact sex” Sexo do contato
class=“contact birthday” Data de nascimento do contato
class=“contact age” Idade do contato
class=“contact phone” Telefone do contato
class=“contact mobile” Celular do contato
class=“contact address” Endereço do contato
class=“contact notes” Outras informações do contato

5.2 Informações de campos personalizados

Campos personalizados podem ser criados nas importações de suas bases de dados ou diretamente no Mailee.me. Os dados importados podem também ser inseridos em seus templates ou utilizados para segmentação de listas.

Digamos que você possua uma base como a da imagem abaixo:

Base de dados com campos personalizados

Enquanto Nome e E-mail são campos dos contatos no Mailee.me, o campo Gosta de é um campo personalizado. Ele será importado e você poderá associar a uma coluna da seguinte forma:

Campos personalizados importados

Chamaremos esse campo personalizado de estilo e para inserir o campo em seu template, basta inserir o seguinte código:

<p> Você gosta de <span class="contact estilo">música</span>. </p>

O Mailee.me irá trocar automaticamente a informação do elemento <span class=“contact estilo”></span> da mensagem de cada contato para a informação contida no campo com a tag estilo.

Para os campos personalizados você deve usar a tag deste campo e não o seu nome.

5.3 Informações da lista

Todas as mensagens enviadas pelo Mailee.me estão relacionadas a uma lista de contatos. Para personalizar seu template com dados da lista, basta inserir o atributo class=“list informação” (substituindo informação pelo nome do campo).

Confira o seguinte exemplo:

<p> Nosso endereço é: </p>

Para inserir a informação de endereço relacionada à lista, basta adicionar um <span> com o atributo class=“list address”, ficando assim:

<p> Nosso endereço é <span class="list address">Rua Dom Pedro II, nº 2.</span>. </p>

O Mailee.me irá trocar automaticamente o conteúdo do <span class=“list address”></span> para o endereço cadastrado na lista da mensagem.

Utilize sempre um fallback válido, para o caso de não possuir a informação exibida cadastrada em sua lista.

Veja abaixo os campos possíveis com informações da lista no Mailee.me:

Campo Descrição
class=“list id” Identificador da lista no Mailee.me
class=“list name” Nome da lista
class=“list description” Descrição da lista. Aqui você pode colocar alguma informação útil para os contatos.
class=“list address” Endereço (físico: rua, bairro…) da lista
class=“list phone” Telefone da lista
class=“list company” Nome da empresa associada à lista

Veja como cadastrar essas informações em Gerenciamento de listas.

Você sabia?
Colocar o endereço, o telefone e o nome da empresa é obrigatório de acordo com a legislação estadunidense. Além disso, é uma boa prática para email marketing. Saiba mais aqui » Artigo da Wikipedia sobre o CAN SPAM Act de 2003 [link em inglês]

5.4 Informações de data

É possível colocar informações de data preenchidas automaticamente pelo Mailee.me em seus templates.

Por exemplo, se desejar inserir a data de seu envio:

<p> Hoje é 00/00/00 </p>

Basta inserir o seguinte código:

<p> Hoje é <span class="auto date">00/00/00</span>. </p>

O Mailee.me irá trocar automaticamente o conteúdo do <span class=“auto date”></span> pela data do momento do envio.

Veja a lista das informações de “data” do Mailee.me:

Campo Descrição
class=“auto date” Data completa atual, com dia, mês e ano
class=“auto day” Dia do mês atual
class=“auto month” Mês atual
class=“auto year” Ano atual

6 Guia de referência

Para saber mais sobre HTML e CSS, acesse os links abaixo: