Conteúdo, Blocos e Muito Mais
O editor de email com recurso de arrastar e soltar foi criado para facilitar a criação de emails bonitos e eficientes. Ele é composto por duas seções principais: Blocos e Conteúdo.
Os Blocos permitem adicionar e organizar elementos como imagens, colunas, botões, textos e muito mais. Já a seção Body ajuda a definir o estilo geral do seu email, como cor padrão do texto, fundo e outros detalhes de design.
Você pode enviar suas próprias imagens ou escolher na nossa biblioteca de imagens prontas. Além disso, o recurso Auditoria (Audit) permite acompanhar possíveis ajustes necessários antes do envio.
Neste artigo, vamos explicar cada recurso disponível no editor. Clique em qualquer seção abaixo para ir direto ao ponto que deseja aprender.
Tópicos abordados neste artigo:
ANTES DE COMEÇAR
Os elementos de conteúdo só podem ser usados quando inseridos dentro de um bloco.
Por exemplo, você pode adicionar um elemento de Texto de Título dentro de um bloco de uma coluna no seu email.
Veja o exemplo abaixo.
Blocos
Cada bloco é composto por uma ou mais colunas. Dentro dessas colunas, você pode adicionar diferentes elementos de conteúdo, como texto, títulos, imagens, botões e muito mais.
Como visualizar as opções de estilo do Bloco
No seu email, clique fora do conteúdo e você verá o contorno do bloco. Clique em qualquer ponto desse contorno e, à esquerda, aparecerão as opções de estilo, identificadas como ROW (Linha).
Abaixo explicamos cada uma das opções de estilo disponíveis para os Blocos.
|
Colunas O bloco pode ser dividido em diferentes formatos, como:
Você pode selecionar o tipo de coluna antes ou depois de escolher o bloco. |
|
|
Antes: Vá até Blocos, selecione Todos, clique e arraste o bloco desejado para o editor. Depois: No editor, clique na seção do bloco e, no menu à esquerda, escolha o número de colunas que deseja usar. Ao selecionar duas ou mais colunas, você verá opções de edição para cada coluna individualmente. Também é possível adicionar ou excluir colunas nessa seção.
|
|
|
Propriedades da Coluna Aqui você pode definir:
As opções de Borda e Padding incluem a seção Mais Opções, que permite configurar cada lado individualmente (superior, inferior, direito e esquerdo). Dica: Use bordas para criar um efeito de “caixa de texto”. |
|
Propriedades da Linha (Row)
|
As propriedades da Linha permitem definir:
Se nenhuma cor de fundo for selecionada para o conteúdo, será aplicada a cor da Linha. Observação: A cor de fundo da coluna sobrescreve a cor de fundo do conteúdo. Upload de Imagem Aqui você pode adicionar uma imagem como fundo da linha. Use as Opções de Imagem para ajustar quanto da imagem ficará visível. |
|
|
|
|
Blocos Salvos
Para salvar uma seção do seu email:
- Clique no bloco.
- Clique em Salvar no canto inferior direito do bloco.
- Dê um nome e/ou adicione tags para organizar melhor.
Os blocos salvos ficam disponíveis no menu Blocos.
Exemplo:
Adicionar um bloco de 1 coluna + elemento de imagem, redimensionar a imagem e alterar a cor de fundo do bloco.
Elementos de Conteúdo
Na editoria, os elementos de conteúdo são o que são inseridos dentro de um Bloco. Às vezes, podemos nos referir a um bloco como uma linha ou coluna. Os elementos de conteúdo permitem que você adicione texto, imagens, botões e muito mais.
| As opções de estilo variam de acordo com o elemento utilizado; abaixo, vamos detalhar as opções de cada elemento. |
|
Clique em uma das opções abaixo para saber mais ou continuar lendo.
| Colunas | Texto |
| Título | Bloco de Imagem |
| Botão | Divisor |
| Menu | HTML |
| Vídeo | Social |
| Timer |
|
Colunas
Use o elemento Colunas para adicionar múltiplas colunas ao layout do seu email.
|
Use o elemento Colunas para adicionar múltiplas colunas ao layout do seu email. Depois, você pode inserir texto, imagens ou botões dentro de cada coluna. |
|
Texto
|
Com o elemento Texto, você adiciona conteúdo textual ao seu template. |
|
|
Há duas áreas de edição:
Clique na área de texto para editar — ambos aparecerão ao mesmo tempo. |
|
Barra de Texto
Permite:
- Negrito, Itálico, Sublinhado e Tachado
- Alterar cor da fonte
- Destacar texto
- Adicionar emojis 😎
- Criar listas com marcadores ou numeradas
- Inserir tabela
- Adicionar link
- Personalizar (inserir campos como nome e sobrenome do contato)
- Smart Text (IA para melhorar o texto: corrigir gramática, resumir, mudar tom, reescrever ou expandir conteúdo)
Menu de Texto (lado esquerdo)
Permite configurar:
- Fonte
- Peso da fonte (Regular ou Bold)
- Cor (aplicada a novos textos)
- Alinhamento (alinha todo o texto da seção)
- Altura da linha
- Espaçamento entre letras
- Links (personalização de aparência)
Por padrão, os links herdam o estilo definido na seção Body.
Título (Heading)
| Use o elemento Título para criar títulos e subtítulos. |
|
|
A barra de ferramentas do Título é um pouco diferente da barra de Texto comum. Ela permite ajustes básicos, mas não oferece opções para inserir tabelas, listas ou usar Smart Text. |
|
Imagem
|
O bloco Imagem permite:
Imagens usadas do banco de imagens são automaticamente salvas em Uploads. |
|
Botão
|
Adicione uma chamada para ação clara com o bloco Botão. Você pode personalizar:
|
|
A opção Smart Button sugere textos com base no botão. Você também pode inserir palavras-chave e deixar o SmartAssist gerar sugestões.
Os botões são essenciais para direcionar ações (CTAs) no email.
Tipo de Ação
Abrir Site
- Inserir URL
- Abrir na mesma aba
- Abrir em nova aba
Enviar Email
- Mail To
- Assunto
- Corpo da mensagem
Ligar para Número
-
Número de telefone
(ao clicar, abre o app de telefone do dispositivo)
Ir para Seção da Página
|
Permite criar um link que leva a outra seção do email. Para usar:
|
|
Estilo do Botão
- Cor de fundo
- Cor do texto
- Fonte
- Peso da fonte
- Alinhamento
- Altura da linha
- Espaçamento entre letras
- Padding
- Borda
- Bordas arredondadas
- Espaçamento do container
Divisor
Adiciona uma linha horizontal para separar seções.
Você pode personalizar:
- Largura
- Espessura
- Espaçamento
Exemplo: separar destaques de produtos da mensagem final.
Menu
|
Funciona como um menu de navegação de site.Permite adicionar links que:
|
|
|
Para usar:
Use a aba Estilos para personalizar cores e fontes. |
|
Exemplo: Use um menu com links como Recursos, Sobre Nós e Fale Conosco na parte superior ou inferior do seu e-mail para melhorar a navegação e aumentar o engajamento.
HTML
Permite inserir código HTML personalizado diretamente no template.
Vídeo
Adicione um vídeo colando a URL.
O vídeo não é reproduzido dentro do email. Será exibida uma imagem com botão de play. Ao clicar, o vídeo abre no navegador.
|
Após inserir a URL, você pode personalizar:
Alterações no vídeo (título ou thumbnail) devem ser feitas na plataforma onde ele está hospedado. |
|
Após inserir a URL, você pode personalizar:
- Estilo do ícone
- Cor do ícone
- Tamanho
- Espaçamento
Alterações no vídeo (título ou thumbnail) devem ser feitas na plataforma onde ele está hospedado.
- Qualquer edição no próprio vídeo (como alterar o título ou a miniatura) deve ser feita na plataforma onde o vídeo está hospedado.
- A maioria dos clientes de e-mail não suporta a reprodução de vídeo diretamente dentro do e-mail. O Bloco de Vídeo cria apenas uma imagem de visualização com um ícone de play para incentivar cliques.
Social
Adicione ícones de redes sociais ao seu email.
Como usar:
- Arraste o bloco Social.
- Clique no ícone desejado.
- Cole a URL do perfil (ex.: https://facebook.com/suamarca).
Opções de Estilo
- Tipo de ícone (Circle, Square etc.)
- Alinhamento
- Tamanho
- Espaçamento
-
As cores disponíveis são preto e branco.
Timer
O bloco Timer adiciona uma contagem regressiva em tempo real.
|
O bloco Timer adiciona uma contagem regressiva em tempo real. |
|
Ideal para:
- Promoções
- Eventos
- Lançamentos
- Ofertas por tempo limitado
Como usar
- Arraste o bloco Timer.
-
Clique nele para abrir as configurações.
Defina:
- Data e hora final
- Fuso horário
- Idioma
Se o email for aberto após o término, o contador mostrará 00-00-00.
Estilo do Timer
- Exibir ou ocultar rótulos (dias, horas etc.)
- Cor de fundo
- Cor dos números
- Cor dos rótulos
- Fonte
- Largura da imagem
- Alinhamento
- Texto alternativo (ALT)
- Link clicável
Body
A seção Body define a base visual do seu email, garantindo consistência no design.
Você pode configurar:
- Cor padrão do texto
- Cor de fundo geral
- Largura do email (padrão 600px)
- Alinhamento do conteúdo
- Fonte padrão
- Peso da fonte
- Cor dos links
Se nenhum estilo for alterado nos blocos individuais, eles herdarão as configurações do Body.
Imagens e Uploads
Essas opções estão disponíveis exclusivamente no editor.
|
A seção Image permite:
Imagens usadas ficam salvas em Uploads. |
|
Não é necessário adicionar um bloco antes de inserir uma imagem — ao arrastar para o editor, o bloco será criado automaticamente.
Uploads
|
Armazena:
Você pode reutilizar imagens facilmente arrastando-as para o editor. |
|
|
|
|
|
|
|
Auditoría (Audit)
A função Audit ajuda a revisar seu email antes do envio.
|
Ela identifica:
Para usar, clique em Audit no menu esquerdo do editor. |
|
Para usar, clique em Audit no menu esquerdo do editor.
Sugestão:
Sempre execute a Auditoria antes de finalizar o envio. É uma forma rápida de garantir que seu email esteja completo, acessível e profissional.