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 seu e-mail pareça perfeito em qualquer cliente de e-mail e dispositivo.

Neste artigo, explicaremos mais detalhadamente como usar os blocos de conteúdo em seus e-mails e como modificar suas configurações.

Dividimos os artigos do editor arrastar e soltar nas seguintes partes:

• Parte 1: Visão geral do editor
• Parte 2: Blocos de estilo versus conteúdo
• Parte 3: Como usar blocos de conteúdo? - VOCÊ ESTÁ AQUI
• Parte 4: Definindo o estilo do design para o e-mail inteiro
• Parte 5: Como salvar blocos para reutilizá-los em suas campanhas
• Parte 6: Como editar e-mails na visualização de dispositivos móveis
• Parte 7: Restaurar, pré-visualizar, testar e salvar o design da campanha

Antes de começar

Configure sua Brand library (Biblioteca de marca) para que cada novo modelo selecionado herde as propriedades de sua marca, como logotipo, cores, fontes e links de redes sociais. Além de economizar seu tempo, a Biblioteca de marca permite que você mantenha uma marca de e-mail consistente. Para saber mais, consulte nosso artigo dedicado Crie automaticamente seus e-mails com seus ativos de marca usando a Biblioteca de marca.

Título e texto

Barra de ferramentas de formatação de texto

Selecione o bloco de conteúdo Text (Texto) ou Title (Título) no designer para exibir a barra de ferramentas de formatação de texto na parte superior do bloco com as seguintes opções:

Colors Add a personalization Insert links

As cores que você usa no seu modelo agora serão salvas no seletor de cores. Você sempre pode remover uma cor salva selecionando um texto com essa cor, clicando no seletor de cores e depois em Remover cor. Ela pode demorar alguns minutos para desaparecer.

Clique em 👤 para inserir uma personalização em seu texto, como o primeiro nome dos destinatários, por exemplo.
Para mais informações, veja como personalizar seu texto usando atributos de contato.

Para inserir um link no seu texto, selecione o texto, clique no ícone Link ou pressione ⌘ ou Ctrl + K e preencha os detalhes na janela Insert/edit link (Inserir/editar link). O título do link é o pop-up que aparece quando você passa o mouse sobre o link.

Você pode selecionar diferentes tipos de links:

Links externos

• Link absoluto (URL)
  Esta é a opção básica para links, escolha esta para adicionar um URL.
• Email Link (Link de e-mail) (mailto)
  Adicione um link para um endereço de e-mail.
• Click to call phone number (Clique para ligar para o número de telefone)
  Adicione um link para um número de telefone.

Links padrão

• Link para cancelamento de inscrição (global)
  O link para cancelamento de inscrição é adicionado automaticamente ao rodapé de suas campanhas. É um link no qual os destinatários podem clicar para abrir a página de cancelamento de inscrição da Brevo e parar de receber seus e-mails. Ter um link para cancelamento em suas campanhas é obrigatório, pois é essencial para seus contatos e para o bom funcionamento de suas campanhas.
  ➡️ Para saber mais, consulte o artigo dedicado sobre links para cancelamento de inscrição.
• Link para double opt-in 
  Adicione um link para double opt-in ao seu modelo de e-mail se desejar que os destinatários confirmem a assinatura dos seus e-mails após o preenchimento do formulário de inscrição. 
  ➡️ Para saber mais, consulte o artigo dedicado sobre como criar um modelo de confirmação de double opt-in.
• Ver no navegador
  O link de espelho pode ser adicionado ao cabeçalho de suas campanhas. É um link no qual os destinatários poderão clicar se tiverem problemas para visualizar seu e-mail na caixa de entrada e quiserem abri-lo como uma página da web. Disponibilizar um link de espelho em suas campanhas não é obrigatório.
  ➡️ Para saber mais, consulte o artigo dedicado sobre links de espelho.
• Atualize suas preferências
  A Brevo oferece um formulário de atualização de perfil para ajudar você a coletar informações atualizadas sobre seus assinantes, como detalhes, preferências e até mesmo em quais listas eles desejam se inscrever. Recomendamos incluir um link para esse formulário no rodapé de todos os seus e-mails para ajudar os assinantes a compartilharem suas preferências com você. 
  ➡️ Para saber mais, consulte o artigo dedicado sobre links para atualização do perfil.
  
  💡 É bom saber

  Seu formulário de atualização do perfil será adicionado automaticamente às configurações adicionais da sua campanha de e-mail,conforme explicado aqui.
  Se estiver criando um modelo de e-mail, você precisará adicionar manualmente o link ao formulário Atualizar suas preferências .

Links da Brevo

• Pagamentos
  Selecione um dos links para pagamento criados em Pagamentos. 
  ➡️ Para saber mais, confira os artigos dedicados sobre Pagamentos. 

