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

Published: 22 de outubro de 2024 · Last updated: 21 de julho de 2026 · By Marcus Biel

No lado direito do editor de e-mails do Maildroppa, encontra a Coluna de definições do e-mail, que disponibiliza ferramentas para ajudar a estruturar e personalizar o conteúdo e o aspeto do seu e-mail. Esta coluna está dividida em dois separadores: Conteúdo e Aparência.

Separador Conteúdo

O separador Conteúdo é onde cria e organiza o conteúdo do seu e-mail. Contém duas secções principais: Estruturas e Blocos.

1. Estruturas

As estruturas definem o esquema do seu e-mail, organizando o conteúdo em linhas e colunas. Pode escolher entre vários esquemas pré-concebidos, como:

• Uma coluna
• Duas colunas
• Várias colunas

Não está limitado a estas opções — pode combinar vários blocos para criar qualquer esquema personalizado, obtendo total flexibilidade para satisfazer as suas necessidades de design.

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

2. Blocos

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

Os tipos de bloco disponíveis são:

• Imagem: carregue imagens (PNG, JPG, GIF) e personalize o seu aspeto.
• Texto: adicione e formate texto para transmitir a sua mensagem.
• Botão: adicione botões clicáveis com texto, ligações e estilos personalizáveis.
• Espaçador: insira um espaço em branco para ajustar o esquema entre outros blocos.
• Vídeo: incorpore conteúdo de vídeo de plataformas como YouTube, Vimeo e outras.
• HTML: adicione código HTML e CSS personalizado para uma personalização avançada do conteúdo do e-mail.

Cada bloco foi concebido para ser flexível e personalizável, permitindo-lhe criar um e-mail alinhado com o visual e a identidade da sua marca.

Explicação detalhada dos blocos de conteúdo

Bloco de imagem

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

Adicionar um bloco de imagem

Pode adicionar um bloco de imagem ao seu e-mail de duas formas:

Opção 1

Passe o cursor sobre a área "Solte o conteúdo aqui" numa estrutura e, em seguida, clique no ícone de imagem. Isto transformará imediatamente a estrutura selecionada num bloco de imagem.

Opção 2

Aceda à secção Blocos no Separador Conteúdo. Arraste o bloco de imagem para a estrutura pretendida no esquema do seu e-mail. Este método dá-lhe maior controlo sobre o local exato onde colocar a imagem.

Carregar uma imagem

Depois de adicionar o bloco de imagem, tem dois métodos para carregar uma imagem:

Arrastar e soltar

Pode arrastar e soltar diretamente um ficheiro de imagem (PNG, JPG, GIF) do seu computador para a caixa de carregamento que aparece dentro do bloco de imagem.

Carregar do computador

Em alternativa, pode clicar no ícone de nuvem no bloco de imagem para abrir o navegador de ficheiros e selecionar uma imagem do seu computador (até 2 MB). Depois de selecionada, a imagem aparecerá tanto no bloco como no separador de conteúdo à direita.

Alterar a imagem

Para substituir a imagem, utilize a opção Alterar imagem disponível no separador de conteúdo. Clique no ícone circular Alterar imagem, que lhe permitirá carregar uma nova imagem ou associar uma imagem a partir de um URL externo.

Editar a imagem

Depois de carregar uma imagem, poderá querer fazer edições adicionais diretamente na plataforma. O Editor de imagens integrado da Stripo permite-lhe melhorar e ajustar as suas imagens sem sair do editor de e-mails.

Aceder ao editor de imagens

1. Depois de carregar uma imagem, clique no botão Editar imagem. Isto abrirá a interface do Editor de imagens.
2. O editor disponibiliza uma vasta gama de ferramentas, apresentadas na barra de menu superior.

Ferramentas de edição de imagem disponíveis

• Filtros Aplique vários filtros com um único clique, como:

  • Escala de cinzentos
  • Preto e branco
  • Nitidez
  • Inverter
  • Sépia
  • Brilho
  • Cor

