Configurações do editor de e-mails de arrastar e soltar da Stripo

Publicado em: 22 de outubro de 2024 · Última atualização: 12 de setembro de 2026 · Por Marcus Biel

À direita do editor de e-mails do Maildroppa, fica a coluna de configurações do e-mail, com ferramentas para estruturar e personalizar o conteúdo e a aparência do e-mail. Essa coluna é dividida em duas abas: Content (conteúdo) e Appearance (aparência).

Aba de conteúdo

Na aba Content, você cria e organiza o conteúdo do e-mail. Ela contém duas seções principais: Structures (estruturas) e Blocks (blocos).

1. Estruturas

As estruturas definem o layout do e-mail, organizando o conteúdo em linhas e colunas. Você pode escolher entre vários layouts prontos, como:

• Uma coluna
• Duas colunas
• Várias colunas

Você não precisa se limitar a essas opções: é possível combinar vários blocos para criar qualquer layout personalizado, com total flexibilidade para atender às necessidades do design.

• Arrastar e soltar: basta arrastar uma estrutura dessa seção e soltá-la na área de criação do e-mail para começar a adicionar conteúdo.
• Personalização: depois de adicionar uma estrutura, preencha-a com diferentes blocos de conteúdo, como imagens, texto ou botões.

2. Blocos

Os blocos são os elementos de conteúdo que você coloca dentro das estruturas para montar o e-mail.

Os tipos de bloco disponíveis são:

• Image (imagem): faça upload de imagens (PNG, JPG, GIF) e personalize a aparência delas.
• Text (texto): adicione e formate texto para comunicar sua mensagem.
• Button (botão): adicione botões clicáveis com texto, links e estilos personalizáveis.
• Spacer (espaçador): insira um espaço em branco para ajustar o layout entre outros blocos.
• Video (vídeo): incorpore vídeos de plataformas como YouTube, Vimeo e outras.
• HTML: adicione código HTML e CSS personalizado para personalizações avançadas do conteúdo do e-mail.

Cada bloco é flexível e personalizável, permitindo criar um e-mail alinhado à identidade visual da marca.

Blocos de conteúdo em detalhes

Bloco de imagem

O bloco de imagem do editor de e-mails de arrastar e soltar da Stripo permite adicionar e personalizar imagens na campanha de e-mail.

Como adicionar um bloco de imagem

Há duas formas de adicionar um bloco de imagem ao e-mail:

Opção 1

Passe o cursor sobre a área "Drop Content Here" em uma estrutura e clique no ícone de imagem. Isso transforma imediatamente a estrutura selecionada em um bloco de imagem.

Opção 2

Acesse a seção Blocks na aba Content. Arraste o bloco Image para a estrutura desejada no layout do e-mail. Esse método oferece mais controle sobre a posição exata da imagem.

Como fazer upload de uma imagem

Depois de adicionar o bloco de imagem, há dois métodos para fazer upload de uma imagem:

Arrastar e soltar

Arraste um arquivo de imagem (PNG, JPG, GIF) do computador e solte-o diretamente na caixa de upload que aparece dentro do bloco de imagem.

Upload pelo computador

Outra opção é clicar no ícone de nuvem do bloco de imagem para abrir a janela de seleção de arquivos e escolher uma imagem do computador (até 2 MB). Depois de selecionada, a imagem aparece tanto no bloco quanto na aba de conteúdo à direita.

Como trocar a imagem

Para substituir a imagem, use a opção Change Image, na aba de conteúdo. Clique no ícone circular Change Image para fazer upload de uma nova imagem ou usar uma imagem de uma URL externa.

Como editar a imagem

Depois do upload, você pode fazer outras edições diretamente na plataforma. O editor de imagens integrado da Stripo permite melhorar e ajustar as imagens sem sair do editor de e-mails.

Como acessar o editor de imagens

1. Depois de fazer upload de uma imagem, clique no botão Edit Image. Isso abre a interface do editor de imagens.
2. O editor oferece uma ampla variedade de ferramentas, exibidas na barra de menu superior.

Ferramentas de edição de imagem disponíveis

