Pular para o conteúdo principal

Editor de arrastar e soltar - Parte 3: usar blocos de conteúdo (Texto e links, imagem, botão, etc.)

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:

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:

  • Estilos (parágrafo, títulos, link, botão)
  • Fonte
  • Tamanho
  • Cor do texto
  • Formatação de texto (negrito, itálico, sublinhado, tachado, sobrescrito e subscrito)

DEE_formatting-toolbar-text_EN-US.gif

❗️ Importante
Quando você cola conteúdo de outra campanha ou editor, sua formatação, tabelas e imagens não serão refletidas no Editor de arrastar e soltar para evitar que a formatação oculta estrague seu conteúdo. Recomendamos que você duplique ou salve seu bloco de conteúdo para reutilizá-lo no Editor de arrastar e soltar. 
Colors Add a personalization Insert links
DDE_colors_EN.png

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.

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. 

DEE_text-block_EN-US.gif

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. 

DDE_borders_EN-US.gif

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.

💡 É bom saber
As imagens compatíveis são .png, .jpeg, .jpg, e .gif com tamanho máximo de 5MB.

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

Arrastar e soltar Através da biblioteca de conteúdo De um URL
Adicione facilmente imagens ao design do seu e-mail arrastando-as e soltando-as diretamente do seu sistema no bloco de conteúdo Image (imagem). Suas imagens serão adicionadas automaticamente ao design do seu e-mail e salvas na sua content library (biblioteca de conteúdo).

dde_drag-drop-image_EN-US.gif

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.

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

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

mceclip1.png

Você também pode:

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.

Redirecionar para uma página Redirecionar para um arquivo

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

  1. Selecione a imagem e clique em icon-add-link.png Add link (Adicionar link) ou pressione ⌘ ou CTRL + K.
    image-add-link.png
  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).

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 icon-add-link.png 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).
      mceclip1.png

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. 

logo_EN-US.png

Redes sociais

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

💡 É bom saber
Se você já adicionou links de redes sociais à biblioteca de sua marca, os links serão preenchidos automaticamente nos campos Icons settings (configurações de Ícones). Para saber mais, consulte nosso artigo dedicado Faça o design automaticamente de seus e-mails com os ativos de sua marca usando a biblioteca de marcas.
  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.

divider-block_EN-US.png

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:

Informações da empresa

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

Ícones de redes sociais
Você pode adicionar links para suas redes sociais no rodapé da sua campanha. Para obter mais informações, consulte a seção sobre o bloco de conteúdo Social.
Link Ver no navegador
Ele também é chamado de Link de espelho. Este é um link no qual os destinatários poderão clicar se tiverem problemas para visualizar seu e-mail no cliente de e-mail e quiserem visualizá-lo na versão do navegador. A maioria dos modelos de e-mail não precisará dessa opção se os modelos forem responsivos, mas você sempre pode adicionar a opção, se necessário. Para saber mais, consulte nosso artigo dedicado Inserir um link de visualização 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 destinado a eles. Ela também explica por que eles receberam este e-mail.

Link de cancelamento de inscrição

Este link é obrigatório porque permite que seus destinatários cancelem a assinatura de seu boletim informativo, em conformidade com o GDPR. Para saber mais, consulte nosso artigo dedicado Inserir um link de cancelamento de assinatura em suas campanhas.

Logotipo da Brevo

Ele aparecerá no rodapé dos seus e-mails por padrão.

  • Se você tem um plano gratuito, o logotipo sempre será exibido no rodapé.
  • Se você tem um plano pago, pode remover manualmente o logotipo de todos os modelos: selecione o logotipo e clique no ícone da lixeira. Para evitar ter que remover o logotipo manualmente todas as vezes, você pode criar modelos sem o logotipo e reutilizá-los. 
    DDE_delete-logo-new_EN-US.gif

Produto

❗️ Importante
O recurso de bloqueio de produto só estará disponível se você estiver usando nossos plug-ins Shopify, Shopware 5, Shopware 6, ou PrestaShop [versão 1.7 em diante]. Para obter mais informações, consulte nosso artigo dedicado sobre como Inserir um bloco de produto no editor de arrastar e soltar.

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.

spacer-block-example_EN-US.gif

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:

DDE_insert-video-block_EN-US.gif

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

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

💬 Este artigo foi útil?

Utilizadores que acharam útil: 3 de 37