For AI agents: the complete documentation index is available at https://docs.clickmax.io/llms.txt, the full documentation bundle is available at https://docs.clickmax.io/llms-full.txt, and this page is available as Markdown at https://docs.clickmax.io/features/messaging/email-builder.md.
  • Português

      • 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 16 blocos disponíveis: Título, Parágrafo, Lista, Imagem, Botão, Table (tabela), Divisor, Distanciador, Redes sociais, HTML, Vídeo, Ícones, Menu, Texto, Consentimento e Importar HTML.
      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 para qualquer parte do e-mail, não só para os blocos da lista. Clicando numa área do e-mail que não é um bloco — o corpo, a área de conteúdo, uma caixa que veio dentro de um template importado — 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.

      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.

      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 ainda não está disponível — a aba aparece desligada para você saber que ela vem.
      • À 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.

      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

      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.
      • O painel sumiu: ele foi recolhido. Clique na setinha na borda esquerda do canvas para trazê-lo de volta.
      • Arrastei o bloco e ele não entrou: solte o bloco em cima do e-mail, não fora dele. A área cinza em volta não recebe conteúdo. Se estiver montando colunas, solte dentro de uma coluna.
      • 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.