#Como montar o conteúdo do e-mail no editor?

O editor completo de e-mail tem um painel só, à esquerda, com três abas: Conteúdo (os blocos e as propriedades do bloco que você selecionou), Linhas (os layouts de coluna) e Configuração (o que vale para o e-mail inteiro). Não existe mais um painel do lado direito, nem as abas Camadas, Blocos e Estilo separadas — estilo e propriedades passaram para dentro da aba Conteúdo.

Papel: qualquer membro com acesso de edição no workspace.

#Antes de começar

• Um e-mail aberto no editor completo, pelo broadcast de e-mail ou por um passo Enviar e-mail de automação. Veja como criar o conteúdo de um e-mail na automação?.
• O assunto não fica no editor. Assunto e remetente são preenchidos fora dele: na tela de envio do broadcast ou no card do passo de e-mail da automação. A aba Configuração não tem campo de assunto de propósito — o envio lê o assunto daquele outro lugar, e ter dois campos faria o que você digitasse aqui sumir na hora de disparar.
• Se o painel não aparecer, ele está recolhido: clique na setinha na borda esquerda do canvas para abrir.

#Adicionar um bloco

1. Abra a aba Conteúdo. Sem nada selecionado, ela mostra os blocos do mais usado para o menos usado: Título, Parágrafo, Texto, Botão, Imagem, Vídeo, Cabeçalho, Rodapé, Divisor, Distanciador, Table (tabela), Lista e Menu, e no fim o atalho Importar HTML. No broadcast aparece também o Descadastro, logo depois do Rodapé. Na automação e no broadcast aparece também o Consentimento, logo depois do Menu.
2. Arraste o bloco para o ponto do e-mail onde ele deve entrar. É assim que se adiciona conteúdo: quem escolhe a posição é você, no lugar onde soltar. Clicar no bloco da lista não adiciona nada.
3. Clique no bloco dentro do e-mail. A aba Conteúdo troca a lista de blocos pelas propriedades desse bloco, com o nome dele no topo e três botões: Duplicar, Excluir e Fechar.
4. Ajuste o que precisar. As opções mudam conforme o bloco: um Botão tem texto, cores, curvatura e destino do link; uma Imagem tem arquivo, texto alternativo e link; uma Lista tem tipo, estilo e recuo dos itens.
5. Para voltar à lista de blocos, clique em Fechar ou na própria aba Conteúdo. Os dois só tiram a seleção — nada do que você ajustou é desfeito.

Isso vale também para partes do e-mail que não são blocos da lista, como uma caixa que veio dentro de um template importado: clicando nela você recebe as propriedades dela — Cor de fundo, Preenchimento, Margem, Borda (estilo, espessura e cor) e Arredondamento dos cantos. Preenchimento, margem, borda e cantos têm um botão Mais opções: desligado, o valor vale para os quatro lados de uma vez; ligado, você define cada lado (ou canto) separadamente. Em Arredondamento dos cantos há também três atalhos — Reto (0 px), Suave (8 px) e Arredondado (16 px) — que aplicam o valor aos quatro cantos com um clique; para outro valor, use o campo numérico logo abaixo.

#A área de conteúdo

Todo e-mail tem um fundo e, em cima dele, uma área de conteúdo — o cartão onde ficam os blocos. É o único lugar onde conteúdo entra:

• Blocos adicionados sem nada selecionado, ou com a própria área de conteúdo selecionada, entram no fim da área de conteúdo. Com um bloco selecionado, o novo entra logo depois dele.
• Se você soltar um bloco no espaço em volta do e-mail, ele vai para dentro da área de conteúdo: para o início, se soltou acima do e-mail; para o fim, se soltou abaixo.
• Clique na área de conteúdo para abrir as propriedades dela: Largura, Alinhamento (Esquerda ou Centro), Cor de fundo, Preenchimento, Borda e Arredondamento dos cantos. Largura, alinhamento e cor são os mesmos da aba Configuração — mudar num lugar muda no outro.
• A área de conteúdo não pode ser arrastada, duplicada nem excluída: por isso os botões Duplicar e Excluir não aparecem quando ela está selecionada.
• O fundo não é um bloco e não pode ser selecionado. A cor e a imagem de fundo ficam na aba Configuração.
• Cabeçalho e Rodapé ficam fora da área de conteúdo, direto sobre o fundo. Ao arrastar o bloco Cabeçalho, aparece a área onde soltar, acima da área de conteúdo; com o Rodapé, abaixo dela. Cada um entra uma vez só. O bloco chega vazio, com o aviso Arraste blocos para cá: é um campo onde você solta a imagem, o texto e os outros blocos que quiser. Com o Cabeçalho ou o Rodapé selecionado, o bloco novo entra nele. A largura e o alinhamento acompanham a área de conteúdo. O bloco Cabeçalho é outra coisa que o campo Cabeçalho da tela de envio do broadcast, que é a linha de prévia da caixa de entrada.
• Descadastro (só no broadcast) mostra onde fica o link de cancelar inscrição — normalmente dentro do Rodapé. O texto e o alinhamento (Alinhar: esquerda, centro ou direita) você escolhe; o destino é preenchido no envio para cada pessoa e não pode ser trocado. Sem esse bloco, o link é colocado automaticamente no fim do e-mail. Em automações o bloco não aparece, porque esses e-mails não levam link de descadastro.
• Consentimento (na automação e no broadcast) é o botão Confirmar inscrição do double opt-in. Texto, cores e formato você escolhe; o destino é preenchido no envio com um link único para cada pessoa e não pode ser trocado. No e-mail de teste o botão leva a uma página de exemplo, que não confirma ninguém. Como montar a automação inteira: Como pedir para o lead confirmar a inscrição por e-mail?.
• No modelo em branco, a caixa clara onde ficam a logo, o título, os benefícios e o botão é a própria área de conteúdo: trocar a Cor de fundo da área do conteúdo (na aba Configuração ou clicando nela) muda essa caixa, e a cor aparece igual no editor, na visualização e no e-mail enviado.

O bloco Importar HTML e o atalho Importar HTML no fim da lista de blocos fazem coisas diferentes: o bloco coloca o HTML importado dentro dele, no meio do e-mail que você já montou; o atalho substitui o e-mail inteiro pelo HTML importado.

Nos dois casos o mesmo diálogo abre, com um botão Informações sobre a importação no rodapé. Ele conta o que o editor faz com o seu arquivo: o layout é tratado em tabelas; tags <script>, atributos de evento e links javascript: são removidos; estilo inline é o que sempre chega, enquanto um <style> do arquivo só é aproveitado na substituição do e-mail inteiro (e é tudo ou nada — um erro de sintaxe descarta a folha) e é descartado no bloco Importar HTML; e o arquivo precisa ter no máximo 2 MB. Abrir as informações não fecha o diálogo: o arquivo escolhido e o HTML colado continuam onde estavam.

Depois de importar, abra a aba Configuração: o editor adota a largura e as cores que conseguiu ler do arquivo, e é ali que você acerta o que ficou diferente do esperado.

#Ajustar preenchimento e margem arrastando

Com um bloco selecionado, aparecem barrinhas nas bordas dele: as verdes ajustam o preenchimento (o espaço entre a borda e o conteúdo) e as laranjas ajustam a margem (o espaço entre o bloco e os vizinhos). As faixas coloridas em volta do bloco mostram o espaço que já existe.

1. Clique no bloco dentro do e-mail. Em textos, o cursor entra no texto e as barrinhas continuam visíveis.
2. Arraste uma barrinha: a verde aumenta o preenchimento quando você puxa para dentro do bloco; a laranja aumenta a margem quando você puxa para fora. O valor em pixels aparece ao lado do cursor enquanto você arrasta.
3. Segure Shift enquanto arrasta para mudar o lado oposto junto (em cima e embaixo, ou esquerda e direita, com o mesmo valor).
4. Solte. As propriedades do bloco na aba Conteúdo já mostram o valor novo, e um Desfazer volta o arraste inteiro de uma vez.