• Redimensionar Ajuste as dimensões da imagem. Pode:

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

• Cortar Selecione a parte da imagem que pretende manter e remova as partes indesejadas.

• Transformar Rode ou vire a imagem:

  • Horizontalmente
  • Verticalmente

• Desenhar Utilize a ferramenta de desenho para adicionar elementos à mão livre, como linhas ou formas personalizadas, sobre a imagem.

• Texto Adicione texto diretamente à imagem. Personalize:

  • Tipo de letra
  • Tamanho
  • Cor
  • Alinhamento

• Formas e autocolantes Melhore a sua imagem sobrepondo:

  • Formas pré-criadas
  • Autocolantes divertidos

• Molduras Escolha entre várias molduras para dar à sua imagem uma borda elegante.

• Cantos Ajuste o estilo dos cantos para obter um aspeto polido.

• Fundo Remova ou substitua o fundo de uma imagem para obter um aspeto mais limpo.

Guardar as edições

Depois de efetuar as alterações pretendidas, clique no botão Guardar no canto superior esquerdo do editor. A imagem editada substituirá automaticamente a original no esquema do seu e-mail.

Definições da imagem

Depois de carregar a imagem, pode personalizá-la utilizando as opções de Definições da imagem disponíveis no Separador Conteúdo, no lado direito.

Ligação

Adicione uma ligação à imagem. Pode escolher entre vários tipos de ligações, como:

• Site (HTTP, HTTPS)
• E-mail (mailto:)
• Ficheiro (ftp)
• Partilha social (Facebook, X (anteriormente Twitter), LinkedIn, Pinterest)

Pode encontrar estas opções no menu pendente de definições da ligação.

Texto alternativo

Adicione texto alternativo que será apresentado se a imagem não carregar. Este texto também é útil para a acessibilidade, permitindo que os leitores de ecrã descrevam a imagem a destinatários com deficiência visual.

Alinhamento

Escolha como a imagem deve ser alinhada dentro do respetivo contentor. Pode alinhá-la à Esquerda, ao Centro ou à Direita.

Tamanho

Ajuste manualmente a largura e a altura da imagem utilizando os botões mais/menos ou introduzindo as dimensões pretendidas.

Também pode ativar a opção "Ajustar à largura" para fazer com que a imagem se ajuste automaticamente a toda a largura do contentor.

Imagem responsiva

Ative a opção "Imagem responsiva" para garantir que a imagem se adapta a diferentes tamanhos de ecrã, especialmente em dispositivos móveis.

Preenchimento

Personalize o preenchimento em redor da imagem para controlar o espaço entre a imagem e o conteúdo envolvente. Pode aplicar o preenchimento uniformemente ou personalizá-lo para cada lado (Superior, Inferior, Esquerdo, Direito).

Ligações âncora

Pode atribuir uma ligação âncora à imagem, permitindo que os destinatários saltem para uma secção específica dentro do mesmo e-mail quando clicarem na imagem. No entanto, tenha em atenção que as ligações âncora podem não funcionar em determinados clientes de e-mail, como o Gmail e o Apple Mail.

Bloco de texto

Melhore os seus blocos de texto personalizando o respetivo aspeto e funcionamento através das seguintes definições. Cada opção permite ajustar com precisão a forma como o texto é apresentado, garantindo que fica perfeitamente alinhado com as suas preferências de design.

Barra de ferramentas de texto

Quando clica num bloco de texto, a Barra de ferramentas de texto aparece acima da área de conteúdo, proporcionando acesso rápido a muitas opções comuns de formatação de texto. Eis as funcionalidades disponíveis na barra de ferramentas:

1. Formato do parágrafo

Defina o estilo do parágrafo escolhendo opções como Normal para texto regular ou vários níveis de título (Título 1 a Título 6) para criar uma hierarquia estruturada no seu e-mail. Isto ajuda a tornar o conteúdo mais legível e organizado.