• Filters (filtros) Aplique vários filtros com um único clique, como:

  • Grayscale (escala de cinza)
  • Black & White (preto e branco)
  • Sharpen (nitidez)
  • Invert (inverter)
  • Sepia (sépia)
  • Brightness (brilho)
  • Color (cor)

• Resize (redimensionar) Ajuste as dimensões da imagem. Você pode:

  • Definir uma largura e uma altura específicas.
  • Manter a proporção.

• Crop (cortar) Selecione a parte da imagem que deseja manter e remova as partes indesejadas.

• Transform (transformar) Gire ou inverta a imagem:

  • Horizontalmente
  • Verticalmente

• Draw (desenhar) Use a ferramenta de desenho para adicionar elementos à mão livre, como linhas ou formas personalizadas, sobre a imagem.

• Text (texto) Adicione texto diretamente à imagem. Personalize:

  • Fonte
  • Tamanho
  • Cor
  • Alinhamento

• Shapes and Stickers (formas e adesivos) Aprimore a imagem sobrepondo:

  • Formas prontas
  • Adesivos divertidos

• Frames (molduras) Escolha entre várias molduras para dar uma borda elegante à imagem.

• Corners (cantos) Ajuste o estilo dos cantos para dar um acabamento refinado.

• Background (fundo) Remova ou substitua o fundo de uma imagem para deixar o visual mais limpo.

Como salvar as edições

Depois de fazer as alterações desejadas, clique no botão Save, no canto superior esquerdo do editor. A imagem editada substitui automaticamente a original no layout do e-mail.

Configurações da imagem

Depois do upload, personalize a imagem usando as configurações disponíveis na aba Content, à direita.

Link

Adicione um link à imagem. Você pode escolher entre vários tipos de link, como:

• Website (site: HTTP, HTTPS)
• Mail (e-mail: mailto:)
• File (arquivo: ftp)
• Social Sharing (compartilhamento em redes sociais: Facebook, X — antigo Twitter —, LinkedIn, Pinterest)

Essas opções ficam no menu suspenso das configurações de link.

Texto alternativo

Em Alternate Text, adicione um texto alternativo para ser exibido se a imagem não carregar. Esse texto também contribui para a acessibilidade, permitindo que leitores de tela descrevam a imagem para destinatários com deficiência visual.

Alinhamento

Escolha como alinhar a imagem dentro do contêiner. As opções são Left (à esquerda), Center (ao centro) ou Right (à direita).

Tamanho

Ajuste manualmente a largura e a altura da imagem usando os botões de mais e menos ou digitando as dimensões desejadas.

Você também pode ativar a opção "Adjust to Width" para que a imagem ocupe automaticamente toda a largura do contêiner.

Imagem responsiva

Ative a opção "Responsive Image" para que a imagem se adapte a diferentes tamanhos de tela, especialmente em dispositivos móveis.

Espaçamento interno

Em Padding, personalize o espaçamento ao redor da imagem para controlar a distância entre ela e o conteúdo ao redor. Aplique um valor uniforme ou personalize cada lado: Top (superior), Bottom (inferior), Left (esquerdo) e Right (direito).

Links de âncora

Você pode atribuir um link de âncora à imagem para que, ao clicar nela, os destinatários sejam levados a uma seção específica do mesmo e-mail. No entanto, esses links podem não funcionar em determinados clientes de e-mail, como Gmail e Apple Mail.

Bloco de texto

Personalize a aparência e o funcionamento dos blocos de texto com as configurações a seguir. Cada opção permite ajustar a exibição do texto em detalhes para deixá-lo alinhado às suas preferências de design.

Barra de ferramentas de texto

Ao clicar em um bloco de texto, a barra de ferramentas de texto aparece acima da área de conteúdo, com acesso rápido às opções mais comuns de formatação. Confira os recursos disponíveis:

1. Formato do parágrafo

Defina o estilo do parágrafo escolhendo Normal para o texto comum ou um dos níveis de título, de Heading 1 a Heading 6, para criar uma hierarquia no e-mail. Isso ajuda a deixar o conteúdo mais legível e organizado.

