Pular para o conteúdo principal

Editor arrastar e soltar [Novo] - Parte 3: como usar os blocos de conteúdo? (Texto & Links, Imagem, Botão, etc.)

O Editor arrastar e soltar [Novo] torna fácil criar e-mails de aparência profissional. Ele oferece mais opções para personalizar seu e-mail e também garantir que seu e-mail pareça perfeito em qualquer provedor de e-mail e dispositivo.

Neste artigo, vamos nos aprofundar em como usar os blocos de conteúdo em seus e-mails e como alterar suas configurações.

Dividimos os artigos sobre o Editor arrastar e soltar [Novo] nas seguintes partes:

Dica

Você pode configurar sua Biblioteca de marca, de modo que cada novo modelo selecionado por você herde as propriedades de sua marca, como logo, cores, fontes, e links de redes sociais. Além disso, para economizar tempo, a Biblioteca de marca permite que você mantenha a consistência de marca do seu e-mail. Para saber mais, consulte nosso artigo dedicado Crie automaticamente seus e-mails com os ativos de sua marca usando a Biblioteca de marca.

Título e texto

Barra de ferramentas de formatação de texto

Selecione o bloco de conteúdo Texto ou Título no criador de desgin para exibir a barra de formatação de texto no topo do bloco com as seguintes opções:

  • Estilo (parágrafo, títulos, link, botão)
  • Fonte
  • Tamanho
  • Cor do texto
  • Formatação do texto (Negrito, itálico, sublinhado, tachado, Sobrescrito, Subscrito)

DEE_formatting-toolbar-text_EN-US.gif

❗️ Importante
Quando você cola conteúdo de outra campanha ou editor, suas formatações, tabelas e imagens não aparecerão no editor Arrastar e soltar para evitar que seu conteúdo seja arruinado por formatações ocultas. Recomendamos que você duplique ou salve seu bloco de conteúdo para reutilizá-lo no editor Arrastar e soltar. 
Cores Remover formato Personalização Inserir links
DDE_colors_EN.png

As cores usadas em seu modelo serão agora salvas no seletor de cor. Você sempre pode remover uma cor salva, selecionando um texto com esta cor, clicando no seletor de cor e então em Remover cor. Ela pode levar alguns minutos para desaparecer.

💡 Dica
Adicionamos as Cores de sua marca aos seus modelos!
Usamos o API Brand Fetch para obter todas as informações disponíveis sobre sua marca e preencher automaticamente logotipo, cores e mídias sociais, se disponíveis, para personalizar todos os 4 layouts básicos dos modelos.

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

Configurações do painel esquerdo

Mesmo bloco, diferente formatação

Clique no bloco Texto para exibir o painel à esquerda com configurações adicionais similares àquelas disponíveis na aba Design
Para mais informações sobre como usar estas configurações, consulte Como configurar o estilo do design para todo o seu e-mail.

Com este novo editor, você pode escolher diferentes formatações dentro do mesmo bloco de texto. Por exemplo, você pode ter um título seguido por um parágrafo e marcações. Você também pode ter diferentes cores no mesmo bloco.

DEE_text-block_EN-US.gif

Bordas

Você também pode adicionar bordas ao seu bloco de Texto, bem como suas imagens, usando a configuração Bordas no painel à esquerda. Você pode configurar diferentes tamanhos e cores para cada borda ou ativar o botão Aplicar a todos os lados para aplicar um único tamanho e cor para todas as bordas. 

DDE_borders_EN-US.gif

Imagem

Você pode adicionar uma imagem a partir da aba Conteúdo, usando o bloco Imagem. Você será capaz de adicionar a imagem de sua escolha, clicando em Substituir ou colando o link para sua imagem no campo Inserir a imagem da URL. Você pode redimensionar ou editar sua imagem diretamente no editor. 

Para saber mais, consulte nosso artigo dedicado Como usar pastas para organizar imagens em sua Biblioteca de conteúdos.

Existem configurações adicionais no painel à esquerda que são similares àquelas disponíveis na aba Design. Para mais informações sobre como usar estas configurações, consulte Como configurar o estilo de todo o seu e-mail.

Você também pode adicionar bordas ao seu bloco Imagem usando a configuração Bordas no painel à esquerda. Você pode configurar diferentes tamanhos e cores para cada borda ou ativar o botão Aplicar em todos os lados para aplicar um único tamanho e cores para todas as bordas.

DEE_image-settings_EN-US.gif

Adicionando uma imagem

Via biblioteca de conteúdo Via uma URL
  1. Selecione o bloco de imagem e clique em Substituir nas configurações de imagem, que abre sua biblioteca de conteúdo.
  2. Localize a imagem que gostaria de inserir em Meus arquivos ou Estoque de imagens.
    • Meus arquivos: estas são suas próprias imagens, que você pode carregar. Clique em Novo upload para carregar uma ou mais imagens a partir do seu sistema. Você também pode criar pastas para organizar suas imagens e encontrá-las rapidamente. 
    • Estoque de imagens: estas imagens são do Unsplash e são de uso gratuito.
  3. Selecione a imagem e clique em Inserir na barra superior.
    Sua imagem será inserida no bloco de imagem

Assista o vídeo para aprender mais sobre como adicionar diversas imagens de uma vez e alterar as configurações do bloco de imagem.

Redimensionar uma imagem

Para redimensionar uma imagem, clique na imagem que deseja redimensionar para selecioná-la e coloque seu cursor no canto inferior direito da imagem. Assim que a seta dupla aparecer, puxe o canto até encontrar o tamanho perfeito. O tamanho de sua imagem é exibido em azul no canto inferior direito da imagem e é automaticamente atualizado enquanto o redimensionamento é feito.
Você também pode usar o campo Largura no painel à esquerda para redimensionar sua imagem.