O Distanciador não tem barrinhas: a altura dele já é o espaço, e ela se ajusta nas propriedades do bloco.

#Formatar um trecho de texto

Clique em qualquer texto do e-mail — título, parágrafo, lista, texto livre, célula de tabela — e duas coisas acontecem: o cursor entra no texto, no ponto exato onde você clicou, e uma barra flutuante aparece sempre no centro do editor, logo acima do bloco. Ela traz tudo o que vale para texto; as propriedades do bloco inteiro continuam na aba Conteúdo.

A barra não muda de lugar conforme o texto que você seleciona — fica sempre na mesma posição, para você não ter que procurá-la.

No Botão, a barra também aparece e o cursor entra no rótulo: dá para escrever direto no botão e usar negrito, itálico, sublinhado, tachado, emoji, limpar formatação e variável — útil para um rótulo como "Começar agora, {{firstName}}". Cor e destino do link não ficam na barra porque já são propriedades do botão, na aba Conteúdo.

Esc fecha em camadas: se houver uma lista aberta (cores, emoji, variáveis), o primeiro Esc fecha só ela; o seguinte fecha a barra. O cursor continua onde estava, e a barra volta assim que você clicar no texto de novo.

Com um trecho selecionado, cada ação vale só para ele. Com o cursor apenas piscando, sem seleção, as ações valem para o bloco inteiro: clicar em negrito com o cursor num parágrafo deixa o parágrafo todo em negrito. As exceções são Emoji e Adicionar variável, que sempre entram no ponto do cursor.

1. Negrito, Itálico, Sublinhado e Tachado ligam e desligam a cada clique.
2. Cor do texto e Marcador de texto ficam lado a lado e funcionam igual: a barrinha embaixo do ícone mostra a cor que o botão aplica, e a setinha ao lado abre a lista. Na lista você tem as cores que já usou, as sugestões, o Sem cor (que tira a cor ou a marcação) e a paleta, que abre o seletor de cores do seu computador para escolher qualquer tom. Toda cor escolhida entra em Usadas recentemente, separada por uso — as de texto não se misturam com as de marcação.
3. Emoji abre uma lista curta; clique em um e ele entra no lugar da seleção.
4. Limpar formatação tira negrito, itálico, cores e marcações do trecho selecionado. Links continuam links, só voltam ao visual padrão. O resto do parágrafo não é afetado.
5. Transformar em link vira o trecho em link. Depois, clique no link para abrir as opções dele: texto, endereço, Visitar link e Remover link — este último desfaz o link e mantém o texto no lugar.
6. Adicionar variável abre a lista de dados do contato (nome, e-mail, telefone e os campos do seu workspace) e insere o escolhido exatamente onde o cursor está. É daqui que se colocam variáveis no e-mail — a barra de ferramentas do topo não tem mais esse botão, porque lá não havia um cursor para dizer em que ponto do texto a variável deveria entrar.

#A barra do topo

A barra acima do e-mail está dividida em três partes:

• À esquerda: quando você está editando dentro de um disparo, a seta Voltar, que faz o mesmo que Salvar (conclui a edição e devolve você à tela de configuração do envio). Depois, Desfazer e Refazer e Destacar elementos, que desenha o contorno de cada bloco para você enxergar a estrutura da mensagem.
• No centro: as abas Edição e Galeria. A Galeria mostra as imagens que você já enviou para a ClickMax — veja Usar uma imagem da galeria.
• À direita: Desktop e Mobile (como o e-mail fica em cada tela), Visualizar e-mail, Expandir editor (o editor passa a ocupar a janela inteira; o mesmo botão reduz de volta) e, quando você está editando dentro de um disparo, Salvar, que conclui a edição e devolve você à tela de configuração do envio.

O aviso de Salvando... / Tudo salvo aparece no canto, logo abaixo da barra, e some sozinho depois de alguns segundos. Ele não fica permanente porque o e-mail é gravado a cada alteração: o aviso serve para avisar da gravação, não para ficar na tela.

#Usar uma imagem da galeria

