Estrutura de e-mail: layouts, elementos e exemplos

O editor Blocks permite criar uma grande variedade de modelos de e-mail com pouco esforço e sem código, desde e-mails só de texto (como um e-mail de pedido de demissão) até os mais caprichados no design (como um e-mail de Natal)! Continue lendo para aprender a usar blocos vazios e elementos para montar um e-mail lindo e salvar blocos prontos para usar depois.

Por que usar blocos vazios e elementos no design de modelos de e-mail

Blocos vazios e elementos permitem criar modelos de e-mail sem programar: em vez de mexer no código HTML, você só escolhe as partes do e-mail de que precisa, como imagem, tabela ou botão, arrasta e solta no modelo e personaliza do jeito que quiser!

Para experimentar os blocos vazios e os elementos, abra o editor (com um modelo pronto da nossa galeria ou um modelo em branco) e vá para a aba Blocos ou Elementos. Depois, é só arrastar e soltar blocos vazios e elementos para montar o seu e-mail sem encostar no código!

Com blocos vazios e elementos, você economiza tempo na produção de e-mails e ganha um modelo bem estruturado, com tudo o que precisa para divulgar o seu produto: logo, contatos, texto organizado, CTAs claros, banner de newsletter e muito mais. Com o Blocks, você não esquece nenhum elemento importante do e-mail.

O que são blocos vazios no Blocks?

Se você quer inserir um novo elemento em um modelo pronto da nossa biblioteca ou montar um e-mail do zero, vai precisar arrastar e soltar uma nova estrutura no e-mail.

No Blocks, blocos vazios são espaços em branco onde depois você adiciona os elementos do e-mail (por exemplo, imagens, texto, botões etc.). Eles ajudam a manter o modelo organizado e a estruturá-lo do jeito que você precisa.

Escolha a estrutura de acordo com o seu objetivo: por exemplo, se quiser adicionar um cabeçalho, um rodapé ou um título, use uma estrutura de uma coluna. Se precisar organizar os elementos em várias colunas (por exemplo, três imagens em uma linha ou uma imagem com um texto ao lado), escolha uma estrutura com vários espaços.

Passo 1: escolha a estrutura

Passo 2: arraste e solte a estrutura onde precisar.

Depois de adicionar os blocos vazios, é hora de preenchê-los com elementos.

O que são elementos no Blocks?

Elementos são as partes básicas de um e-mail que você pode adicionar a um modelo no Blocks: por exemplo, imagens, botões, tabelas etc. Depois de adicionar a estrutura necessária ao e-mail, você pode colocar elementos em cada espaço livre dessa estrutura.

Passo 1: escolha o elemento

Passo 2: arraste e solte o elemento em um espaço livre da estrutura

Quais elementos você encontra na coleção e como usá-los

A nossa coleção de elementos reúne todas as partes essenciais de um modelo de e-mail (seja um e-mail promocional, de boas-vindas, de pesquisa ou de qualquer outro tipo que você queira criar):

• Imagem. Arraste e solte este elemento e faça upload da sua imagem (JPG, PNG, GIF ou WEBP) ou insira um link para ela nas propriedades do elemento, à direita. Outra opção é usar as funções de IA do Blocks para gerar a imagem perfeita para o seu modelo de e-mail.

• Texto. Depois de adicionar este elemento ao modelo, edite o texto como faria no MS Word ou no Google Docs: mude a fonte, o tamanho, a cor e outros parâmetros.
• Cabeçalho. Este elemento já vem formatado como título.
• Botão. Depois de personalizar o botão nas propriedades do elemento, à direita, não esqueça de adicionar o URL da página de destino.

• Listas. Escolha uma das duas listas para estruturar o texto: numerada ou com marcadores. Edite o texto e adicione suas próprias imagens à lista.
• Divisor. Use este elemento para separar as seções do e-mail. Dá para personalizar o divisor como qualquer outro elemento.
• Espaçador. Adiciona espaço vazio entre os elementos do modelo de e-mail. Este elemento cria mais respiro no design do e-mail.
• Redes sociais. Este elemento traz os logos das redes sociais mais populares. Adicione seus próprios links nas propriedades do elemento, à direita, para incentivar os assinantes a seguir você em outros canais.
• Tabela. Você pode adicionar texto e imagens à tabela.
• Contagem regressiva. Adiciona um timer de contagem regressiva que mostra quanto tempo falta para uma promoção ou um evento.
• Vídeo. Adiciona uma prévia do vídeo que leva o assinante até ele com um clique.
• Carrossel e Sanfona. Elementos AMP interativos: o carrossel permite que os assinantes passem pelas imagens, e a sanfona esconde o conteúdo em seções expansíveis.

Depois de adicionar e organizar todos os elementos necessários no modelo, não esqueça de clicar em Salvar ou usar o atalho Ctrl+S.

Como salvar elementos de e-mail para usar depois

Você não precisa montar os mesmos elementos do zero toda vez com blocos vazios e elementos: basta criar um elemento uma vez e salvá-lo na coleção de blocos para usar depois!

Para salvar um elemento de e-mail, siga estes passos simples:

1. Aponte o cursor para o elemento que você quer salvar. Uma barra vai aparecer à esquerda dele;

2. Escolha “Salvar em Blocos”;

3. Dê um nome ao elemento, defina o tipo e adicione tags: da próxima vez que precisar dele, você o encontra facilmente na coleção por essas palavras-chave.

Como encontrar um bloco de e-mail salvo

Todos os blocos que você salvou ficam guardados na coleção. Eles estão na aba Blocos, em Blocos salvos: pesquise por palavras-chave ou use os filtros.

Os blocos são salvos para o projeto inteiro (e não para um único modelo de e-mail): assim, você pode usar os blocos salvos em todos os modelos de e-mail desse projeto e nunca mais perder tempo criando tudo do zero.

Conclusão

Blocos vazios e elementos ajudam a poupar recursos na produção de e-mails e a organizar todas as partes do e-mail em um modelo caprichado. Com o Blocks, criar o design de um e-mail é simples:

1. Arraste e solte a estrutura necessária;
2. Arraste e solte elementos nos blocos vazios;
3. Personalize os elementos do e-mail como quiser;
4. Salve os blocos para usar depois e crie novos modelos de e-mail em minutos.