Editor de blocos e modelos prontos

No passo Mensagem da campanha, o conteúdo pode ser feito de três jeitos:

• Visual: texto formatado, como num e-mail escrito no Gmail. Bom para mensagens pessoais e prospecção.
• Blocos: e-mail de vitrine, montado com peças prontas (banner, colunas, produtos, botões). É o assunto deste artigo.
• HTML: para quem já tem o código pronto de outro lugar.

O e-mail montado em blocos sai certo no Gmail, no Outlook, no celular e no modo escuro. O Hermod gera o código por você.

Comece por um modelo

Ao escolher Blocos, abre a galeria de modelos. Eles já vêm com o logo, as cores, as redes sociais e o endereço da sua empresa, configurados em Marca e imagens:

• Newsletter, Promoção / oferta, Lançamento / novidade, Convite para evento ou webinar
• Material para baixar, Comunicado, Boas-vindas, Datas comemorativas
• Em branco: só o cabeçalho e o rodapé com a sua marca

Se você já tinha escrito algo no editor visual, use Usar o texto que já escrevi: títulos, textos e imagens viram blocos.

Montar e editar

• Adicionar: na aba Blocos ao lado, clique num bloco (ele entra abaixo do selecionado) ou arraste até o lugar certo.
• Editar: clique no bloco. Títulos e textos são digitados direto no e-mail. As outras opções (link, cores, tamanho, espaços) ficam na aba Bloco.
• Mover, duplicar ou apagar: pelos botões que aparecem em cima do bloco selecionado.
• Desfazer e refazer: pelas setas acima do e-mail, ou com Ctrl+Z e Ctrl+Y.
• Estilo: fonte, cores, cantos arredondados e largura do e-mail inteiro.
• Celular: o botão do celular mostra como fica numa tela pequena. Colunas e produtos ficam um embaixo do outro. Cada bloco pode ser escondido no celular.
• Zoom: ao lado do botão do celular, − e + aumentam ou diminuem o e-mail na tela (de 50% a 200%), e clicar no percentual volta para 100%. Ajustar faz o e-mail ocupar a largura livre, bom para monitores grandes. O zoom é só para editar: o e-mail enviado não muda.

Os blocos disponíveis são: logo, título, texto, imagem, botão, banner (imagem com texto e botão por cima), colunas, produtos (até 3 lado a lado, com preço "de/por"), matérias, vídeo, cupom, ícones com texto, divisor, espaço, redes sociais e rodapé.

Imagens

Clique em Escolher imagem num bloco. A janela de imagens tem:

• Biblioteca: as imagens da sua organização. Envie do computador (ou arraste para a janela), pesquise pelo nome e escreva o texto alternativo, que aparece quando a imagem não carrega.
• Banco de imagens: fotos, ilustrações e vetores (desenhos) gratuitos para uso comercial. Escolha o tipo, pesquise, por exemplo, "café" ou "escritório", e clique na imagem. Ela vai para a sua biblioteca com o crédito do autor. Ilustrações e vetores costumam vir com fundo transparente. Em Desenhos na sua cor há desenhos de pessoas (em ação e em retrato) que já vêm na cor da sua marca: troque a cor se quiser e clique no desenho.
• Endereço: traga uma imagem da internet pelo endereço. Use só imagens que você tem direito de usar.

O Hermod reduz e comprime cada imagem sozinho: uma foto de celular de 5 MB fica com poucas centenas de KB, e e-mail leve chega mais rápido. Dá também para recortar (livre, quadrado, 16:9, 2:1 ou 3:4).

Ícones

Ícones pequenos (telefone, WhatsApp, e-mail, endereço, relógio, check, entrega, segurança...) deixam o e-mail mais fácil de ler. São mais de 100, em 6 grupos, com pesquisa pelo nome. Viram imagens leves e nítidas, que aparecem no Gmail, no Outlook e no celular. Os ícones de marca (WhatsApp, Instagram, Pix...) usam a cor da marca, e os outros usam a cor dos botões. Dá para trocar a cor em cada bloco.

Há três jeitos de usar:

• Bloco Ícones com texto: uma lista (ícone ao lado do texto, como os contatos da empresa) ou uma grade (ícone em cima, com título e texto, como as vantagens de um produto, 2 a 4 por linha). Cada item pode ter um link, por exemplo tel:+5511... para ligar, https://wa.me/5511... para abrir o WhatsApp ou mailto: para escrever um e-mail.
• No botão: na aba Bloco, em Ícone, escolha um ícone para ir antes ou depois do texto do botão, como o do WhatsApp em "Chamar no WhatsApp".
• No meio do texto: com o texto aberto para edição, clique no botão de carinha da barra de formatação, escolha o ícone, o estilo, a cor e o tamanho, e clique em Inserir ícone.

Os estilos são: Simples (só o desenho), Círculo (desenho branco num círculo colorido) e Suave (desenho colorido num círculo clarinho).

Prévia e conferência

O botão Prévia mostra o e-mail como vai sair, com a assinatura e o rodapé de descadastro, no computador, no celular e no modo escuro (como fica nos aplicativos que invertem as cores).

Na Revisão, a Conferência do conteúdo avisa antes do envio:

• trechos ✎ ou imagens de exemplo esquecidos (impede o disparo);
• e-mail acima de 102 KB, que o Gmail corta (e esconde o descadastro);
• e-mail quase só de imagem, ou com muita imagem para pouco texto;
• imagem sem texto alternativo, botão sem link e link que não vai abrir.

Salvar como modelo

Gostou do visual? Clique em Salvar como modelo. Ele aparece na galeria para toda a equipe da organização, em Modelos da sua equipe. Para renomear ou apagar, vá em Marca e imagens, aba Modelos salvos.

Trocar de editor

Dá para sair dos blocos a qualquer momento. Em HTML, o e-mail vira o código que seria enviado. No Visual, ficam os textos, títulos, imagens e botões, mas colunas, banners e cores de fundo se perdem. O Hermod pergunta antes de trocar.