2. Família tipográfica

O tipo de letra predefinido é Arial, mas pode escolher entre vários tipos de letra, incluindo opções comuns como Georgia, Helvetica e Courier New. Existe também uma função de pesquisa para encontrar rapidamente um tipo de letra específico.

3. Tamanho da letra

Ajuste o tamanho da letra de 8pt a 72pt. O valor predefinido é 14pt, que funciona bem para a maioria do texto do corpo do e-mail. Utilize o menu pendente para definir rapidamente o tamanho pretendido.

4. Estilo do texto

Aplique estilo ao texto utilizando as seguintes opções:

• Negrito (B): realça o texto tornando-o negrito.
• Itálico (I): coloca o texto em itálico para um aspeto mais estilizado.
• Sublinhado (U): sublinha o texto, normalmente utilizado para hiperligações.
• Tachado (S): traça uma linha sobre o texto, útil para edições ou conteúdo removido.

5. Estilo de texto avançado (menu dos três pontos)

Clicar nos três pontos da barra de ferramentas expande opções adicionais:

• Subscrito: coloca o texto abaixo da linha de base (útil para notas de rodapé ou fórmulas químicas).
• Sobrescrito: coloca o texto acima da linha de base (normalmente utilizado para expoentes ou números ordinais).
• Remover formatação: elimina qualquer formatação aplicada, devolvendo o texto ao estilo predefinido.

6. Cor do texto e do fundo

• Cor do texto: clique no botão Cor do texto para escolher uma cor numa paleta ou introduzir um código hexadecimal para um controlo preciso da cor do texto.
• Cor do fundo: selecione uma cor de fundo (realce) para o texto.

7. Alinhamento do texto

Alinhe o texto dentro do bloco:

• Alinhar à esquerda: alinha o texto à esquerda.
• Centrar: centra o texto.
• Alinhar à direita: alinha o texto à direita.
• Justificar: distribui o texto uniformemente pela largura do bloco.

8. Listas

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

• Inserir/remover lista com marcadores: adiciona ou remove marcadores.
• Inserir/remover lista numerada: adiciona ou remove uma lista numerada.

9. Quebra de linha

Ative ou desative a quebra de linha dentro do bloco de texto. Quando ativada, as linhas de texto longas passam automaticamente para a linha seguinte.

10. Indentação

Ajuste a indentação do texto:
- **Aumentar indentação**: afasta o texto da margem, sendo útil para subpontos ou citações.
- **Diminuir indentação**: reduz a indentação, aproximando o texto da margem esquerda.
![Indentação do texto](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Inserir hiperligação

Saiba como adicionar, editar e gerir hiperligações no conteúdo do seu e-mail.

Passos para adicionar ou editar uma ligação

a) Realçar o texto

Selecione o texto que pretende transformar numa hiperligação.

b) Clicar no ícone de ligação

Na Barra de ferramentas de texto, clique no Ícone de ligação.

c) Editar a ligação no painel de definições

O Painel de definições do lado direito aparecerá com opções de ligação:

• Campo da ligação: introduza o URL ou selecione uma opção predefinida.
• Etiqueta: adicione etiquetas para identificar subscritores ou acionar automatizações.

Corrigir ligações depois do envio

Não há nada pior do que enviar uma nova campanha para os seus 2 365 subscritores e descobrir que uma das ligações está quebrada devido a um simples erro de digitação. Adeus, promoções de Black Friday!

Felizmente, tornámos possível corrigir ligações quebradas — mesmo depois de o e-mail já ter sido enviado aos seus subscritores.

a) Ver campanha

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

b) Modificar ligações ou etiquetas

Desloque-se até à lista de ligações nos detalhes da campanha para:

• Atualizar destinos das ligações: corrija URLs incorretos.
• Gerir etiquetas: adicione ou remova etiquetas para automatizações.