Links para âncora

• Anchor for relative links (Âncora para links relativos)
  Crie uma âncora em algum lugar da sua campanha e usa a opção de link relativo para vincular a essa âncora. 
• Link relativo (para âncora)
  Depois de criar a âncora na sua campanha, use esta opção para fazer a vinculação com a âncora.
  Por exemplo, voltar a uma parte específica do boletim informativo no topo da página.

Para remover ou atualizar um link, coloque o cursor sobre o link e clique no ícone Link para mostrar os botões Remove (Remover) e Update (Atualizar).

Assista ao vídeo para saber mais sobre como adicionar um link, cor de fundo ou imagem e modificar configurações de bloco de texto:

Configurações do painel esquerdo

Mesmo bloco, formatação diferente

Clique no bloco Text (Texto) para exibir o painel esquerdo com configurações adicionais semelhantes às disponíveis na guia Design . 
Para obter mais informações sobre como usar essas configurações, consulte Como definir o estilo de design para todo o seu e-mail.

Com este editor, é possível escolher diferentes formatações dentro do mesmo bloco de texto. Por exemplo, você pode ter um título seguido de um parágrafo e marcadores. Também pode haver cores diferentes dentro do mesmo bloco. 

Bordas

Você também pode adicionar bordas ao seu bloco Text (Texto), bem como às suas imagens, usando a configuração Borders (Bordas) no painel esquerdo. Você pode definir tamanhos e cores diferentes para cada borda ou usar o botão Apply on all sides (Aplicar em todos os lados) para aplicar um tamanho e cor exclusivos para todas as bordas. 

Imagem

Você pode adicionar uma imagem da guia Content (Conteúdo) usando o bloco Image (Imagem). Você poderá adicionar a imagem escolhida arrastando e soltando de seu sistema, sua biblioteca de conteúdo ou colando o link para sua imagem no campo Insert image from URL (Inserir imagem do URL). Você pode redimensionar ou editar sua imagem diretamente no editor.

Existem outras configurações no painel esquerdo que são semelhantes às disponíveis na guia Design. 
Para obter mais informações sobre como usar essas configurações, consulte Como definir o estilo de design para todo o seu e-mail.

Adicionar uma imagem

Redimensionar uma imagem

Para redimensionar uma imagem, clique na imagem que deseja redimensionar para selecioná-la e coloque o cursor no canto inferior direito da imagem. Quando a seta dupla aparecer, puxe a ponta até encontrar o tamanho perfeito. O tamanho da sua imagem é exibido na parte superior e é atualizado automaticamente enquanto você redimensiona a imagem.
Você também pode usar o campo Width (Largura) no painel esquerdo para redimensionar sua imagem.

Editar uma imagem

Nosso Editor de arrastar e soltar inclui um editor de fotos que permite cortar a imagem, adicionar filtros, texto ou design de texto. Para acessar o editor de fotos, clique na sua imagem e clique no botão Edit (Editar) nas Image settings (Configurações de imagem).

Você também pode:

• Editar uma foto da biblioteca de conteúdo
• Crie sua própria imagem e salve-a na biblioteca de conteúdo graças ao recurso Create image (Criar imagem). Para saber mais, consulte nosso artigo dedicado Criar uma newsletter de qualidade profissional com nosso recurso Criar imagem.

Adicionar um link a uma imagem

Adicionar um link a uma imagem permite redirecionar seus destinatários. Você pode redirecioná-los para uma página ou arquivo.

Adicione um texto alternativo às suas imagens

Um texto alternativo é uma breve descrição da imagem que aparecerá se ela não for carregada ou se o destinatário estiver usando um leitor de tela. O texto alternativo aumenta a acessibilidade, melhora a experiência do usuário e transmite a mensagem mesmo que as imagens estejam bloqueadas ou não possam ser exibidas.

Para adicionar um texto alternativo às suas imagens:

1. Selecione a imagem à qual deseja adicionar um texto alternativo. O painel esquerdo com as configurações de conteúdo é aberto. 
2. Localize o campo Texto alternativo na seção Image settings (Configurações de imagem).
3. Digite uma breve descrição de sua imagem. Recomendamos que você escreva uma descrição breve e precisa do conteúdo da imagem, transmitindo apenas as informações essenciais. Evite escrever Imagem de e mantenha a descrição focada no propósito da imagem. 
   

Botão

Adicione botões para criar uma chamada para ação em seus e-mails:

1. Arraste e solte o bloco Button (Botão) em sua campanha.
2. Substitua o texto Call to action (Chamada para ação) por um texto que corresponda ao conteúdo para o qual você deseja redirecionar seus destinatários. 
   Você pode personalizar o texto com atributos de contato. 