2. Família de fontes

A fonte padrão é Arial, mas você pode escolher entre várias fontes, incluindo opções comuns como Georgia, Helvetica e Courier New. Também há uma busca para encontrar rapidamente uma fonte específica.

3. Tamanho da fonte

Ajuste o tamanho da fonte de 8 pt a 72 pt. O padrão é 14 pt, que funciona bem para a maior parte do texto no corpo do e-mail. Use o menu suspenso para definir rapidamente o tamanho desejado.

4. Estilo do texto

Formate o texto com estas opções:

• Bold (B): destaca o texto em negrito.
• Italic (I): aplica itálico para dar um visual mais estilizado.
• Underline (U): sublinha o texto, um recurso comum em links.
• Strikethrough (S): risca o texto, útil para indicar edições ou conteúdo removido.

5. Estilos avançados de texto (menu de três pontos)

Clique nos três pontos da barra de ferramentas para abrir outras opções:

• Subscript: posiciona o texto abaixo da linha de base, como subscrito (útil para notas de rodapé ou fórmulas químicas).
• Superscript: posiciona o texto acima da linha de base, como sobrescrito (comum em expoentes ou números ordinais).
• Remove Formatting: remove toda a formatação aplicada e retorna o texto ao estilo padrão.

6. Cor do texto e do fundo

• Text Color: clique nesse botão para escolher uma cor na paleta ou digitar um código hexadecimal e controlar a cor do texto com precisão.
• Background Color: selecione uma cor de fundo para destacar o texto.

7. Alinhamento do texto

Alinhe o texto dentro do bloco:

• Align Left: alinha o texto à esquerda.
• Center: centraliza o texto.
• Align Right: alinha o texto à direita.
• Justify: distribui o texto uniformemente pela largura do bloco.

8. Listas

Crie listas ordenadas (numeradas) e não ordenadas (com marcadores):

• Insert/Remove Bulleted List: adiciona ou remove marcadores.
• Insert/Remove Numbered List: adiciona ou remove uma lista numerada.

9. Quebra automática de linha

Ative ou desative a quebra automática de linha no bloco de texto. Quando ativada, linhas longas de texto continuam automaticamente na linha seguinte.

10. Recuo

Ajuste o recuo do texto:

• Increase Indent: afasta o texto da margem, útil para subtópicos ou citações.
• Decrease Indent: reduz o recuo e aproxima o texto da margem esquerda.

11. Inserir link

Saiba como adicionar, editar e gerenciar links no conteúdo do e-mail.

Passos para adicionar ou editar um link

a) Selecione o texto

Selecione o texto que deseja transformar em link.

b) Clique no ícone de link

Na barra de ferramentas de texto, clique no ícone de link.

c) Edite o link no painel de configurações

O painel de configurações à direita aparece com opções de link:

• Campo de link: digite a URL ou selecione uma das opções predefinidas.
• Tag: adicione tags para identificar assinantes ou acionar automações.

Como corrigir links depois do envio

Nada pior do que enviar uma nova campanha para 2.365 assinantes e descobrir que um dos links está quebrado por um simples erro de digitação. Adeus, vendas de Black Friday!

Felizmente, no Maildroppa é possível corrigir links quebrados, mesmo depois de enviar o e-mail aos assinantes.

a) Abra a campanha

Localize a campanha enviada na visão geral, clique nos três pontos e escolha View Campaign.

b) Modifique links ou tags

Role até a lista de links nos detalhes da campanha para:

• Atualizar os destinos dos links: corrija URLs incorretas.
• Gerenciar tags: adicione ou remova tags usadas em automações.

Observação: para usar o recurso de alteração do destino dos links, confira se Click Tracking (rastreamento de cliques) está ativado nas configurações da campanha.

Como personalizar a aparência dos links

No painel de configurações à direita, ajuste a aparência do link:

• Link Color: selecione uma cor ou digite um código hexadecimal.

• Underline Links: ative ou desative o sublinhado para deixar o visual mais limpo.

12. Tags de personalização

Use tags de personalização para adicionar conteúdo dinâmico, como o primeiro nome do destinatário ou outros campos personalizados.

