E-mails Profissionais: Guia do Editor Drag-and-Drop

Criar e-mails visualmente atraentes e profissionais não exige conhecimento de HTML ou design gráfico. O editor drag-and-drop da Marketek permite que você monte e-mails completos arrastando blocos de conteúdo, ajustando cores e fontes, e visualizando o resultado em tempo real para desktop e mobile. Neste guia, você vai conhecer cada recurso do editor e aprender a criar e-mails que realmente convertem.

Visão Geral do Editor

O editor está dividido em três áreas principais:

• Painel de blocos (esquerda): lista de todos os componentes que você pode arrastar para o e-mail
• Área de edição (centro): onde você monta o e-mail visualmente
• Painel de propriedades (direita): configurações do bloco selecionado (cores, fontes, espaçamento, links)

Para acessar o editor, vá em Marketing > E-mail > Templates e crie um novo template ou edite um existente.

Blocos de Conteúdo Disponíveis

Cada bloco cumpre uma função específica no e-mail. Arraste-os do painel esquerdo para a área de edição.

Blocos estruturais

Blocos de mídia e interação

Layouts e Colunas

O editor permite criar layouts com múltiplas colunas para organizar o conteúdo lado a lado.

Opções de layout

• 1 coluna: ideal para e-mails de texto, newsletters simples e dispositivos móveis
• 2 colunas (50/50 ou 60/40): perfeito para produto + descrição, imagem + texto
• 3 colunas (33/33/33): bom para listar recursos, planos ou categórias
• 4 colunas: útil para ícones de recursos ou miniaturas de produtos

Como usar

1. Arraste o bloco Colunas para a área de edição
2. Selecione o layout desejado (1, 2, 3 ou 4 colunas)
3. Arraste blocos de conteúdo para dentro de cada coluna
4. Ajuste a proporção das colunas se necessário

💡 Dica: no mobile, colunas são automaticamente empilhadas em coluna única. Sempre verifique no preview mobile se o resultado faz sentido quando empilhado.

Estilização e Identidade Visual

Fontes

O editor oferece uma biblioteca de fontes web-safe e Google Fonts:

• Para títulos: fontes com mais personalidade (Montserrat, Poppins, Playfair Display)
• Para corpo de texto: fontes legíveis (Arial, Helvética, Open Sans, Roboto)
• Tamanho recomendado: títulos entre 22-28px, corpo entre 14-16px, rodapé entre 12-14px

Cores

Configure as cores do e-mail para combinar com sua marca:

• Cor de fundo do e-mail: a cor que aparece atrás de todo o conteúdo
• Cor de fundo do conteúdo: a cor da área onde o texto e imagens ficam
• Cor do texto: deve ter bom contraste com o fundo (mínimo 4.5:1)
• Cor dos links: destaque que indica elementos clicáveis
• Cor dos botões: deve contrastar com o restante do e-mail para chamar atenção

Espaçamento

• Padding interno: espaço entre o conteúdo e a borda de cada bloco
• Margem: espaço entre blocos
• Largura do e-mail: o padrão é 600px (ideal para a maiória dos clientes de e-mail)

Conteúdo Dinâmico com Merge Fields

Merge fields personalizam o e-mail automaticamente com dados do destinatário.

Como usar

No bloco de texto, clique no ícone de Campos dinâmicos ou digite diretamente:

• {{contact.first_name}} — primeiro nome do contato
• {{contact.last_name}} — sobrenome do contato
• {{contact.email}} — e-mail do contato
• {{contact.company}} — empresa do contato
• {{contact.phone}} — telefone do contato

Exemplo prático:

Olá {{contact.first_name}},

Preparamos uma oferta especial para a {{contact.company}}.

Se o contato se chama “Mária” e a empresa é “Tech Solutions”, o e-mail será renderizado como:

Olá Mária,

Preparamos uma oferta especial para a Tech Solutions.

💡 Dica: sempre defina um valor padrão para merge fields (fallback). Se o campo estiver vazio, o fallback será exibido. Ex.: {{contact.first_name | default: "você"}}.

Preview e Teste

Antes de enviar, valide o e-mail em diferentes visualizações:

Preview desktop e mobile

Clique em Preview no topo do editor para alternar entre:
– Desktop: visualização em tela larga (600px)
– Mobile: visualização em tela estreita (320px)

Verifique se:
– Textos estão legíveis em ambos os tamanhos
– Imagens não ficam cortadas ou desporporcionais
– Botões são facilmente clicáveis no mobile (mínimo 44x44px de área de toque)
– Colunas empilham corretamente no mobile

Envio de teste

Clique em Enviar Teste e insira seu e-mail para receber uma cópia real. Verifique:
– Renderização no seu cliente de e-mail (Gmail, Outlook, Apple Mail)
– Links funcionam corretamente
– Merge fields são preenchidos (ou mostram o fallback)
– Imagens carregam normalmente

Salvando como Template

Após criar um e-mail que funciona bem, salve-o como template reutilizável:

1. Clique em Salvar como Template no topo do editor
2. Dê um nome descritivo (ex.: “Newsletter semanal”, “Promoção de produto”)
3. Escolha uma pasta para organizar
4. O template ficará disponível em Marketing > E-mail > Templates para uso em campanhas e workflows

Boas Práticas de Design

1. Mantenha a hierarquia visual: título > subtítulo > corpo > CTA — guie o olhar do leitor
2. Use no máximo 3 fontes: uma para títulos, uma para corpo e uma para destaques
3. Otimize imagens: comprima antes do upload para evitar e-mails pesados (ideal: menos de 200KB por imagem)
4. Inclua texto alternativo nas imagens: caso as imagens não carreguem, o texto alt comunica a mensagem
5. Tenha um CTA claro: cada e-mail deve ter um objetivo principal com um botão que se destaque
6. Inclua link de descadastramento: obrigatório por lei e presente automaticamente no bloco de rodapé da Marketek
7. Teste antes de enviar: sempre envie um e-mail de teste para si mesmo antes de disparar para a lista

Artigos Relacionados:
– Como Criar um Template de E-mail Reutilizável
– E-mail Quebrando no Mobile? 5 Correções Rápidas