Nota: certifique-se de que o Rastreamento de cliques está ativado nas definições da campanha para utilizar a funcionalidade de redirecionamento de ligações.

Personalizar o aspeto das ligações

No Painel de definições do lado direito, pode ajustar o aspeto da ligação:

• Cor da ligação: selecione uma cor ou introduza um código hexadecimal.

• Sublinhar ligações: ative ou desative os sublinhados para obter um aspeto mais limpo.

12. Etiquetas de personalização

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

• Aceda ao menu pendente Etiquetas de personalização na barra de ferramentas para selecionar campos comuns, como Nome próprio, E-mail ou País, ou definir campos personalizados para adaptar os e-mails a cada destinatário.

13. Emojis

Dê mais apelo visual ao seu texto incluindo emojis.

• Clique no Ícone de emoji na barra de ferramentas para abrir uma lista categorizada de emojis e navegar facilmente.
• Nota de compatibilidade: teste os e-mails em determinados clientes, como o Outlook, pois alguns podem não apresentar os emojis corretamente.

14. Tabela e caracteres especiais

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

Inserção de tabela

Crie e personalize tabelas para melhorar o esquema do seu e-mail.

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

Inserir caracteres especiais

Melhore o seu texto com símbolos, caracteres acentuados e outros caracteres não padrão.

• Aceda à opção Caracteres especiais para explorar uma grande variedade de caracteres.

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

O painel direito oferece um controlo abrangente sobre o aspeto e o funcionamento dos seus blocos de texto. Seguem-se as definições disponíveis:

1. Cor do texto

Defina a cor do texto utilizando o seletor de cores ou introduzindo um código hexadecimal.

2. Cor do fundo

Defina uma cor de fundo personalizada para o bloco de texto. Por predefinição, o fundo é transparente.

3. Definições específicas das ligações

Quando o bloco de texto contém ligações, aparecem opções adicionais nas definições:

• Cor da ligação: ajuste a cor das ligações utilizando o seletor de cores ou um código hexadecimal.

• Sublinhar ligações: ative ou desative a opção de sublinhado para as ligações dentro do bloco de texto.

• Edição de ligações: Selecione uma ligação na área de conteúdo para editar o respetivo URL no painel de definições. Também pode atribuir ou atualizar etiquetas da ligação utilizando o menu pendente identificado como "Etiquetas".

4. Alinhamento

Alinhe o bloco de texto dentro do respetivo contentor: Esquerda, Centro ou Direita.

5. Altura fixa

Defina uma altura fixa para o bloco de texto ativando esta opção. Também pode controlar o alinhamento vertical do texto: Superior, Meio ou Inferior.

6. Espaçamento entre linhas

Controle o espaço entre as linhas de texto. Escolha entre Reduzido, Normal ou Amplo.

7. Preenchimento

Ajuste o espaço em redor do bloco de texto. Aplique um preenchimento uniforme ou personalize cada lado: Superior, Inferior, Esquerdo e Direito.

8. Ligações âncora

Crie ligações âncora para permitir que os leitores saltem para secções específicas do seu e-mail. Tenha em atenção que alguns clientes de e-mail não suportam ligações âncora.

Bloco de botão

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

Definições da ligação

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

Tipos de ligação disponíveis

• Ligação normal para um site (HTTP ou HTTPS): direciona o utilizador para uma página Web.
• Ligação de e-mail: abre o cliente de e-mail do utilizador para redigir uma nova mensagem.
• Ligação para ficheiro (FTP, FTPS): liga a um ficheiro num servidor FTP.
• Skype: inicia uma chamada ou conversa no Skype.
• Telefone (tel): inicia uma chamada telefónica em dispositivos compatíveis.
• SMS: abre a aplicação de mensagens com o número do destinatário pré-preenchido.
• Viber: abre a aplicação Viber para mensagens ou chamadas.
• Outro tipo de protocolo: especifique um protocolo personalizado não listado acima.