• Acesse o menu suspenso Personalization Tags na barra de ferramentas para selecionar campos comuns, como First Name (primeiro nome), Email (e-mail) ou Country (país), ou defina campos personalizados para adaptar os e-mails a cada destinatário.

13. Emojis

Dê mais apelo visual ao texto incluindo emojis.

• Clique no ícone de emoji na barra de ferramentas para abrir uma lista organizada por categorias e facilitar a busca.
• Observação sobre compatibilidade: teste os e-mails em clientes como o Outlook, pois alguns podem não exibir emojis corretamente.

14. Tabela e caracteres especiais

No final da barra de ferramentas, clique nos três pontos para exibir mais opções avançadas.

Inserção de tabela

Crie e personalize tabelas para aprimorar o layout do e-mail.

• Defina linhas, colunas, espaçamento entre células, espaçamento interno e tamanho da borda conforme necessário.

Inserir caracteres especiais

Enriqueça o texto com símbolos, caracteres acentuados e outros caracteres especiais.

• Acesse a opção Special Characters para explorar uma grande variedade de caracteres.

Configurações adicionais do bloco de texto (painel direito)

O painel direito oferece amplo controle sobre a aparência e o funcionamento dos blocos de texto. Confira as configurações disponíveis:

1. Cor do texto

Em Text Color, defina a cor do texto usando o seletor de cores ou digitando um código hexadecimal.

2. Cor de fundo

Em Background Color, defina uma cor de fundo personalizada para o bloco de texto. Por padrão, o fundo é transparente.

3. Configurações específicas de links

Quando o bloco de texto contém links, outras opções aparecem nas configurações:

• Link Color: ajuste a cor dos links usando o seletor de cores ou um código hexadecimal.

• Underline Links: ative ou desative o sublinhado dos links no bloco de texto.

• Edição de links: Selecione um link na área de conteúdo para editar a URL no painel de configurações. Você também pode atribuir ou atualizar tags do link usando o menu suspenso Tags.

4. Alinhamento

Alinhe o bloco de texto dentro do contêiner: Left (à esquerda), Center (ao centro) ou Right (à direita).

5. Altura fixa

Ative Fixed Height para definir uma altura fixa para o bloco de texto. Você também pode controlar o alinhamento vertical do texto: Top (superior), Middle (meio) ou Bottom (inferior).

6. Espaçamento entre linhas

Controle o espaço entre as linhas de texto. Escolha entre Tight (reduzido), Normal ou Wide (amplo).

7. Espaçamento interno

Em Padding, ajuste o espaço ao redor do bloco de texto. Aplique um valor uniforme ou personalize cada lado: Top (superior), Bottom (inferior), Left (esquerdo) e Right (direito).

8. Links de âncora

Crie links de âncora para levar os leitores a seções específicas do e-mail. Lembre-se de que alguns clientes de e-mail não oferecem suporte a esses links.

Bloco de botão

O bloco de botão permite adicionar um botão clicável ao e-mail, com configurações personalizáveis de funcionamento e estilo.

Configurações de link

A opção Link determina a ação acionada quando um destinatário clica no botão.

Tipos de link disponíveis

• Link normal para um site (HTTP ou HTTPS): direciona o usuário para uma página da web.
• Link de e-mail: abre o cliente de e-mail do usuário para escrever uma nova mensagem.
• Link de arquivo (FTP, FTPS): aponta para um arquivo em um servidor FTP.
• Skype: inicia uma chamada ou conversa no Skype.
• Telefone (tel): inicia uma chamada telefônica em dispositivos compatíveis.
• SMS: abre o aplicativo de mensagens com o número do destinatário já preenchido.
• Viber: abre o aplicativo Viber para mensagens ou chamadas.
• Outro tipo de protocolo: permite especificar um protocolo personalizado que não esteja listado acima.

Opções de compartilhamento social

Você também pode configurar o botão para compartilhamento em redes sociais ou por e-mail:

• Facebook
• X (antigo Twitter)
• LinkedIn
• Pinterest
• Compartilhamento por e-mail

