Montar o e-mail com linhas e blocos
Do e-mail em branco ao modelo pronto: linhas, blocos, texto formatado, linhas salvas e histórico.
Ao final, você tem um modelo salvo, com o e-mail montado em linhas e blocos, pronto para usar em campanhas e automações.
O passo a passo
Escolha como começar
Na aba Linhas da lateral, escolha Vazio (estruturas de coluna), Padrão (linhas prontas) ou Salvos (as suas linhas salvas). Clique na linha ou arraste para o e-mail.
Coloque os blocos
Na aba Objetos, arraste um bloco para uma coluna (“Clique ou solte um objeto aqui”) ou use Adicionar conteúdo dentro da coluna.
Configure cada bloco
Clique no bloco: o painel de propriedades abre com os controles dele. Texto se edita direto no e-mail.
Confira no celular
Use o alternador Mobile da barra superior. Volte para Desktop quando terminar.
Dê um nome e salve
Clique no nome do modelo, digite um nome (por exemplo, “Newsletter de julho”) e use Salvar.
Escolher o layout da linha
A aba Linhas → Vazio oferece estes layouts. Depois de colocar a linha, dá para adicionar, remover e redimensionar colunas.
| Layout | Colunas |
|---|---|
| 1 coluna | Uma coluna na largura toda. |
| 2 colunas | Duas colunas iguais. |
| 3 colunas | Três colunas iguais. |
| 4 colunas | Quatro colunas iguais. |
| 1/3 + 2/3 | Uma coluna estreita e uma larga. |
| 2/3 + 1/3 | Uma coluna larga e uma estreita. |
Usar uma linha pronta
A aba Padrão tem 12 linhas: Cabeçalho com menu, Cabeçalho com chamada, Funcionalidades 3 colunas, Seção hero, Hero com imagem, Blog 2 colunas, Blog 3 colunas, Artigo com imagem à esquerda, Rodapé 3 colunas, Rodapé, Citação e Cupom. Coloque a linha e troque o texto, as imagens e os links.
Os blocos
Estes são os blocos da aba Objetos. Os de conteúdo estão em Blocos de conteúdo e os de loja em Blocos de loja.
| Bloco | Para que serve |
|---|---|
| Título | Cabeçalho de seção, com níveis H1 a H4 e tipografia própria. |
| Parágrafo | Texto corrido com formatação, links e variáveis de personalização. |
| Lista | Lista com marcadores ou numerada, com recuo e espaçamento ajustáveis. |
| Imagem | Imagem hospedada no CDN, com link, alinhamento e largura. |
| Botão | Botão de ação com link, cor, raio e preenchimento próprios. |
| Tabela | Tabela de dados com bordas, cabeçalho e alinhamento por coluna. |
| Divisor | Linha horizontal para separar blocos. |
| Espaçador | Espaço vertical vazio entre blocos. |
| Social | Ícones das redes sociais, com links e tamanho configuráveis. |
| HTML | Trecho de HTML livre, limpo de conteúdo inseguro antes de entrar no e-mail. |
| Vídeo | Miniatura clicável do vídeo. O e-mail não reproduz vídeo embutido. |
| Menu | Menu de navegação com links para o site. |
| Produto | Produto da loja, com imagem, nome, preço e botão. |
| Carrinho | Itens do carrinho abandonado, montados no envio. |
| Pedido | Itens e resumo do pedido, montados no envio. |
| Contador | Contagem regressiva em GIF, para campanhas com prazo. |
| Cabeçalho | Logo da loja com menu de links, centralizado ou ao lado. |
| Rodapé da marca | Redes sociais e texto legal da loja, acima do descadastro. |
Formatar o texto
Selecione o texto em um Título ou Parágrafo e use a barra de formatação: Negrito, Itálico, Sublinhado, Tachado, Marca-texto, Emoji, Variáveis e Limpar formatação. O botão Variáveis insere dados do cliente ou do pedido; veja Usar variáveis.
Ajustar a linha
Clique na linha (título “Linha #n” no painel) para abrir as propriedades dela. Os controles valem para a linha inteira.
| Controle | O que faz |
|---|---|
| Cor de fundo da linha | A cor da faixa da linha, atrás da área de conteúdo. |
| Cor de fundo da área de conteúdo | A cor da área de conteúdo da linha. |
| Borda da área de conteúdo | Tipo, cor e cantos arredondados da área central. |
| Espaçamento da área de conteúdo | Margem interna da linha. |
| Alinhamento vertical | Topo, Centro ou Base, quando as colunas têm alturas diferentes. |
| Espaçamento entre colunas e entre blocos | Distância entre uma coluna e outra, e entre blocos da mesma coluna. |
| Empilhar no mobile | Faz as colunas virarem uma pilha no celular. |
| Ordem de empilhamento no mobile | Primeira coluna no topo ou Última coluna no topo. |
| Ocultar em | Esconde a linha em Desktop ou em Mobile. |
| Estrutura de colunas | Largura de cada coluna na grade de 12 partes, com fundo e espaçamento por coluna. |
Cada linha também tem as ações Mover linha, Duplicar linha, Excluir linha e Salvar linha. Cada bloco tem Mover bloco, Duplicar bloco e Excluir bloco.
Salvar uma linha para reaproveitar
Escolha a linha
Clique na linha e use Salvar linha, ou abra as propriedades da linha e use Salvar.
Dê um nome
Por exemplo, “Cabeçalho da newsletter”. Ao confirmar, o editor avisa Linha salva.
Use em outro e-mail
A linha aparece na aba Linhas → Salvos.
Atualizar ou salvar como nova
Uma linha que veio de uma linha salva mostra os dois caminhos: Atualizar substitui a original na biblioteca; Salvar como nova cria outra linha. Se alguma imagem não subir para o CDN, a linha é salva mesmo assim, com a imagem embutida, e o editor avisa quantas ficaram.
Trazer a versão nova de uma linha salva
Cada e-mail guarda a sua própria cópia da linha. Por isso, atualizar uma linha salva não muda os e-mails que já a usam. A linha continua ligada à original, mesmo depois de você salvar e reabrir o e-mail, e dá para trazer a versão nova quando quiser.
Selecione a linha no e-mail
Se a linha salva tem uma versão mais nova que a copiada no e-mail, o botão de atualizar, ao lado de Salvar linha, fica ativo e mostra um ponto. Ele aparece na barra da linha e no cabeçalho das propriedades da linha.
Clique no botão de atualizar
O editor pergunta Atualizar com a linha salva? e avisa que as alterações feitas nessa linha dentro do e-mail serão perdidas.
Confirme
Clique em Atualizar linha. O conteúdo é trocado pela versão salva, e você pode desfazer pelo histórico do editor.
Quando o botão não aparece ou fica apagado
Com a linha já na versão mais recente, o botão fica desabilitado. Se a linha salva foi excluída, ele não aparece, e a linha do e-mail continua como está.
Desfazer e histórico
Desfaça e refaça pelos botões da barra superior ou com Ctrl + Z (Cmd + Z no Mac). O Histórico lista as alterações feitas desde que o modelo foi aberto, como “Linha adicionada”, “Bloco movido” e “Cor de fundo”.