Existem três fatores principais para exibição de espaços indesejados entre as imagens, ao criar um modelo de e-mail:
- Quebra de linha no HTML
Ao copiar e colar imagens no Editor da MailerWeb, podem existir quebras de linha invisíveis entre elas. Para apagar as quebras de linha:
- Apagar manualmente os espaços em branco entre as imagens;
- Alternar para a visualização HTML e conferir se existem tags <br> ou <p> entre as imagens.
- Espaçamento automático adicionado pelo editor
Alguns editores adicionam automaticamente margens ou espaçamentos entre as imagens. Para ajustar as Configurações de Espaçamento:
- Selecione a imagem e verifique se há alguma opção de "margem" ou "padding" no editor.
- Defina o valor como 0 (zero) para remover qualquer espaço extra.
- Diferença de tamanho entre as imagens
Se uma imagem for um pouco maior ou menor que a outra, o editor pode tentar ajustá-las automaticamente, criando espaços entre elas. Para garantir que as imagens tenham o mesmo tamanho:
- Verifique se todas as imagens têm exatamente a mesma largura (ex.: todas com 600px de largura).
- Use ferramentas de edição de imagens (ex.: Canva, Photoshop, TinyPNG) para redimensionar as imagens antes de fazer o upload.
Dicas!
- Se a imagem for inserida e estiver sozinha dentro de uma célula de tabela, ela não deve ficar dentro da tag <p> (parágrafo).
- Inserir no código-fonte HTML, no topo do seu modelo de e-mail marketing, o seguinte código CSS;
Figura 1: <style type="text/css"> td > div { line-height: 0;} div { display: block !important;} </style>
- Na tag <img>, inserir o atributo <style="vertical-align: top;" > (para cada imagem do modelo).
Figura 2: <img alt="" height="350" src="https://seusite/imagens/design-sem-nome.gif" style="width: 100%; vertical-align: top;" width="630" />