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:

• Link absoluto (URL)
  Esta é a opção básica para links, escolha esta para adicionar um URL.
• Ver no navegador
  O link espelho pode ser adicionado ao cabeçalho de suas campanhas. É um link no qual os destinatários podem clicar se tiverem problemas para visualizar seu e-mail na caixa de entrada e quiserem abri-lo como uma página da Web. Ter um link espelho em suas campanhas não é obrigatório.
  ➡️ Para mais informações, consulte nosso artigo dedicado sobre links espelho.
• Cancelar assinatura
  O link de cancelamento de assinatura é adicionado automaticamente ao rodapé de suas campanhas. É um link no qual os destinatários podem clicar para abrir a página de cancelamento de assinatura da Brevo e parar de receber seus e-mails. Ter um link de cancelamento de assinatura nas suas campanhas é obrigatório, pois é essencial para seus contatos e para o bom funcionamento de suas campanhas.
  ➡️ Para obter mais informações, consulte nosso artigo dedicado sobre links de cancelamento de assinatura.
  
• 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 este formulário no rodapé de todos os seus e-mails para ajudar os assinantes a compartilharem suas preferências com você. 
  ➡️ Para obter mais informações, consulte nosso artigo dedicado sobre Atualizar links de perfil.
  
  💡 É bom saber

  Esta opção será adicionada automaticamente quando você selecionar um formulário em Campaign > Advanced settings (Campanha > Configurações avançadas) > Use a custom update profile form (Usar um formulário de atualização de perfil personalizado) conforme explicado aqui.
  Se esta opção estiver esmaecida, você precisará ativá-la em Campaigns > Advanced settings (Campanhas > Configurações avançadas). Se estiver usando um modelo, você precisará adicionar manualmente o link ao formulário Atualizar suas preferências.
• 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.
• 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. 
• Relative link (for anchors) (Link relativo (para âncoras))
  Depois de criar a âncora na sua campanha, use esta opção para vincular à âncora.
  Por exemplo, voltando a uma parte específica da newsletter 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 em azul no canto inferior direito da imagem 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.

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.

1. Na guia Content (Conteúdo), arraste e solte o bloco Social em sua campanha.
2. Mantenha as Icons design settings (Configurações de design dos ícones) nos valores padrão ou escolha o Size (Tamanho), Style (Estilo), Theme (Tema) e Spacing (Espaçamento) que você gostaria de atribuir aos seus ícones de rede social.
3. Cole o link para suas páginas de rede social no respectivo campo Icons settings (Configurações dos ícones).
   Você pode clicar em Add more (Adicionar mais) para adicionar ícones e links de rede social, se necessário, ou clicar no ícone de lixeira para excluir um ícone e link de rede social do bloco. 

Assista ao vídeo para saber mais sobre como modificar as configurações do bloco social.

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.

Estilo 

Os blocos de conteúdo de estilo são blocos de conteúdo predefinidos que você pode preencher com outros blocos de conteúdo. Você pode escolher entre três blocos de conteúdo de estilos diferentes. Para saber mais, consulte nosso artigo dedicado Blocos de estilo x conteúdo.

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.

Cabeçalho e rodapé

Use o bloco Header (Cabeçalho) para adicionar o logotipo da sua empresa.

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:

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.

⏩ 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.