A aba Galeria mostra, no lugar do e-mail, as imagens da pasta Imagens de e-mails do Drive. Não abre janela nenhuma: o e-mail continua do jeito que estava por baixo, e você volta para ele pela aba Edição.

1. Decida onde a imagem vai entrar. A galeria segue esta ordem:

   • Trocar uma imagem que já está no e-mail: clique nela antes de abrir a galeria.
   • Preencher um campo de imagem vazio: se o e-mail tiver um bloco Imagem ainda sem imagem, a escolhida entra nele (o primeiro, de cima para baixo) — não precisa selecioná-lo.
   • Inserir uma imagem nova: sem imagem selecionada e sem campo vazio, ela entra depois do bloco selecionado, ou no fim da área de conteúdo se nada estiver selecionado.

   O texto no topo da galeria confirma o que vai acontecer: trocar a imagem selecionada, preencher o campo de imagem vazio ou inserir no e-mail.

2. Clique na aba Galeria (a mesma galeria do editor de páginas). Clicar num bloco Imagem vazio, em Adicionar imagem no painel da imagem ou em Trocar imagem na barra que aparece sobre ela também abre a galeria, já mirando naquela imagem.

3. Encontre a imagem: filtre pela pasta na coluna Pastas (ou fique em Todos os arquivos), use Buscar por nome ou mude a ordem entre Mais recentes, Nome (A–Z) e Nome (Z–A).

4. Passe o mouse sobre a imagem e clique em Usar (ou dê um duplo clique nela). O editor volta para a aba Edição com a imagem já no e-mail.

Para enviar uma imagem nova, clique em Enviar imagem ou arraste os arquivos do seu computador para cima da galeria. Cada arquivo pode ter até 5 MB, e a galeria do e-mail só aceita imagens. A imagem enviada entra no topo da lista, na pasta que estiver aberta.

Clique numa imagem (sem ser no Usar) para abrir os Detalhes da imagem à direita. Ali você muda o Nome do arquivo, o Texto alternativo — que aparece quando o aplicativo de e-mail bloqueia imagens e é lido por leitores de tela — e a Pasta, e confirma em Salvar. Excluir tira a imagem da galeria depois de você confirmar.

Subpastas novas de Imagens de e-mails são criadas no Drive; na galeria elas servem para filtrar.

#Buscar fotos na Biblioteca externa

No topo da coluna da esquerda, Biblioteca externa busca fotos gratuitas do Unsplash. Ela já abre com fotos de "Paisagem"; digite outro tema no campo de busca para trocar. Clique numa foto para usá-la: o Clickmax salva uma cópia na sua galeria de e-mails e coloca a imagem no e-mail. A imagem do e-mail fica no endereço do Clickmax, não no do Unsplash.

#Trazer uma imagem do Drive

Em Do seu Drive, no fim da coluna da esquerda, você navega pelo Meu drive e pelos espaços da equipe a que tem acesso, inclusive pastas privadas. Ao clicar numa imagem, o Clickmax cria uma cópia dela na galeria de e-mails e a coloca no e-mail. O arquivo original continua privado no Drive.

#Montar colunas

1. Abra a aba Linhas. Ela mostra 12 layouts de coluna prontos, de uma coluna inteira a seis colunas iguais.
2. Arraste o layout para o ponto do e-mail onde ele deve entrar. Cada coluna vira uma área independente: solte blocos de conteúdo dentro de cada uma.
3. Clique na linha para abrir as propriedades dela: cor e imagem de fundo, bordas, arredondamento dos cantos, preenchimento, alinhamento vertical e o Espaçamento entre as colunas.
4. Clique numa coluna específica para dar a ela Fundo da coluna, Preenchimento e Borda próprios, sem mexer nas outras.
5. Em Empilhar no celular, decida se as colunas ficam lado a lado ou uma embaixo da outra em telas pequenas. Com o empilhamento ligado, Ordem ao empilhar escolhe entre Normal e Invertida — útil quando a imagem está à direita no computador e você quer que ela apareça antes do texto no celular.

Para conferir o resultado, use os botões Desktop e Mobile da barra de ferramentas do editor.