Campo de URL

Ao lado do tipo de link, o campo de URL, que geralmente começa com https://, permite digitar o endereço específico correspondente ao tipo de link.

Texto do botão

Personalize o texto do botão de acordo com a chamada para ação. O texto padrão é "Button", mas você pode trocá-lo por opções como "Saiba mais", "Inscreva-se agora" ou "Compre agora".

Estilo do texto

As configurações de Text Style permitem ajustar a aparência do texto do botão.

Seleção da fonte

Escolha entre várias fontes padrão, incluindo:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Entre as fontes fora do padrão, há outras opções, como:

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

No topo da lista de fontes, uma caixa de busca ajuda a encontrar rapidamente uma fonte específica.

Tamanho e formatação da fonte

• Tamanho da fonte: escolha de 8 a 72, conforme o destaque que deseja dar ao texto do botão.
• Formatação do texto: aplique negrito ou itálico usando os ícones "B" ou "I" para destacar o texto do botão.

Configurações de cor

Personalize a aparência do botão ajustando as cores.

1. Button Color (cor do botão): Altere a cor de fundo do botão. O padrão é verde (#31cb4b). Use o campo de código hexadecimal ou o seletor de cores para escolher uma nova cor.

2. Text Color (cor do texto): Defina a cor do texto do botão. O padrão é branco (#ffffff). Escolha uma cor com bom contraste em relação ao fundo do botão para facilitar a leitura.

3. Background Color (cor de fundo): Ajuste o fundo do contêiner do botão. Por padrão, ele é transparente, mas você pode alterá-lo para destacar o botão em relação ao fundo do e-mail.

Raio da borda

Controle o arredondamento dos cantos do botão com a configuração Border Radius.

• Valor padrão: 30 (cantos moderadamente arredondados).
• Intervalo: de 0 (cantos retos) a 100 (botão em formato de cápsula).

Observação: Para que os cantos arredondados sejam exibidos corretamente no Microsoft Outlook, ative a opção "Support of Outlook" na aba Appearance.

Alinhamento

Posicione o botão dentro da área de conteúdo usando a configuração Alignment.

• Opções: Left (à esquerda), Center (ao centro), Right (à direita).
• Uso comum: alinhamento centralizado para dar destaque; à esquerda ou à direita para manter a consistência do design.

Altura fixa

Ative a opção Fixed Height para manter as dimensões do botão consistentes.

1. Padrão: desativada.
2. Altura mínima: 44 pixels.
3. Alinhamento vertical do conteúdo: com a altura fixa ativada, alinhe o conteúdo do botão usando Top (superior), Middle (meio) ou Bottom (inferior) para posicioná-lo com precisão.

Botão com ícone

A opção Button with Icon permite incluir um ícone ao lado do texto do botão, aumentando o apelo visual e reforçando a chamada para ação. Esse recurso vem desativado por padrão.

• Formatos compatíveis: faça upload de ícones em PNG, JPG ou GIF, com tamanho máximo de 2 MB por arquivo.
• Posição do ícone: escolha Left ou Right para exibir o ícone à esquerda ou à direita do texto do botão.

Observação: os ícones não são exibidos em determinadas versões do Microsoft Outlook para Windows, incluindo:

• Outlook 2002, 2007, 2010, 2013, 2016 e 2019. Essa limitação se deve à forma como esses clientes de e-mail renderizam e-mails HTML. Leve isso em conta se uma grande parte do público usa esses clientes.

Configurações da borda

Personalize as bordas do botão para dar mais estilo e destaque.

• Border Width (largura da borda): defina individualmente a largura de cada lado — esquerdo, direito, superior e inferior —, até 40 pixels.
• Border Style (estilo da borda): escolha entre Solid (contínuo), Dashed (tracejado) ou Dotted (pontilhado).
• Border Color (cor da borda): use o seletor de cores ou digite um código hexadecimal para combinar a borda com a marca ou o design.

Espaçamento interno

Ajuste o espaço dentro do botão, entre o conteúdo (texto e ícone) e a borda.

• Opções de personalização: defina os valores de espaçamento para Left (esquerdo), Right (direito), Top (superior) e Bottom (inferior), até o máximo de 99 pixels.
• Impacto: o espaçamento interno afeta o tamanho total do botão e a posição do conteúdo dentro dele.

Espaçamento externo

Controle o espaço fora do botão para ajustar a posição dele em relação aos outros elementos do layout do e-mail.

• Opções de personalização: defina os valores de espaçamento externo para Left (esquerdo), Right (direito), Top (superior) e Bottom (inferior), até o máximo de 40 pixels.
• Quando usar: para evitar que o botão fique muito próximo de outros conteúdos ou das bordas do e-mail.

Adicionar link de âncora

Use links de âncora para levar os leitores a seções específicas do mesmo e-mail e facilitar a navegação em newsletters mais longas.

• Nome da âncora: defina um destino no e-mail e vincule o botão a essa âncora. Ao clicar no botão, a visualização do e-mail rola até a seção especificada, facilitando a navegação.

Importante: links de âncora não são compatíveis com determinados clientes e formatos de e-mail, incluindo:

• Aplicativo Gmail para iOS
• Apple Mail para iOS
• Aplicativo Outlook para Android
• Aplicativo Outlook para macOS
• E-mails AMP

Teste o e-mail com cuidado para verificar o funcionamento em diferentes clientes de e-mail e determinar se esse recurso é adequado ao público.

Bloco espaçador

O bloco espaçador permite adicionar espaço ajustável ao conteúdo do e-mail e controlar tamanho, alinhamento, aparência e espaçamento interno. A seguir, confira os detalhes dos dois tipos de espaçador: normal e dinâmico.

1. Espaçador normal

O espaçador normal é uma linha que separa visualmente as seções do e-mail.

Configurações principais

1. Espessura e estilo da linha Personalize a espessura, o estilo e a cor da linha:

   • Espessura: ajuste com os botões + e -, a partir de 1.
   • Estilo: escolha entre solid (contínuo), dashed (tracejado) ou dotted (pontilhado).
   • Cor: defina uma cor personalizada usando um código hexadecimal ou o seletor de cores (padrão: #cccccc).

2. Largura Defina a extensão da linha do espaçador no conteúdo. Ajuste a largura em pixels com os botões + e -.

3. Alinhamento Alinhe a linha usando Left (à esquerda), Center (ao centro) ou Right (à direita), de acordo com o layout.

4. Espaçamento interno Controle o espaçamento interno ao redor do espaçador:

   • Padrão: o espaçamento é definido como 20 em todos os lados.
   • Ative More para definir o espaçamento de cada lado:
     • Top (superior)
     • Right (direito)
     • Bottom (inferior)
     • Left (esquerdo)

Quando usar

O espaçador normal é ideal para criar separações visuais claras entre as seções do e-mail, mantendo um layout organizado e profissional.

2. Espaçador dinâmico

O espaçador dinâmico é um bloco invisível de espaço vazio, criado para dar mais respiro ao layout do e-mail.

Recursos principais

1. Ajuste de altura Ajuste a altura diretamente na área de conteúdo ou no painel de controle, usando os botões + e -. A altura determina quanto espaço vertical é adicionado entre as seções.

2. Cor de fundo Por padrão, o espaçador tem fundo transparente, mas você pode aplicar uma cor de fundo personalizada usando um código hexadecimal ou o seletor de cores. Assim, o espaçador pode funcionar como um bloco visível, se necessário.

3. Comportamento responsivo A opção Responsive Spacer faz o espaçador se adaptar dinamicamente a diferentes tamanhos de tela, mantendo um layout adequado em vários dispositivos. Esse recurso vem ativado por padrão.

Principais diferenças entre os espaçadores normal e dinâmico

• Espaçador dinâmico: adiciona espaço vazio sem uma linha visível.
• Espaçador normal: inclui configurações específicas da linha, como:
  • Largura da linha
  • Alinhamento
  • Estilos da linha
  • Espaçamento interno

O espaçador dinâmico não oferece esses recursos, pois foi criado exclusivamente para separar conteúdo sem elementos visuais.

3. Adicionar link de âncora

É possível aplicar links de âncora aos dois tipos de espaçador. Assim, o usuário pode navegar de outra parte do e-mail diretamente até a posição do espaçador. Isso é especialmente útil para criar uma navegação interna em newsletters mais longas.

Observação: alguns clientes de e-mail não oferecem suporte a links de âncora, incluindo:

• Microsoft Outlook
• Gmail em dispositivos móveis

Bloco de vídeo

O bloco de vídeo permite incorporar vídeos ao e-mail e personalizar a aparência e o comportamento deles. Ele aceita links de plataformas como YouTube e Vimeo, oferecendo flexibilidade e controle sobre a apresentação do vídeo.

1. Link do vídeo

Adicione a URL do vídeo no campo Link to Video. As plataformas compatíveis incluem YouTube, Vimeo e outros serviços que permitem incorporar vídeos.

• Comportamento automático: Ao adicionar uma URL válida:

  • Uma imagem de prévia é gerada automaticamente a partir da miniatura do vídeo na plataforma.
  • O campo Alternate Text é preenchido automaticamente com o título ou a descrição do vídeo, quando disponível.

• Campos editáveis: Se necessário, edite ou substitua manualmente a imagem de prévia e o texto gerados.

2. Texto alternativo

O campo Alternate Text garante acessibilidade ao exibir uma descrição do vídeo caso ele não carregue.

• É preenchido automaticamente ao adicionar uma URL de vídeo compatível.
• Pode ser personalizado conforme as necessidades do conteúdo.

3. Miniatura personalizada

Faça upload de uma imagem personalizada para substituir a prévia padrão do vídeo.

• Como ativar: ative a opção Custom Thumbnail.
• Formatos compatíveis: PNG, JPG ou GIF.
• Quando usar: substitua a miniatura gerada quando ela não combinar com o design do e-mail.

4. Botão de reprodução

Personalize o botão de reprodução sobreposto à miniatura do vídeo.

• Opções disponíveis:
  • Escolha entre estilos de botão de reprodução do YouTube, Vimeo ou outros.
  • Selecione None para ocultar totalmente o botão de reprodução.

5. Tamanho

Ajuste as dimensões do vídeo para adequá-lo ao design do e-mail.

• Largura e altura: use os botões + e - ou digite os valores manualmente para controlar o tamanho.
• Design responsivo: faça o vídeo se ajustar bem a diferentes dispositivos.

6. Ajustar à largura

Ative Adjust to Width para que o vídeo se ajuste automaticamente à largura do contêiner. Isso mantém o design responsivo em diferentes dispositivos.

7. Imagem responsiva

A opção Responsive Image faz a miniatura do vídeo se ajustar à largura da tela em dispositivos móveis.

• Observação: a responsividade depende do suporte do dispositivo e do cliente de e-mail.

8. Alinhamento

Use a configuração Alignment para controlar a posição horizontal do vídeo no bloco:

• Left: alinha o vídeo à esquerda.
• Center: centraliza o vídeo.
• Right: alinha o vídeo à direita.

9. Opções específicas para dispositivos móveis

Personalize o comportamento e a aparência do vídeo em dispositivos móveis:

1. Hide Element on Mobile (ocultar elemento em dispositivos móveis) Oculte o bloco de vídeo em dispositivos móveis, se necessário.

   • Observação: esse recurso depende do suporte a media queries e pode não funcionar em todos os clientes de e-mail.

2. Mobile Padding (espaçamento em dispositivos móveis) Ajuste o espaçamento ao redor do vídeo na exibição em dispositivos móveis.

   • Ative More para definir valores de espaçamento individuais para:
     • Top (superior)
     • Right (direito)
     • Bottom (inferior)
     • Left (esquerdo)

10. Incluir em AMPHTML ou HTML

Escolha em quais versões do e-mail o bloco de vídeo deve aparecer:

• Both AMPHTML and HTML (AMPHTML e HTML)
• AMPHTML-only (somente AMPHTML)
• HTML-only (somente HTML)

Essa opção garante que o vídeo seja incluído de acordo com a versão do e-mail enviada.

Bloco HTML

O bloco HTML permite inserir código HTML e CSS personalizado no e-mail, com flexibilidade para personalizações avançadas e atenção à compatibilidade com os clientes de e-mail. Use esse bloco para criar designs sob medida, seja adicionando um único elemento HTML ou montando um e-mail inteiro.

1. Interface do editor de código

Ao selecionar o bloco HTML, uma janela preta de edição de código aparece no painel de conteúdo. Nela, você pode escrever, colar ou modificar código personalizado. O editor inclui duas seções:

• Seção HTML: adicione ou edite a estrutura HTML do e-mail.
• Seção CSS: abra um editor CSS separado para aplicar estilos ao conteúdo.

2. Ajuste do tamanho da fonte

Ajuste o tamanho da fonte do código no editor para facilitar a leitura:

• Use o botão A+ para aumentar o tamanho da fonte.
• Use o botão A- para diminuir o tamanho da fonte.

3. Ajuste do tamanho da janela do editor

Redimensione a janela do editor de código conforme suas preferências de trabalho:

• Como ajustar:
  • Passe o cursor sobre os três pontos no centro da parte superior da janela do editor.
  • Arraste o controle deslizante para cima ou para baixo para aumentar ou diminuir o tamanho do editor.

Esse recurso é especialmente útil para trabalhar com blocos de código maiores ou mais detalhados.

4. Editor CSS

O editor CSS permite gerenciar os estilos do conteúdo HTML e pode ser acessado por um botão no canto superior direito do editor de código.

Considerações importantes:

• Suporte limitado: muitos clientes de e-mail não oferecem suporte a recursos avançados de CSS, como Flexbox, Grid ou media queries.
• Fique no básico: use CSS básico inline para obter a maior compatibilidade possível.
• Estilos pré-configurados: evite excluir esses estilos, pois eles garantem a renderização correta nos principais clientes de e-mail.

5. Compatibilidade com clientes de e-mail

O HTML para e-mails exige atenção especial porque muitos clientes de e-mail usam mecanismos de renderização desatualizados.

Orientações principais:

• Use layouts baseados em tabelas em vez de layouts baseados em <div> para obter maior compatibilidade.
• Evite recursos avançados de CSS, como animações, Flexbox ou Grid.
• Espere comportamentos inconsistentes em media queries e em propriedades CSS de menor impacto.
• Testes: sempre teste os e-mails em vários clientes, como Gmail, Outlook e Apple Mail, para verificar se a renderização está correta.

6. Espaçamento interno

A configuração Padding ajusta o espaço ao redor do conteúdo HTML:

• Espaçamento padrão: definido como 0.
• Espaçamento personalizado: ative More para ajustar individualmente o espaçamento de cada lado:
  • Top (superior)
  • Right (direito)
  • Bottom (inferior)
  • Left (esquerdo)

Esse recurso é ideal para alinhar o conteúdo HTML no layout do e-mail.

7. Adicionar link de âncora

O recurso Add Anchor Link permite criar um link clicável em outra parte do e-mail que leva ao bloco HTML.

Como usar:

• Ative a opção e digite um nome de âncora no campo.

Limitações:

• Alguns clientes e formatos de e-mail não oferecem suporte a links de âncora, como:
  • Aplicativo Gmail para iOS
  • Apple Mail para iOS
  • Aplicativo Outlook (Android e macOS)
  • E-mails AMP

8. Escrever HTML personalizado

O editor HTML foi criado para escrever ou colar a estrutura HTML personalizada do e-mail.

Boas práticas:

• Use HTML simples e amplamente compatível.
• Evite layouts complexos ou recursos como elementos <div>.
• Prefira designs baseados em tabelas para obter maior compatibilidade.

9. Dicas para bons resultados

1. Comece aos poucos: use o bloco HTML em seções específicas se estiver começando a desenvolver e-mails.
2. Valide o código: confira se o HTML atende aos requisitos dos clientes de e-mail.
3. Teste com cuidado: use ferramentas para visualizar e testar o e-mail em vários clientes e dispositivos.