3. Opcional: use a barra de ferramentas de formatação de texto e as configurações do botão no painel esquerdo para personalizar seu botão. 
4. Adicione um link para redirecionar seus destinatários.
   Redirecionar para uma página Redirecionar para um arquivo

   Para redirecionar seus destinatários para a página escolhida por você:

   1. Selecione o botão e clique em Add link (Adicionar link).
   2. Selecione o tipo de link que deseja inserir e insira seu URL no campo Link target (Destino do link).
   3. Opcional: adicione um Título de Link que será mostrado como uma dica de ferramenta quando o ponteiro do mouse passar.
   4. Clique em Insert (Inserir).
      

   Para redirecionar seus destinatários para um arquivo que você gostaria que eles baixassem:

   1. Carregue seu arquivo para um provedor terceirizado , como WeTransfer ou Dropbox, e certifique-se de que o arquivo esteja acessível publicamente.
   2. Selecione a imagem e clique em  Add link (Adicionar link).
   3. No campo Type of link (Tipo de link), selecione Absolute link (URL) (Link absoluto (URL)).
   4. Insira o URL do arquivo no campo Link target (Destino do link).
   5. Opcional: adicione um Título de Link que será mostrado como uma dica de ferramenta quando o ponteiro do mouse passar.
   6. Clique em Insert (Inserir).
      

Assista ao vídeo para saber mais sobre como modificar configurações como largura, raio da borda, tamanho da linha e cor de fundo do bloco de botões.

Logo

Este bloco de conteúdo permite que você insira o logotipo da sua marca em qualquer lugar do design do seu e-mail. Adicione seu logotipo à biblioteca de sua marca para evitar ter que carregá-lo novamente todas as vezes. 

Redes sociais

O bloco Social permite redirecionar seus destinatários para suas páginas de redes sociais quando eles clicam nos ícones.

Recomendamos configurar sua Biblioteca de marcas para salvar permanentemente seus links de mídia social nos ativos de sua marca. Ao arrastar e soltar o bloco de conteúdo Social no design do seu e-mail, os links serão preenchidos automaticamente nos campos de configurações de Ícones . 

Para saber como usar o bloco de conteúdo social, consulte nosso artigo dedicado Insira links e ícones de mídia social no design do seu e-mail.

HTML

O bloco HTML permite adicionar seu próprio código. Você pode digitar ou copiar e colar seu código. Para ver a pré-visualização do seu código basta sair do bloco HTML.

Alguns clientes de e-mail não são compatíveis com todo o conteúdo HTML, pois o HTML do e-mail não é tão desenvolvido quanto o HTML da Web. Para evitar problemas com seu código no editor e bloco de HTML, consulte nosso artigo dedicado Como usar HTML em suas campanhas de e-mail.

Divisor

O bloco divisor adiciona uma linha horizontal para separar os blocos.

Assista ao vídeo para saber mais sobre como modificar configurações como espessura, cor, forma, largura e cor de fundo do bloco divisor.

Produto

Arraste e solte o bloco de conteúdo Product (Produto) em seu boletim informativo. Você verá a imagem do produto, o título do produto, a descrição do produto e o preço do produto. O URL do produto é vinculado automaticamente à imagem e ao botão do produto, desde que sua loja esteja publicada.

Espaçador 

O bloco de conteúdo do espaçador permite adicionar um bloco de espaço dentro do design do seu e-mail. Você pode editar a largura ou altura do bloco de conteúdo do espaçador para criar um espaço maior ou menor. A largura máxima é 100% e a altura mínima é 30px. Você também pode alterar a cor do bloco espaçador para criar um bloco colorido.

Vídeo 

Use nosso bloco de conteúdo de Vídeo para inserir facilmente um link de vídeo em suas campanhas de e-mail:

Para saber mais, consulte nosso artigo dedicado Como inserir vídeos em minha campanha de e-mail.

Seções

As seções pré-criadas são layouts predefinidos de blocos de conteúdo que podem ser preenchidos e personalizados conforme necessário. Você pode usar seções pré-criadas de texto e imagens, mas também pode usar cabeçalhos e rodapés pré-criados. 

Para saber mais, consulte nosso artigo dedicado Economize tempo criando os seus e-mails com seções pré-criadas.

Cabeçalho e rodapé

Use o bloco Header (Cabeçalho) para adicionar o logotipo de sua empresa ou links relevantes, como links para seu site ou mídias sociais.

O bloco Footer (Rodapé) é essencial porque fornece aos destinatários mais informações sobre sua empresa e permite que eles cancelem a assinatura ou editem suas preferências. Ele pode ser composto por:

⏩ O que vem a seguir?

• Parte 4: Definindo o estilo do design para o e-mail inteiro
• Parte 5: Como salvar blocos para reutilizá-los em suas campanhas
• Parte 6: Como editar e-mails na visualização de dispositivos móveis
• Parte 7: Como 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.