#Ajustar o e-mail inteiro

Abra a aba Configuração. Nada aqui depende de um bloco selecionado — tudo vale para a mensagem toda.

1. Em Largura da área do conteúdo, arraste o controle para definir a largura do bloco de conteúdo, e escolha o Alinhamento da área do conteúdo (Esquerda ou Centro).
2. Defina Cor de fundo (a área em volta do conteúdo), Cor de fundo da área do conteúdo e, se quiser, ligue Imagem de fundo e informe a URL da imagem. A cor escolhida é a que vale no e-mail enviado, mesmo que o template ou o HTML de origem tivesse outra cor ali.
3. Escolha a Fonte padrão e a Cor do link do e-mail. Os blocos que não tiverem fonte própria herdam essa.
4. Preencha o Preheader (só nos editores que não têm um campo Cabeçalho próprio — veja abaixo): é o trecho de texto que aparece ao lado do assunto na caixa de entrada, antes de a pessoa abrir o e-mail. O campo aceita até 130 caracteres, e o contador embaixo mostra quanto você já usou. Sem preheader, o app de e-mail costuma mostrar as primeiras palavras do próprio e-mail ali.
5. Em Língua, declare o idioma da mensagem (ou deixe em Não declarar). Isso ajuda leitores de tela e a tradução automática de alguns aplicativos.
6. Custom head HTML é um campo para usuários avançados: o código informado ali entra no e-mail enviado e pode afetar como a mensagem é exibida. Scripts, iframes e links javascript: são removidos automaticamente. Use Expandir para editar numa janela maior.

Na tela de envio do broadcast e no passo de e-mail da automação, a linha de prévia é o campo Cabeçalho, fora do editor — por isso o campo Preheader não aparece na aba Configuração nesses lugares. O Cabeçalho é o único texto enviado como prévia: se o conteúdo trouxer outra linha de prévia (por exemplo, copiada de um e-mail antigo), ela é removida ao salvar. No envio, o Cabeçalho aparece sozinho na caixa de entrada, sem as primeiras palavras do e-mail emendadas depois dele.

#E-mail importado como HTML completo

Se o e-mail inteiro veio de um HTML (pelo atalho Importar HTML ou criado pelo Max a partir de um design), as cores, o alinhamento, a fonte e a cor do link são as do próprio HTML. Nesse caso, a aba Configuração mostra um aviso e deixa esses campos desativados. Para trocar uma cor, clique no elemento dentro do e-mail e mude a Cor de fundo dele nas propriedades.

#Esconder um bloco no computador ou no celular

1. Selecione o bloco (ou a linha) e localize Esconder nas propriedades.
2. Escolha OFF (aparece sempre), Desktop (some no computador) ou Mobile (some no celular).

Isso depende do aplicativo de e-mail de quem recebe. Esconder por tipo de tela é uma instrução que o aplicativo pode simplesmente ignorar — e aí o bloco aparece do mesmo jeito, ou fica escondido nos dois. Não use esse controle para esconder algo que não pode ser lido; use para ajustar o que fica melhor em cada tela. Vale o mesmo aviso para as Linhas listradas da tabela (o aplicativo pode mostrar a tabela sem as listras) e para o empilhamento de colunas no celular (o aplicativo pode manter as colunas lado a lado).

#Relacionados

• Envie um broadcast
• Como criar o conteúdo de um e-mail na automação?
• Meu e-mail saiu com a logo da ClickMax. Como colocar a minha?
• Domínio de e-mail

#Se não funcionou