2022-02-11_16-24-57__1_.gif

Editar uma imagem

Nosso Editor arrastar e soltar inclui um editor de foto onde você pode cortar sua imagem, adicionar filtros, texto ou design do texto. Para acessar o editor de foto, clique em sua imagem e clique no botão Editar nas Configurações da imagem.

mceclip1.png

Você também pode editar uma foto da Biblioteca de conteúdo. Apenas selecione a imagem e clique em Editar.

mceclip2.png

Botão

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

  1. Arraste e solte o bloco Botão dentro de sua campanha.
  2. Substitua o texto Call to action com um texto que corresponda ao conteúdo que deseja redirecionar aos seus destinatários.
    Você pode personalizar o texto com os atributos de contato que você deseje. 
  3. Opcional: use a barra de ferramenta de formatação de texto e as configurações do botão no painel à esquerda para personalizar seu botão. 
  4. Clique no ícone Link para adicionar um link ao seu botão para redirecionar destinatários para a página de sua escolha.

mceclip1.png

Assista o vídeo para aprender mais sobre como alterar configurações como largura, proporção da borda, tamanho da linha, cor de fundo para o bloco botão.

Social

O bloco Social permite que você redirecione seus destinatários para as páginas de suas mídias sociais quando eles clicam nos ícones.

  1. Na aba Conteúdo, arraste e solte o bloco Social em sua campanha.
  2. Deixe o padrão Configurações do design dos ícones ou escolha Tamanho, Estilo, Tema e Espaçamento que você gostaria de dar aos seus Ícones de mídia social.
  3. Cole o link para suas páginas de mídia social no respectivo campo Configurações dos ícones.
    Você pode clicar em A
    dicionar mais para adicionar ícones e links de mídia social, se necessário, ou clique no ícone para excluir um ícone e link de mídia social a partir do bloco. 

Se já tiver adicionado links de mídia social em Campanhas > Configurações > Google Analytics e Canais sociais, os links serão automaticamente preenchidos no campos Configurações dos ícones.

💡 Dica
Provavelmente adicionamos os Links das redes sociais de sua marca aos seus modelos!
Usamos o API Brand Fetch para obter todas as informações disponíveis sobre sua marca e preencher automaticamente logotipo, cores e redes sociais, se disponíveis, para personalizar todos os 4 modelos básicos de layout.

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

HTML

O bloco HTML permite que você adicione seu próprio código. Você pode digitar ou colar e colar o seu código. Para ver a pré-visualização do código, apenas saia do bloco HTML.

Alguns dos provedores de e-mail não suportam qualquer conteúdo HTLM se o e-mail HTML não tiver sido desenvolvido como HTML web. Para saber mais sobre como evitar problemas relacionados ao seu código HTML no editor e bloco de HTML, consulte nosso artigo dedicado Limitações ao usar HTML em suas campanhas de e-mail.

Divisor

O bloco divisor adiciona uma linha horizontal para separar blocos.

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

Cabeçalho e rodapé

Use o bloco Cabeçalho para adicionar a logo de sua empresa.

O bloco Rodapé é essencial porque dá aos seus destinatários mais informações sobre sua empresa e permite que eles cancelem a inscrição ou editem suas preferências. Ele pode ser composto por:

Informações da empresa

Esta linha é composta pelo nome e informações de contato de sua empresa.

Ícones de mídia social
Você pode adicionar links para suas mídias sociais no rodapé de sua campanha.
Para mais informações, consulte a seção sobre o bloco de conteúdo Social.
Visualizar link no navegador
Também chamado de Link espelho. Este é um link no qual os destinatários podem clicar se tiverem dificuldades para visualizar seu e-mail em seus provedores de e-mail e queiram vê-lo na versão navegador. A maioria dos modelos de e-mail não precisam desta opção se os modelos forem responsivos, mas você sempre pode adicionar se necessário. Para saber mais, consulte nosso artigo dedicado Como inserir um link Ver no navegador (espelho) em suas campanhas.
Este e-mail foi enviado para

Esta linha permite que seus destinatários saibam que este e-mail foi enviado para eles. Ela também explica porque eles receberam o e-mail.

Link de cancelamento de inscrição

Este link é obrigatório, uma vez que permite que seus destinatários cancelem suas inscrições para suas newsletters em conformidade com a GDPR. Para saber mais, consulte nosso artigo dedicado Insira um link de cancelamento de inscrição em suas campanhas.

Logo da Brevo

Por padrão ela aparecerá no rodapé de seus e-mails:

  • Se você tiver um plano gratuito, a logo sempre será exibida em seu rodapé.
  • Se você tiver um plano pago, você pode remover o logo à mão de todos os templates: selecione o logo e clique no ícone da lixeira. Para evitar ter que remover o logo à mão toda a vez, você pode criar templates sem o logo e reutilizá-los.Logo da Brevo
    Por padrão ela aparecerá no rodapé de seus e-mails.DDE_delete-logo-new_EN-US.gif

Produto

Se estiver usando plug-ins Shopify ou Shopware com nosso Novo editor arrastar e soltar, você verá o bloco de conteúdo Produto.

  1. Arraste e solte o bloco de conteúdo Produto para sua newsletter.
  2. Selecione um produto na barra de busca.
  3. Clique em Inserir.

Você verá a imagem, o título, a descrição e o preço do produto. A URL do produto é automaticamente vinculada à imagem e botão do produto, assim que sua loja for publicada.
Para mais informações, consulte nosso artigo dedicado sobre como Inserir um bloco Produto no Editor arrastar e soltar (Novo).

⏩ O que vem a seguir?

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