O editor de arrastar e soltar facilita a criação de e-mails com aparência profissional. Ele fornece mais opções para personalizar seu e-mail e também garante que o e-mail pareça perfeito em qualquer cliente de e-mail e dispositivo.

Neste artigo, mostraremos como usar seções e blocos de conteúdo para começar a criar o design do seu e-mail.

Dividimos os artigos sobre o editor de arrastar e soltar nas seguintes partes:

• Parte 1: visão geral do editor
• Parte 2: blocos de conteúdo x de seções - VOCÊ ESTÁ AQUI
• Parte 3: como usar os blocos de conteúdo?
• Parte 4: definir o estilo do design para o e-mail inteiro
• Parte 5: salvar blocos para reutilizá-los em seus e-mails
• Parte 6: editar e-mails na visualização de dispositivos móveis
• Parte 7: restaurar, pré-visualizar, testar e salvar o design do e-mail

O que é uma seção?

Uma seção é um bloco estrutural que consiste em uma ou mais colunas às quais podem ser adicionados blocos de conteúdo.

No exemplo abaixo, a seção (em verde) contém 2 blocos de conteúdo (em rosa) em 2 colunas diferentes: 2 imagens e 2 blocos de texto.

No editor de e-mail, há dois tipos de seções:

• Seções personalizadas
  As seções personalizadas são as seções que o próprio usuário cria arrastando e soltando blocos de conteúdo. 
• Seções pré-criadas
  As seções pré-criadas são layouts pré-fabricados de diferentes blocos de conteúdo e permitem que você crie facilmente designs de e-mail sem a necessidade de habilidades de design. 

É sempre possível adicionar, remover ou redimensionar colunas clicando na seção e usando os controles deslizantes para movê-las e os botões +/- para adicionar colunas:

Configurações de seção

Você pode renomear sua seção clicando no ícone de caneta ao lado do título.

Selecione uma seção para exibir as seguintes configurações no painel de navegação esquerdo: 

Plano de fundo Configurações do bloco Espaçamento

Com essa configuração, você pode definir a cor do plano de fundo e aplicar o plano de fundo em toda a largura. Você também pode clicar em Add a background image (Adicionar uma imagem de fundo) para exibir a Content library (Biblioteca de conteúdo) e usar seus arquivos ou imagens de estoque como fundo. Se você quiser usar uma imagem diretamente da Internet, cole o link para essa imagem no campo Insert image from URL (Inserir imagem do URL).

A configuração Vertical alignment (Alinhamento vertical) permite alterar a posição do conteúdo dentro da seção: superior, central ou inferior.

A configuração Spacing (Espaçamento) permite que você adicione:

• Espaço entre as colunas da seção selecionada usando as setas para cima e para baixo ou digitando o espaçamento desejado.
• Preenchimento, que é o espaço entre o elemento e a borda. Ele está nos quatro lados do conteúdo e o tamanho de cada lado pode ser alterado.
• Margem, que é o espaço entre a borda e o próximo elemento do design. Está ao redor dos lados superior e inferior do conteúdo e o tamanho de cada lado pode ser alterado.

Alterne o botão Padding (Preenchimento) ou Margin (Margem) para ativá-los ou desativá-los com um clique. Escolha o tamanho do preenchimento ou da margem que deseja adicionar a cada lado do conteúdo usando os botões +/- ou escrevendo o tamanho desejado no campo de texto.

Ações de seção

É possível mover uma seção na vertical: passe o mouse sobre a seção e mantenha-o pressionado enquanto a move para o local desejado. A linha azul mostrará para onde o bloco será movido.

Existem algumas ações disponíveis no canto inferior esquerdo de um bloco de estilo, quando selecionado:

1. Move (Mover)
   Arraste e solte a seção onde quiser em seu e-mail.
2. Move up (Mover para cima) e Move down (Mover para baixo)
   Mova a seção para cima e para baixo no e-mail. 
3. Duplicate (Duplicar) (⌘ ou Ctrl + D) 
   Depois de escolher todas as configurações da seção, é possível duplicá-la. Isso economiza tempo de verdade ao criar seu e-mail.
4. Save (Salvar)
   Salve uma seção para reutilizá-la em outros e-mails. As seções salvas aparecerão na guia My Content (Meu conteúdo) no painel esquerdo. Para saber mais, consulte nosso artigo dedicado Como salvar conteúdo para reutilizar em e-mails.
5. Delete (Excluir) (⌫ + ↵)
   Use essa opção para excluir uma seção.
6. Visibilidade de conteúdo (mostrar ou ocultar)
   Oculte ou mostre uma seção adicionando condições ou com base no dispositivo do destinatário. Para saber mais, consulte nossos artigos dedicados Mostrar ou ocultar conteúdo com base em atributos de contato e Mostrar ou ocultar conteúdo com base no tipo de dispositivo. 
7. Repeatable content (Conteúdo repetível)
   Você pode repetir seções em seus recibos ou e-mails de carrinho abandonado. Para saber mais, consulte nosso artigo dedicado Repita uma série de conteúdos em seus e-mails.

O que é um bloco de conteúdo?

Os blocos de conteúdo são diferentes tipos de conteúdo que você pode adicionar ao seu e-mail. É possível arrastar e soltar os blocos de conteúdo em seções.

Os blocos de conteúdo disponíveis são:

Título	Texto	Imagem	Vídeo
Botão	Logotipo	Social	HTML
Divisor	Produto	Navegação	Espaçador

Cada bloco de conteúdo tem sua própria configuração que pode ser personalizada conforme necessário e que substituirá as configurações do modelo padrão. Você pode mover blocos de conteúdo da mesma forma que as Seções e também pode ocultar ou mostrar, duplicar, salvar e excluir blocos de conteúdo. Para saber mais, consulte nosso artigo dedicado Como usar os blocos de conteúdo?.

As ações extras (link, pré-visualizar, substituir imagem etc.) serão diferentes de acordo com o tipo de bloco que você está editando. Veja o exemplo abaixo com as ações para o bloco Image (Imagem) (em rosa) e um bloco Text (Texto) (em verde):

Bloco de conteúdo de imagem
Bloco de conteúdo de texto

⏩ O que vem a seguir?

• Parte 3: como usar os blocos de conteúdo?
• Parte 4: definir o estilo do design para o e-mail inteiro
• Parte 5: salvar blocos para reutilizá-los em seus e-mails
• Parte 6: editar e-mails na visualização de dispositivos móveis
• Parte 7: pré-visualizar e enviar e-mail de teste

🤔 Dúvidas?

Em caso de dúvida, sinta-se à vontade para entrar em contato com nossa equipe de suporte, criando um tíquete a partir da sua conta. Caso ainda não tenha uma conta, entre em contato conosco aqui.

Se você está procurando ajuda com um projeto usando o Brevo, podemos encontrar o parceiro especialista certificado em Brevo.