• Não acho onde mudar a cor ou o tamanho do texto: clique no bloco dentro do e-mail — as propriedades abrem na própria aba Conteúdo, no lugar da lista de blocos. Não existe mais um painel à direita.
• Não acho o campo de assunto: ele não fica no editor. Preencha na tela de envio do broadcast ou no card do passo de e-mail da automação.
• As barrinhas verdes e laranjas não aparecem: selecione um bloco só. Com mais de um bloco selecionado, durante o arraste de um bloco novo ou no Distanciador, elas ficam escondidas.
• O painel sumiu: ele foi recolhido. Clique na setinha na borda esquerda do canvas para trazê-lo de volta.
• Soltei o bloco fora do e-mail e ele apareceu no fim (ou no início) da área de conteúdo: é o esperado — o conteúdo só existe dentro da área de conteúdo. Arraste o bloco para o ponto certo dentro dela. Se estiver montando colunas, solte dentro de uma coluna.
• Soltei um parágrafo acima (ou abaixo) da área de conteúdo e ele foi para dentro dela: fora da área de conteúdo só entram os blocos Cabeçalho e Rodapé. Coloque o Cabeçalho (ou o Rodapé) primeiro e solte o parágrafo dentro dele.
• Não consigo selecionar o fundo do e-mail: o fundo não é um bloco. Troque a cor ou a imagem de fundo na aba Configuração.
• Mudei a cor da área do conteúdo e a caixa clara de um e-mail antigo continuou igual: e-mails criados pelo modelo em branco antes dessa mudança têm uma segunda caixa por dentro da área de conteúdo. Ela é um bloco comum: clique nela e troque a Cor de fundo dela, ou comece um e-mail novo pelo modelo em branco.
• Um e-mail antigo tinha um bloco fora da área de conteúdo, ou o fundo e o espaçamento apareciam em dobro: abra o e-mail no editor e salve. O bloco passa para dentro da área de conteúdo e o e-mail fica com um fundo e uma área de conteúdo só.
• Troquei a cor de fundo e, depois de salvar, a visualização ou o e-mail enviado voltou para a cor antiga: se a aba Configuração mostra o aviso de HTML completo, a cor vem do próprio HTML — clique no elemento colorido dentro do e-mail e troque a Cor de fundo dele. Sem o aviso, abra o e-mail, escolha a cor de novo e salve.
• Na caixa de entrada aparece outro texto junto do Cabeçalho: o e-mail ainda carrega uma linha de prévia antiga. Abra o passo de e-mail (ou o disparo), confira o Cabeçalho e salve — a linha antiga é removida.
• O bloco escondido apareceu mesmo assim para quem recebeu: o aplicativo de e-mail do destinatário ignorou a regra. Veja o aviso na seção acima.
• O divisor atravessou o e-mail inteiro no Outlook: isso acontecia em e-mails salvos antes da correção. Abra o e-mail no editor e salve de novo: o divisor passa a respeitar a largura do conteúdo também no Outlook para Windows.
• O botão chegou com cantos retos no Outlook: o Outlook para Windows não desenha cantos arredondados. O botão mantém a cor, o tamanho, o alinhamento e o link; só os cantos ficam retos nesse aplicativo. Nos outros, ele aparece como você montou.
• A imagem apareceu como um X vermelho no Outlook: a imagem provavelmente é WEBP. O Outlook para Windows não exibe esse formato. O editor aceita WEBP e mostra um aviso assim que você escolhe o arquivo, mas, para todos verem a imagem, troque por uma versão em JPG ou PNG. Se a imagem aparece como um quadro vazio com a opção de baixar imagens, é o Outlook bloqueando imagens do remetente: quem recebe precisa liberar. Enquanto a imagem está bloqueada, o que aparece no lugar dela é o Texto alternativo. Ao enviar uma imagem, o editor já preenche esse campo com o nome do arquivo, quando o nome descreve algo (nomes como "IMG_2024…" ficam em branco). Revise o texto nas propriedades da imagem.
• Usei uma imagem da galeria e ela entrou como imagem nova em vez de trocar a antiga: a imagem antiga não estava selecionada. Volte em Edição, clique na imagem que quer trocar e só então abra a Galeria.
• A imagem foi parar num campo de imagem vazio que eu não queria preencher: sem imagem selecionada, a galeria preenche primeiro o campo vazio. Selecione a imagem que quer trocar antes de abrir a galeria, ou apague o bloco Imagem vazio.
• A imagem não foi enviada: confira se o arquivo é uma imagem e tem até 5 MB. O motivo aparece na lista logo abaixo da barra da galeria.