Opções de partilha social

Também pode configurar o botão para partilha social ou por e-mail:

• Facebook
• X (anteriormente Twitter)
• LinkedIn
• Pinterest
• Partilha por e-mail

Campo do URL

Junto ao tipo de ligação, o Campo do URL (que normalmente começa por https://) permite-lhe introduzir o endereço específico correspondente ao tipo de ligação.

Etiqueta do botão

Personalize a etiqueta do botão para refletir o seu apelo à ação. A etiqueta predefinida é "Botão", mas pode alterá-la para opções como "Saiba mais", "Subscreva agora" ou "Compre agora".

Estilo do texto

As definições de Estilo do texto permitem ajustar o aspeto do texto do botão.

Seleção do tipo de letra

Escolha entre vários tipos de letra padrão, incluindo:

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

Para tipos de letra não padrão, estão disponíveis opções adicionais, incluindo:

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

Na parte superior da lista de tipos de letra, uma caixa de pesquisa ajuda a localizar rapidamente um tipo de letra específico.

Tamanho e formatação da letra

• Tamanho da letra: escolha entre 8 e 72, consoante o destaque que pretende dar ao texto do botão.
• Formatação do texto: aplique Negrito ou Itálico utilizando os ícones "B" ou "I" para realçar o texto do botão.

Definições de cor

Personalize o aspeto do botão ajustando as respetivas definições de cor.

1. Cor do botão: altere a cor de fundo do botão. A predefinição é verde (#31cb4b). Utilize o campo do código hexadecimal ou o seletor de cores para escolher uma nova cor.

2. Cor do texto: defina a cor do texto do botão. A predefinição é branco (#ffffff). Escolha uma cor que contraste bem com o fundo do botão para garantir a legibilidade.

3. Cor do fundo: ajuste o fundo do contentor do botão. Por predefinição, é transparente, mas pode alterá-lo para destacar o botão do fundo do e-mail.

Raio da borda

Controle o arredondamento dos cantos do botão utilizando a definição Raio da borda.

• Valor predefinido: 30 (cantos moderadamente arredondados).
• Intervalo: de 0 (cantos quadrados) a 100 (botão em forma de cápsula).

Nota: Para garantir que os cantos arredondados são apresentados corretamente no Microsoft Outlook, ative a opção "Suporte do Outlook" no separador Aparência.

Alinhamento

Posicione o botão dentro da área de conteúdo utilizando a definição Alinhamento.

• Opções: Esquerda, Centro, Direita.
• Utilização comum: alinhamento ao centro para dar destaque; alinhamento à esquerda ou à direita para manter a consistência do design.

Altura fixa

Ative a opção Altura fixa para manter dimensões consistentes do botão.

1. Predefinição: desativada.
2. Altura mínima: 44 píxeis.
3. Alinhamento vertical do conteúdo: quando a altura fixa está ativada, alinhe o conteúdo do botão ao Superior, Meio ou Inferior para um posicionamento preciso.

Botão com ícone

A opção Botão com ícone permite incluir um ícone junto ao texto do botão, melhorando o apelo visual e reforçando o apelo à ação. Esta funcionalidade está desativada por predefinição.

• Formatos compatíveis: carregue ícones nos formatos PNG, JPG ou GIF, com um tamanho máximo de 2 MB.
• Posicionamento do ícone: escolha apresentar o ícone no lado Esquerdo ou Direito do texto do botão.

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

• Outlook 2002, 2007, 2010, 2013, 2016 e 2019. Esta limitação deve-se à forma como estes clientes de e-mail processam e apresentam e-mails HTML. Tenha isto em consideração se uma grande parte do seu público utilizar estes clientes.

Definições da borda

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

• Largura da borda: defina individualmente a largura de cada lado (esquerdo, direito, superior e inferior), até 40 píxeis.
• Estilo da borda: escolha entre os estilos Contínuo, Tracejado ou Pontilhado.
• Cor da borda: utilize o seletor de cores ou introduza um código hexadecimal para adequar a cor da borda à sua marca ou esquema de design.

Preenchimento interno

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

• Opções de personalização: defina valores de preenchimento para os lados Esquerdo, Direito, Superior e Inferior, até um máximo de 99 píxeis.
• Impacto: o preenchimento interno afeta o tamanho geral do botão e a posição do conteúdo dentro dele.

Preenchimento externo

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

• Opções de personalização: defina valores de preenchimento externo para os lados Esquerdo, Direito, Superior e Inferior, até um máximo de 40 píxeis.
• Caso de utilização: garante que o botão não fica demasiado próximo de outro conteúdo ou das margens do e-mail.

Adicionar ligação âncora

Utilize ligações âncora para direcionar os leitores para secções específicas dentro do mesmo e-mail, proporcionando uma navegação rápida em newsletters mais longas.

• Nome da âncora: defina um destino dentro do e-mail e associe o botão a essa âncora. Quando clicado, o e-mail desloca-se para a secção especificada, melhorando a navegação do utilizador.

Importante: as ligações âncora não são suportadas por determinados clientes de e-mail, incluindo:

• Aplicação Gmail para iOS
• Apple Mail para iOS
• Aplicação Outlook para Android
• Aplicação Outlook para macOS
• E-mails AMP

Teste cuidadosamente o seu e-mail para garantir o funcionamento em diferentes clientes de e-mail e determinar se esta funcionalidade é adequada ao seu público.

Bloco espaçador

O Bloco espaçador permite adicionar espaço ajustável ao conteúdo do seu e-mail, proporcionando controlo sobre o tamanho, alinhamento, aspeto e espaçamento interno. Abaixo, encontrará detalhes sobre os dois tipos de espaçadores: Espaçador normal e Espaçador dinâmico.

1. Espaçador normal

O Espaçador normal é um elemento de linha que separa visualmente as secções do seu e-mail.

Definições principais

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

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

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

3. Alinhamento Alinhe a linha à esquerda, ao centro ou à direita para corresponder ao seu esquema.

4. Preenchimento Controle o espaçamento interno em redor do espaçador:

   • Predefinição: o preenchimento está definido como 20 em todos os lados.
   • Utilize o botão Mais para especificar o preenchimento de cada lado:
     • Superior
     • Direito
     • Inferior
     • Esquerdo

Caso de utilização

O Espaçador normal é ideal para criar separações visuais limpas entre as secções do seu e-mail, garantindo um esquema bem organizado e profissional.

2. Espaçador dinâmico

O Espaçador dinâmico é um bloco invisível de espaço vazio concebido para criar espaço de respiração no esquema do seu e-mail.

Funcionalidades principais

1. Ajuste da altura Ajuste a altura diretamente na área de conteúdo ou através do painel de controlo, utilizando os botões + e -. A altura determina o espaço vertical adicionado entre as secções.

2. Cor do fundo Por predefinição, o espaçador tem um fundo transparente, mas pode aplicar uma cor de fundo personalizada utilizando um código hexadecimal ou o seletor de cores. Isto permite que o espaçador funcione como um bloco visível, se necessário.

3. Comportamento responsivo A opção Espaçador responsivo garante que o espaçador se adapta dinamicamente a diferentes tamanhos de ecrã para obter um esquema ideal em vários dispositivos. Esta funcionalidade está ativada por predefiniçã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 definições específicas da linha, como:
  • Largura da linha
  • Alinhamento
  • Estilos da linha
  • Preenchimento

O Espaçador dinâmico não suporta estas funcionalidades e foi concebido exclusivamente para criar separação sem elementos visuais.

3. Adicionar ligação âncora

As ligações âncora podem ser aplicadas a ambos os tipos de espaçador, permitindo que os utilizadores naveguem diretamente para a localização do espaçador a partir de outra parte do e-mail. Isto é especialmente útil para criar navegação dentro do e-mail em newsletters mais longas.

Nota: as ligações âncora não são suportadas por determinados clientes de e-mail, incluindo:

• Microsoft Outlook
• Gmail (em dispositivos móveis)

Bloco de vídeo

O Bloco de vídeo permite incorporar vídeos no seu e-mail e personalizar o respetivo aspeto e comportamento. Suporta ligações de vídeo de plataformas como YouTube e Vimeo, proporcionando flexibilidade e controlo sobre a forma como o vídeo é apresentado.

1. Ligação para o vídeo

Adicione o URL do vídeo no campo Ligação para o vídeo. As plataformas suportadas incluem YouTube, Vimeo e outros serviços incorporáveis.

• Comportamento automático: quando é adicionado um URL válido:

  • É gerada automaticamente uma imagem de pré-visualização utilizando a miniatura do vídeo da plataforma.
  • O campo Texto alternativo é preenchido automaticamente com o título ou a descrição do vídeo (se disponível).

• Campos editáveis: pode editar ou substituir manualmente a imagem e o texto de pré-visualização gerados, se necessário.

2. Texto alternativo

O campo Texto alternativo garante a acessibilidade, apresentando uma descrição do vídeo caso este não carregue.

• É preenchido automaticamente quando é adicionado um URL de vídeo suportado.
• Pode ser personalizado de acordo com as necessidades do seu conteúdo.

3. Miniatura personalizada

Carregue uma imagem personalizada para substituir a pré-visualização de vídeo predefinida.

• Como ativar: ative a opção Miniatura personalizada.
• Formatos suportados: PNG, JPG ou GIF.
• Quando utilizar: substitua a miniatura gerada quando esta não estiver alinhada com o design do seu 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 os estilos de botão de reprodução do YouTube, Vimeo ou outros.
  • selecione “Nenhum” para ocultar completamente o botão de reprodução.

5. Tamanho

Ajuste as dimensões do vídeo para se adaptar ao design do seu e-mail.

• Largura e altura: utilize os botões + e - ou introduza manualmente os valores para controlar o tamanho.
• Design responsivo: garanta que o vídeo se ajusta perfeitamente em vários dispositivos.

6. Ajustar à largura

Ative o botão Ajustar à largura para fazer com que o vídeo se ajuste automaticamente à largura do respetivo contentor. Isto garante que o vídeo mantém um design responsivo em vários dispositivos.

7. Imagem responsiva

O botão Imagem responsiva garante que a miniatura do vídeo se ajusta à largura do ecrã em dispositivos móveis.

• Nota: a capacidade de resposta depende do suporte do dispositivo e do cliente de e-mail.

8. Alinhamento

Utilize a definição Alinhamento para controlar o posicionamento horizontal do vídeo no bloco:

• Esquerda: alinha o vídeo à esquerda.
• Centro: centra o vídeo.
• Direita: alinha o vídeo à direita.

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

Personalize o comportamento e o aspeto do vídeo em dispositivos móveis:

1. Ocultar elemento em dispositivos móveis Oculte o bloco de vídeo em dispositivos móveis, se necessário.

   • Nota: esta funcionalidade depende do suporte de consultas de multimédia e pode não funcionar em todos os clientes de e-mail.

2. Preenchimento em dispositivos móveis Ajuste o preenchimento em redor do vídeo para visualizações em dispositivos móveis.

   • Utilize o botão Mais para definir valores de preenchimento individuais para:
     • Superior
     • Direito
     • Inferior
     • Esquerdo

10. Incluir em AMPHTML ou HTML

Escolha se o bloco de vídeo aparece em versões específicas do e-mail:

• AMPHTML e HTML
• Apenas AMPHTML
• Apenas HTML

Esta opção garante que o vídeo é incluído adequadamente consoante a versão do e-mail que está a ser enviada.

Bloco HTML

O Bloco HTML permite inserir código HTML e CSS personalizado no seu e-mail, oferecendo flexibilidade para personalizações avançadas e mantendo a compatibilidade com os clientes de e-mail. Quer esteja a adicionar um único elemento HTML ou a criar um e-mail completo, este bloco é a sua ferramenta para designs personalizados.

1. Interface do editor de código

Quando seleciona o Bloco HTML, aparece uma janela preta de edição de código no painel de conteúdo. Este editor permite escrever, colar ou modificar código personalizado. O editor inclui duas secções:

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

2. Ajuste do tamanho da letra

Ajuste o tamanho da letra do código no editor para melhorar a legibilidade:

• Utilize o botão A+ para aumentar o tamanho da letra.
• Utilize o botão A- para diminuir o tamanho da letra.

3. Ajuste do tamanho da janela do editor

Redimensione a janela do editor de código de acordo com as suas preferências de trabalho:

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

Esta funcionalidade é particularmente útil para gerir blocos de código maiores ou mais detalhados.

4. Editor CSS

O Editor CSS permite gerir os estilos do seu conteúdo HTML e está acessível através de um botão no canto superior direito do editor de código.

Considerações importantes:

• Suporte limitado: muitos clientes de e-mail não suportam funcionalidades CSS avançadas, como Flexbox, Grid ou consultas de multimédia.
• Mantenha o básico: utilize CSS básico incorporado para obter a máxima compatibilidade.
• Estilos pré-configurados: evite eliminar estilos pré-configurados, pois garantem uma apresentação correta nos principais clientes de e-mail.

5. Compatibilidade com clientes de e-mail

O HTML de e-mail requer atenção especial devido aos motores de apresentação desatualizados de muitos clientes de e-mail.

Orientações principais:

• Utilize esquemas baseados em tabelas em vez de esquemas baseados em <div> para obter melhor suporte.
• Evite funcionalidades CSS avançadas, como animações, Flexbox ou Grid.
• Conte com comportamentos inconsistentes nas consultas de multimédia e em pequenas propriedades CSS.
• Testes: teste sempre os e-mails em vários clientes (por exemplo, Gmail, Outlook e Apple Mail) para garantir uma apresentação correta.

6. Preenchimento

A definição Preenchimento ajusta o espaço em redor do seu conteúdo HTML:

• Preenchimento predefinido: definido como 0 por predefinição.
• Preenchimento personalizado: ative o botão Mais para ajustar individualmente o preenchimento de:
  • Superior
  • Direito
  • Inferior
  • Esquerdo

Esta funcionalidade é ideal para alinhar o conteúdo HTML dentro do esquema do e-mail.

7. Adicionar ligação âncora

A funcionalidade Adicionar ligação âncora permite criar uma ligação clicável noutra parte do e-mail que navega até ao Bloco HTML.

Como utilizar:

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

Limitações:

• As ligações âncora não são suportadas por alguns clientes de e-mail, como:
  • Aplicação Gmail para iOS
  • Apple Mail para iOS
  • Aplicação Outlook (Android e macOS)
  • E-mails AMP

8. Escrever HTML personalizado

O Editor HTML foi concebido para escrever ou colar a estrutura HTML personalizada do seu e-mail.

Práticas recomendadas:

• Utilize HTML simples e amplamente suportado.
• Evite esquemas complexos ou funcionalidades como elementos <div>.
• Prefira designs baseados em tabelas para garantir uma melhor compatibilidade.

9. Dicas para ter sucesso

1. Comece com pouco: utilize o Bloco HTML para secções específicas se não tiver experiência em desenvolvimento de e-mails.
2. Valide o código: certifique-se de que o seu HTML cumpre os requisitos dos clientes de e-mail.
3. Teste cuidadosamente: utilize ferramentas para pré-visualizar e testar o seu e-mail em vários clientes e dispositivos.